Posts

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

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

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 the react-native-cli command line utility. Open the terminal and go to the workspace and run
npm install -g react-native-cli
Run the following commands to create a new React Native project
react-native init ProjectName
This will make a project structure with an index file named App.js in your project directory.

Installation of Dependencies

For installation of the dependencies, open the terminal and jump into your project using.

Run the following commands

1. For BottomSheet component you need to install react-native-btr package.
Run the following command for the installation

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

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

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

To Run the React Native App

Open the terminal again and jump into your project using.
cd ProjectName
To run the project on an Android Virtual Device or on real debugging device
react-native run-android
or on the iOS Simulator by running
react-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. 🙂

Best UI Libraries for React Native

Here are some of the Best UI Libraries for React Native to help you. React Native helps you to create real and existing mobile apps with the help of JavaScript only, which is supportable for both Android and iOS platform. React Native uses the fundamental UI building blocks as regular iOS and Android apps. We just need to put those building blocks together using JavaScript and React.

You won’t find as many styling solutions for React Native as you will for React JS. This is because React Native is a much smaller target for component libraries than traditional CSS frameworks. In other words, Bootstrap CSS can be used with any web framework, whereas component libraries for React Native only work with React Native.

Here are some of the toolkits that are available and actively maintained by the community itself. These toolkits will not only save up your tons of development time but also help you to provide consistent design over different devices. But before have a look at the installation of libraries.

How to install a Library

You can install any library in react native by running the simple command on the terminal after going into your project directory.

The exact name of the library can be found from the website of the GitHub page of that library.

--save is optional to add but you should use that while installing anything as it updates your package.json file and add the library in dependencies.

Every time you install any library npm copies all the files related to that library in node_module in your project. You can see the folder in your project with name node_module which has the number of default libraries added.

The role of package.json is that it keeps the entries of the installed libraries which are required by the project. So whenever you want to share your code you just have to share the js files and package.json with others and the other person has to run npm install and all the dependencies will be installed automatically using package.json.

You can skip --save but it will be problematic for you if you delete node_module somehow and trying to run your project. You will need to recall all the installed libraries or you have to tell it to other people if you share the code with other. So it’s good to use --save while installing any library.

React Native UI Libraries

Here is the list of the useful libraries:

React Native Elements
  • Cross-Platform React Native UI Toolkit.
  • Easily style any of our components just the way you want.
  • Open source.

Install using

NativeBase
  • Essential cross-platform UI components for React Native & Vue Native.
  • Open source.

Install using

React Native Material Kit
  • A set of UI components, for the purpose of introducing Material Design to apps built with React Native, quickly and painlessly.

Install using

React Native UI Kitten
  • React Native UI Kitten is a framework that contains a set of commonly used UI components styled in a similar way.
  • You focus on business logic and it takes care of visual appearance.

Install using

Nachos UI
  • Over 30 UI components
  • Customizable UI compone

Install using

React Native Gifted Chat
  • Custom components, InputToolbar avoiding keyboard, Multiline TextInput
  • Load earlier messages, Avatar as initials

Install using

Please note that customizing React Native styling isn’t the easiest thing in the world. Many apps demand custom styling, which makes component kits not too useful but still we can’t ignore the usefulness of the UI libraries in the development.

Hope you liked it. 🙂