04-Apr-2023
.
Admin
Hi Dev,
In this tutorial, I will learn you how to add modal bottom sheet using react native.
Here, i will give you complete example for implementing modal bottom sheet component using react-native-js-bottom-sheet package as bellow.
Step 1 - Create project
In the first step Run the following command for create project.
expo init NicesnippetsApp
Step 2 - Install Package
In the step,I will install react-native-js-bottom-sheet package using yarn.
yarn add react-native-js-bottom-sheet
Step 3 - App.js
In this step, You will open App.js file and get the code.
import React, { Component } from 'react'
import { AppRegistry, StyleSheet, Text, View, Button } from 'react-native'
import BottomSheet from 'react-native-js-bottom-sheet'
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'
export default class BottomSheetExample extends Component {
bottomSheet: BottomSheet
_onPressButton = () => {
this.bottomSheet.open()
}
render() {
return (
<View style={styles.container}>
<Button title="Open" onPress={this._onPressButton} />
<BottomSheet
ref={(ref: BottomSheet) => {
this.bottomSheet = ref
}}
itemDivider={2}
backButtonEnabled={true}
coverScreen={false}
options={[
{
title: 'Document',
icon: <MaterialCommunityIcons name="file-document" color="#2186fa" size={24} />
},
{
title: 'Spreadsheet',
icon: <MaterialCommunityIcons name="google-spreadsheet" color="#43a047" size={24} />
},
{
title: 'Folder',
icon: (
<MaterialCommunityIcons name="folder" color="grey" size={24} />
)
},
{
title: 'Upload File',
icon: <MaterialCommunityIcons name="cloud-upload" color="grey" size={24} />
},
{
title: 'Camera',
icon: <MaterialCommunityIcons name="camera" color="grey" size={24} />
}
]}
isOpen={false}
/>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
}
});
Step 4 - Run project
In the last step run your project using bellow command.
npm start
Output
It will help you...
#React Native