Package Exports

@nghinv/react-native-action-sheet

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@nghinv/react-native-action-sheet) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@nghinv/react-native-action-sheet

A custom alert component with react-native-reanimated

Installation

Installing the package

Use yarn

yarn add @nghinv/react-native-action-sheet

Use npm

npm install @nghinv/react-native-action-sheet

Peer dependencies
- react-native-safe-area-context
- @nghinv/react-native-icons

How to use

Wrapper ActionSheetService in the Root Component

  import { ActionSheetService } from '@nghinv/react-native-action-sheet';

  ...
  return (
    <ActionSheetService>
      <RootComponent />
    </ActionSheetService>
  );
  ...

Use ActionSheet.show() and ActionSheet.hide()

import React from 'react';
import { View, StyleSheet, Button } from 'react-native';
import { ActionSheet } from '@nghinv/react-native-action-sheet';

export default function Example() {
  const onPress = () => {
    ActionSheet.show({
      title: 'React Native Debug Menu',
      message: 'Running JSI (<JSCRuntime@0x6000003a3ad50>)',
      bottomTitle: 'Cancel',
      zIndex: 10,
      options: [
        {
          title: 'Hello',
          autoDismiss: false,
          onPress: () => {},
        },
        {
          title: 'Good morning',
          leftIconName: 'photo',
          checked: true,
          renderRight: () => (
            <View
              style={{
                width: 40, height: 40, backgroundColor: 'red'
              }}
            />
          ),
        },
        { title: 'Good afternoon', checked: true },
      ],
    });
  };

  return (
    <View style={styles.container}>
      <Button title='Show action sheet' onPress={onPress} />
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'skyblue'
  }
});