Example of Bottom Sheet (Material Design) in React Native
This is an Example of Bottom Sheet (Material Design) in React Native. To make a Bottom Sheet we will use BottomSheet component provided by react-native-btr.
Bottom Sheet was firstly introduced in android material design and became very popular. Different people use bottom sheet differently but the simple example which can be seen in day to day life is when you share something. When you share any data application opens a bottom sheet to ask you “share via”. We will make the same demo with the bottom sheet in this example.
Bottom Sheet
1 2 3 4 5 6 7 8 9 10 11 12 13 | <BottomSheet visible={this.state.visible} //setting the visibility state of the bottom shee onBackButtonPress={this._toggleBottomNavigationView} //Toggling the visibility state on the click of the back botton onBackdropPress={this._toggleBottomNavigationView} //Toggling the visibility state on the clicking out side of the sheet > {/*Bottom Sheet inner View*/} <View style={styles.bottomNavigationView}> ..... </View> </BottomSheet> |
In this example, we will make a button to open a bottom sheet which has some social icons. We will use react-native-elements to make social icons.
Social Icon
1 2 3 4 5 6 7 8 9 10 | <SocialIcon //Social Icon using react-native-elements type="twitter" //Type of Social Icon onPress={() => { //Action to perform on press of Social Icon this._toggleBottomNavigationView(); alert('twitter'); }} /> |
To Make a React Native App
Getting started with React Native will help you to know more about the way you can make a React Native project. We are going to use react-native init to make our React Native App. Assuming that you have node installed, you can use npm to install thereact-native-cli command line utility.
Open the terminal and go to the workspace and runnpm install -g react-native-clireact-native init ProjectNameInstallation of Dependencies
For installation of the dependencies, open the terminal and jump into your project using.
1 | cd ProjectName |
Run the following commands
1. For BottomSheet component you need to install react-native-btr package.
Run the following command for the installation
1 | npm install react-native-btr --save |
2. We are going to use SocialIcon component to show the Social icons so for that you have to install react-native-elements and react-native-vector-icons dependencies.
Run the following commands for the installation
1 | npm install react-native-elements --save |
1 | npm install react-native-vector-icons --save |
This command will copy all the dependencies into your node_module directory, You can find the directories in node_module.
–save is optional, it is just to update the dependencies in your package.json file.
Linking of Dependencies
After installing the dependencies you need to link it with your project using
1 | react-native link |
After linking the dependency if you face Could not Compile Settings File project/android/settings.gradle error while building and installing the project then you can find the solution here.
Now Open App.js in any code editor and replace the code with the following code.
App.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 | /*Example of Bottom Sheet (Material Design)*/ import React, { Component } from 'react'; //import react in our project import { StyleSheet, View, Platform, Text, Button, TouchableHighlight, } from 'react-native'; //import basic react native components import { BottomSheet } from 'react-native-btr'; //import for the bottom sheet import { SocialIcon } from 'react-native-elements'; //import to show social icons export default class App extends Component<{}> { constructor() { super(); this.state = { //default visibility state of the bottom sheet visible: false, }; } _toggleBottomNavigationView = () => { //Toggling the visibility state of the bottom sheet this.setState({ visible: !this.state.visible }); }; render() { return ( <View style={styles.MainContainer}> <Text style={{ fontSize: 20, marginBottom: 20, textAlign: 'center' }}> Example of Bottom Sheet in React Native </Text> <Button onPress={this._toggleBottomNavigationView} //on Press of the button bottom sheet will be visible title="Show Bottom Sheet" /> <BottomSheet visible={this.state.visible} //setting the visibility state of the bottom shee onBackButtonPress={this._toggleBottomNavigationView} //Toggling the visibility state on the click of the back botton onBackdropPress={this._toggleBottomNavigationView} //Toggling the visibility state on the clicking out side of the sheet > {/*Bottom Sheet inner View*/} <View style={styles.bottomNavigationView}> <View style={{ flex: 1, flexDirection: 'column', justifyContent: 'space-between', }}> <Text style={{ textAlign: 'center', padding: 20, fontSize: 20 }}> Share Using </Text> <View style={{ flex: 1, flexDirection: 'row' }}> <SocialIcon //Social Icon using react-native-elements type="twitter" //Type of Social Icon onPress={() => { //Action to perform on press of Social Icon this._toggleBottomNavigationView(); alert('twitter'); }} /> <SocialIcon type="gitlab" onPress={() => { this._toggleBottomNavigationView(); alert('gitlab'); }} /> <SocialIcon type="medium" onPress={() => { this._toggleBottomNavigationView(); alert('medium'); }} /> <SocialIcon type="facebook" onPress={() => { this._toggleBottomNavigationView(); alert('facebook'); }} /> <SocialIcon type="instagram" onPress={() => { this._toggleBottomNavigationView(); alert('instagram'); }} /> </View> <View style={{ flex: 1, flexDirection: 'row' }}> <SocialIcon type="facebook" onPress={() => { this._toggleBottomNavigationView(); alert('facebook'); }} /> <SocialIcon type="instagram" onPress={() => { this._toggleBottomNavigationView(); alert('instagram'); }} /> <SocialIcon type="gitlab" onPress={() => { this._toggleBottomNavigationView(); alert('gitlab'); }} /> <SocialIcon type="twitter" onPress={() => { this._toggleBottomNavigationView(); alert('twitter'); }} /> <SocialIcon type="medium" onPress={() => { this._toggleBottomNavigationView(); alert('medium'); }} /> </View> </View> </View> </BottomSheet> </View> ); } } const styles = StyleSheet.create({ MainContainer: { flex: 1, margin: 2, justifyContent: 'center', alignItems: 'center', paddingTop: Platform.OS === 'ios' ? 20 : 0, backgroundColor: '#E0F7FA', }, bottomNavigationView: { backgroundColor: '#fff', width: '100%', height: 250, justifyContent: 'center', alignItems: 'center', }, }); |
To Run the React Native App
Open the terminal again and jump into your project using.cd ProjectNamereact-native run-androidreact-native run-ios (macOS only).IOS
Android
That was the example of Bottom Sheet in React Native. If you have any doubt or you want to share something about the topic you can comment below or contact us here. There will be more posts coming soon. Stay tuned!
Hope you liked it. 🙂