react-native-actionsheet-cstm

Custom ActionSheet for React Native

Usage no npm install needed!

<script type="module">
  import reactNativeActionsheetCstm from 'https://cdn.skypack.dev/react-native-actionsheet-cstm';
</script>

README

react-native-actionsheet-cstm

npm version

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