@nghinv/react-native-bottom-sheet
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.3 • Public • Published

    @nghinv/react-native-bottom-sheet

    A custom alert component with react-native-reanimated


    Version MIT License All Contributors

    Installation

    Installing the package

    • Use yarn
    yarn add @nghinv/react-native-bottom-sheet
    • Use npm
    npm install @nghinv/react-native-bottom-sheet
    yarn add react-native-gesture-handler react-native-reanimated react-native-safe-area-context @nghinv/react-native-icons

    How to use

    1. Wrapper BottomSheetService in the Root Component
      import { BottomSheetService } from '@nghinv/react-native-bottom-sheet';
    
      ...
      return (
        <BottomSheetService>
          <RootComponent />
        </BottomSheetService>
      );
      ...
    1. Use BottomSheet.show() and BottomSheet.hide()
    import React from 'react';
    import { View, StyleSheet, Button } from 'react-native';
    import { BottomSheet } from '@nghinv/react-native-bottom-sheet';
    
    export default function Example() {
      const onPress = () => {
        BottomSheet.show({
          bottomButton: {
            title: 'Cancel',
          },
          header: {
            title: 'Chọn thời gian',
            rightIconProps: {
              color: 'tomato',
            },
          },
          optionProps: {
            titleCenter: false,
          },
          options: [
            { title: 'What language do you want to study most?', checked: false },
            { title: 'Where did you go in the first week on your honeymoon?', checked: true },
            { title: 'banana' },
          ],
        });
      };
    
      return (
        <View style={styles.container}>
          <Button title='Show bottom sheet' onPress={onPress} />
        </View>
      )
    }
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'skyblue'
      }
    });

    Credits

    Install

    npm i @nghinv/react-native-bottom-sheet

    DownloadsWeekly Downloads

    33

    Version

    1.1.3

    License

    MIT

    Unpacked Size

    253 kB

    Total Files

    23

    Last publish

    Collaborators

    • nghinv