react-native-devansh-action-sheet

Action Sheet/Option Picker for react-native

Usage no npm install needed!

<script type="module">
  import reactNativeDevanshActionSheet from 'https://cdn.skypack.dev/react-native-devansh-action-sheet';
</script>

README

react-native-action-sheet

Custom action sheet/option picker for react native

main image main image main image

Installation

npm install --save react-native-devansh-action-sheet

Importing

import React,{useState} from 'react';

import ActionSheet from 'react-native-devansh-action-sheet';

Example with Hooks

const [actionSheetVisibility,setActionSheetVisibility]=useState(false);

<Text onPress={() => setActionSheetVisibility(true)}>
        Show Action Sheet
  </Text>
        <ActionSheet
          onClose={() => setActionSheetVisibility(!actionSheetVisibility)} // to close the modal
          visibility={actionSheetVisibility}
          actionLabel={[
              {
              id:1,
              name:"Option 1"
            },
              {
              id:2,
              name:"Option 2",
               labelTextStyle: {
              fontSize: 30,
            },
            },
              {
              id:3,
              name:"Option 3",
               labelBackground: 'red',
               colored: true,
            },
             {
              id:4,
              name:"cancel",
              colored: true
            }
          ]}
          onActionLabelSelected={(val, index) => console.log(val, index)}
          heading={"My New Heading"}
        />