Description:
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:
