React Native Modal Bottom Sheet Example

React Native

Nicesnippets

151

09-10-2021


React Native Modal Bottom Sheet Example

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

React Native Modal Bottom Sheet Example

It will help you...


Recommended Posts