@nuskin/bottom-sheet

BottomSheetModal

React Native library for a customized BottomSheetModal built with react-native-bottom-sheet.

Installation

yarn add @ns/mobile-ui

Setup

The BottomSheetModal depends on React Native Reanimated which requires some additional setup, primarily on Android:

Android

React Native Reanimated Per the official docs

1. Turn on Hermes engine by editing android/app/build.gradle

project.ext.react = [
  enableHermes: true  // <- here | clean and rebuild if changing
]

1. Plug Reanimated in MainApplication.java

import com.facebook.react.bridge.JSIModulePackage; // <- add
  import com.swmansion.reanimated.ReanimatedJSIModulePackage; // <- add
  ...
  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
  ...

      @Override
      protected String getJSMainModuleName() {
        return "index";
      }

      @Override
      protected JSIModulePackage getJSIModulePackage() {
        return new ReanimatedJSIModulePackage(); // <- add
      }
    };
  ...

iOS

Run pod install in the ios/ directory.

Babel Plugin

Add Reanimated's babel plugin to your babel.config.js and make sure it is listed last:

module.exports = {
      ...
      plugins: [
          ...
          'react-native-reanimated/plugin',
      ],
  };

Usage

The BottomSheetModal must be wrapped in a BottomSheetModalProvider and GestureHandlerRootView. For more information, see the official docs for react-native-bottom-sheet and react-native-gesture-handler. Note that this library uses Bottom Sheet Modal, a wrapper/decorator on top of the Bottom Sheet component shipped by react-native-bottom-sheet. If the BottomSheetModal will be used throughout your app, we recommend wrapping your entry point with the BottomSheetModalProvider and GestureHandlerRootView:

import { BottomSheetModalProvider, ShareModal } from '@ns/mobile-ui'
import { GestureHandlerRootView } from 'react-native-gesture-handler'
// ...
export default function App() {
  // ...
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <BottomSheetModalProvider>...</BottomSheetModalProvider>
    </GestureHandlerRootView>
  )
}

Define and set a ref for the modal. To show the BottomSheetModal, call the showSheet function shipped by this package, or use the methods shipped by react-native-bottom-sheet (see methods). Our BottomSheetModal can be further customized by passing any props supported by react-native-bottom-sheet (see props)

import React, { useRef } from 'react'
import { BottomSheetModal, BottomSheetModalType } from 'nuskin/ui'
import { View, Text, Button, StyleSheet } from 'react-native'

export const Example = () => {
  // ref
  const bottomSheetModalRef = useRef < BottomSheetModalType > null

  // variables
  const snapPoints = useMemo(() => ['25%', '50%'], [])

  // callbacks
  const handlePresentModalPress = useCallback(() => {
    bottomSheetModalRef.current?.present()
  }, [])
  const handleSheetChanges = useCallback((index: number) => {
    console.log('handleSheetChanges', index)
  }, [])

  // renders
  return (
    <BottomSheetModal
      ref={bottomSheetModalRef}
      index={0}
      snapPoints={snapPoints}
      onChange={handleSheetChanges}
    >
      <View style={styles.contentContainer}>
        <Text>Awesome Example 🎉</Text>
        <Button onPress={handlePresentModalPress} title="Present Modal" />
      </View>
    </BottomSheetModal>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 24,
    justifyContent: 'center',
    backgroundColor: 'grey'
  },
  contentContainer: {
    flex: 1,
    alignItems: 'center'
  }
})