Custom ActionSheet for React Native
npm install react-native-actionsheet-cstm
$ npm install react-native-actionsheet-cstm --save
height="380" width="200"
/>
height="380" width="200"
/>
height="380" width="200"
/>
height="380" width="200"
/>
``typescript
import React, {useState} from 'react';
import {SafeAreaView, Text, ScrollView, TouchableOpacity} from 'react-native';
import {ActionSheet} from 'react-native-actionsheet-cstm';
const App = () => {
const [showActionSheet, setShowActionSheet] = useState
const onShowActionSheet = () => {
setShowActionSheet(true);
};
const onCloseActionSheet = () => {
setShowActionSheet(false);
};
return (
flex: 1,
height: 40,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#3880ff',
}}
onPress={onShowActionSheet}>
onClose={onCloseActionSheet}
actionItems={[
{
text: 'Save',
onPress: () => {
console.log('Save');
},
},
{
text: 'Update',
onPress: () => {
console.log('Update');
},
},
{
text: 'Delete',
textStyle: [{color: 'red'}],
onPress: () => {
console.log('Delete');
},
},
]}
/>
);
};
export default App;
``
| Name | Type | Default | Description |
| -------------------- | -------------------- | -------- | ---------------------------------------------------------------------------------------------------------- |
| visible | boolean | false | Show the Action sheet |
| onClose | function | null | Trigger a function asking to close the Action sheet. |
| actionItems | Array
| onShow? | function | null | The onShow prop allows passing a function that will be called once the Action sheet has been shown. |
| onDismiss? | function | null | The onDismiss prop allows passing a function that will be called once the Action sheet has been dismissed. |
| backdropStyle? | StyleProp
| containerStyle? | StyleProp
| titleContainerStyle? | StyleProp
| title? | string | null | Action sheet title (Not required) |
| titleTextStyle? | StyleProp
| cancelButtonStyle? | StyleProp
| cancelText? | string | 'Cancel' | Action sheet cancel button title |
| cancelTextStyle? | StyleProp
| hideCancel | boolean | false | Hidde the Action sheet Cancel button |
| Name | Type | Default | Description |
| ---------- | -------------------- | ------- | ------------- |
| text | string | null | button title |
| onPress | function | null | button action |
| textStyle? | StyleProp