React Native Modal Bottom Sheet Example




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 = () => {


render() {

return (

<View style={styles.container}>

<Button title="Open" onPress={this._onPressButton} />


ref={(ref: BottomSheet) => {

this.bottomSheet = ref







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} />









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


React Native Modal Bottom Sheet Example

It will help you...

#React Native