Skip to content

Latest commit

 

History

History
120 lines (102 loc) · 5.51 KB

README.md

File metadata and controls

120 lines (102 loc) · 5.51 KB

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