Cross Platform ActionSheet For React Native

Author:ammarahm-ed
Views Total:13 views
Official Page:Go to website
Publish Date:September 4, 2020
License:MIT

A highly customizable and cross-platform(Android & iOS) ActionSheet with a flexible API, native performance, and zero dependency code for React Native.

Main Features:

  • Cross Platform (iOS and Android)
  • Native Animations & Performance
  • Identical Working on Android and iOS
  • Control ActionSheet with Gestures
  • Raw ActionSheet – You can Add Anything
  • Allow ActionSheet to be partially shown when opened
  • Support TextInputs
  • Cool bounce effect on open.
  • Support for Tablets and iPads
  • Support Horizontal Layout
  • Support for Nested Scrolling or Scrollable Content.
  • Virtualization Support

Install & Import:

# Yarn
$ yarn add react-native-actions-sheet

# NPM
$ npm i react-native-actions-sheet --save
import ActionSheet from "react-native-actions-sheet";
import React, { createRef } from "react";

Basic Usage:

const actionSheetRef = createRef();
const App = () => {
  let actionSheet;
  return (
    <View
      style={{
        justifyContent: "center",
        flex: 1,
      }}
    >
      <TouchableOpacity
        onPress={() => {
          actionSheetRef.current?.setModalVisible();
        }}
      >
        <Text>Open ActionSheet</Text>
      </TouchableOpacity>
      <ActionSheet ref={actionSheetRef}>
        <View>
          <Text>ANY COMPONENT INSIDE THE ACTIONSHEET</Text>
        </View>
      </ActionSheet>
    </View>
  );
};
export default App;

All default props:

children: <View />,
CustomFooterComponent: null,
CustomHeaderComponent: null,
footerAlwaysVisible: false,
headerAlwaysVisible: false,
containerStyle: {},
footerHeight: 40,
footerStyle: {},
animated: true,
closeOnPressBack: true,
gestureEnabled: false,
bounceOnOpen: false,
bounciness: 8,
extraScroll: 0,
closeAnimationDuration: 300,
delayActionSheetDraw: false,
delayActionSheetDrawTime: 50,
openAnimationSpeed: 12,
springOffset: 100,
elevation: 5,
initialOffsetFromBottom: 1,
indicatorColor: "#f0f0f0",
defaultOverlayOpacity: 0.3,
overlayColor: "black",
closable: true,
bottomOffset: 0,
closeOnTouchBackdrop: true,
onClose: () => {},
onOpen: () => {},
keyboardShouldPersistTaps: "never",
statusBarTranslucent: true,

Preview:

Cross Platform ActionSheet For React Native

You Might Be Interested In:

Leave a Reply