Hi Guys,

Today, I will learn you how to add modal bottom sheet in react native. we will show example of react native modal bottom sheet component.You can easily implement bottom sheet component in react native. First i will import react-native-js-bottom-sheet after I will create modal bottom sheet component in react native.

Here, I will give you full example for modal bottom sheet component using react native as bellow.

In the first step Run the following command for create project.

expo init MyWebtutsProject

In the step,I will install react-native-js-bottom-sheet package using yarn.

yarn add react-native-js-bottom-sheet

In this step, You will open App.js file and put 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',
  }
});

In the last step run your project using bellow command.

expo start

It will help you..