react-native-actionsheet-cstm


Getting started

$ npm install react-native-actionsheet-cstm --save

Demo

height="380" width="200"
/>
height="380" width="200"
/>
height="380" width="200"
/>
height="380" width="200"
/>

A basic Setup

``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(false);

const onShowActionSheet = () => {
setShowActionSheet(true);
};
const onCloseActionSheet = () => {
setShowActionSheet(false);
};

return (

Components

style={{
flex: 1,
height: 40,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#3880ff',
}}
onPress={onShowActionSheet}>
Show Action Sheet


visible={showActionSheet}
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;
``

Options

ActionSheetProps

| 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 | null | (array of ActionItem) - a list of button |
| 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 | null | Back drop style |
| containerStyle? | StyleProp | null | Container style |
| titleContainerStyle? | StyleProp | null | Container title style |
| title? | string | null | Action sheet title (Not required) |
| titleTextStyle? | StyleProp | null | Action sheet title style |
| cancelButtonStyle? | StyleProp | null | Action sheet cancel button style |
| cancelText? | string | 'Cancel' | Action sheet cancel button title |
| cancelTextStyle? | StyleProp | null | Action sheet cancel button text style |
| hideCancel | boolean | false | Hidde the Action sheet Cancel button |

ActionItem

| Name | Type | Default | Description |
| ---------- | -------------------- | ------- | ------------- |
| text | string | null | button title |
| onPress | function | null | button action |
| textStyle? | StyleProp | null | button style |