react-native-actionsheet-cstm

Getting started

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

Demo

A basic Setup

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

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

  return (
    <SafeAreaView style={{flex: 1}}>
      <Text style={{textAlign: 'center'}}>Components</Text>
      <ScrollView style={{flex: 1, marginTop: 50}}>
        <TouchableOpacity
          style={{
            flex: 1,
            height: 40,
            justifyContent: 'center',
            alignItems: 'center',
            backgroundColor: '#3880ff',
          }}
          onPress={onShowActionSheet}>
          <Text style={{color: '#fff'}}>Show Action Sheet</Text>
        </TouchableOpacity>

        <ActionSheet
          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');
              },
            },
          ]}
        />
      </ScrollView>
    </SafeAreaView>
  );
};

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 |