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
- Turn on Hermes engine by editing
android/app/build.gradle
project.ext.react = [
enableHermes: true // <- here | clean and rebuild if changing
]
- 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 = () => {
const bottomSheetModalRef = useRef < BottomSheetModalType > null
const snapPoints = useMemo(() => ['25%', '50%'], [])
const handlePresentModalPress = useCallback(() => {
bottomSheetModalRef.current?.present()
}, [])
const handleSheetChanges = useCallback((index: number) => {
console.log('handleSheetChanges', index)
}, [])
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'
}
})