React Native Modal Bottom Sheet Example


Share:
Published By: Admin, Published On: Oct 09, 2021, Category: React Native
React Native Modal Bottom Sheet

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.

Step 1 - Create project

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

expo init MyWebtutsProject
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 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',
  }
});
Step 4 - Run project

In the last step run your project using bellow command.

expo start
Output

It will help you..

Share: