Basic introduction of React Native components. We have covered almost all the components which will help you to start developing React Native App.

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. 🙂

Example of Request Focus and Keyboard Avoiding View in React Native

This is an Example of Request Focus and Keyboard Avoiding View in React Native. While working with TextInput in native app development we don’t have to take care of the focus and keyboard avoiding because it is done by the app itself but in case of React Native, we have to take care of all this stuff so that we can provide a full native feel to the user.

Request Focus is used to set the focus to the TextInput while the keyboard is up and visible. It also helps to navigate to the next TextInput Using the following way.

Request Focus Use

Keyboard Avoiding View is used to close the keyboard. It wraps the whole form that we made using TextInput and close the keyboard if touched outside the TextInput. It is very helpful in the case of IOS because it does have a back button to close the keyboard. This feature is by default in React Native TextInput but if we are using Request Focus then sometimes it becomes very essential to use the Keyboard Avoiding View.

KeyboardAvoidingView Use

So Let’s get started with the example, In this example, we will make a Registration Form which will use TextInput with Icon and we will use Request Focus and Keyboard Avoiding View both.

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

To use Icon we have to install react-native-elements and react-native-vector-icons dependencies.

For installation open the terminal and jump into your project using

Run the following command

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 dependancies 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.

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 Request Focus and Keyboard avoiding view 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. The remaining components will be covered in the next article. Stay tuned!

Hope you liked it. 🙂

React Native Start Stop Device Vibration on Button Click

React Native Start Stop Device Vibration includes the way you can start and start the vibration on a button click. you can vibrate the device when you want to give feedback on any action performed by the user. For example, if you use any keyboard you can generate small vibration so that user come to know that some action was performed.

We will use Vibration component to vibrate the Device. It is one of the basic components provided by the React native.

Note: We will suggest running this example in the real device as you can’t feel the vibration in Virtual Devices.

Import Vibration

Start the Vibration Using

Stop the Vibration Using

In this example, We will start and stop vibration on a button click. So let’s get started.

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.

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).

     

That was the React Native Vibration component. If you have any doubt or you want to share something about the topic you can comment below or contact us here. The remaining components will be covered in the next article. Stay tuned!

Hope you liked it. 🙂

React Native Share API to Share TextInput message

React Native Share API to Share TextInput message includes the React Native Share component which is used to share any content. We usually add a share button in our app to share something with other users either using any social media or any other medium.  Here is the example of React Native Share API to Share TextInput message from our App.

To Import Share API in Code

Use of Share API

In this example, We will share the input of a TextInput on button click using the Share API provided by React Native. It will open different platforms where you can share the content like Mail, Facebook, Twitter, Whatsapp etc. So let’s get started.

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.

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).

Android

     

IOS

That was the React Native Share API. If you have any doubt or you want to share something about the topic you can comment below or contact us here. The remaining components will be covered in the next article. Stay tuned!

Hope you liked it. 🙂

React Native NetInfo

Here is an Example of React Native NetInfo. React Native NetInfo exposes information about online/offline status. NetInfo notifies continuously about the network state whether it is online or offline.

Information about the net connection is very helpful when you are making an application which only works in online mode. The best example that you have seen is the YouTub app which will run smoothly and if you unexpectedly goes offline it generates a bottom snack alert to notify about the offline state.

Note: While getting internet connection information using NetInfo we attach a call back function with it. NetInfo provides the network information in this callback function but we can’t say it will call the function once or twice so there is no pattern that can define the number of calls from the NetInfo. Yeah, it is very sure it will call the function immediately after network state changes but still can say it will inform just once so you have to make your own logic with React Native state to handle the situation.

In this example, we will print the state of internet connection on console.

Under the Lean Core Project NetInfo has been moved to its new home @react-native-community/react-native-netinfo after the launch of React Native 0.59. If you are using React Native >= 0.59 then please follow the instruction for React Native >= 0.59.

To Import NetInfo in Code

For React Native < 0.59

After React Native >= 0.59

Get NetInfo Using

Listener for the change of NetInfo

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.


Additional Step for React Native >= 0.59

as we are using @react-native-community/react-native-netinfo in React Native >= 0.59 then we have to install and link the dependency.

Installation of Dependency

To use NetInfo we need to install @react-native-community/react-native-netinfo dependency.

To install this open the terminal and jump into your project using

Run the following command to install

This command will copy all the dependency into your node_module directory.
–save is optional, it is just to update the @react-native-community/react-native-netinfo dependancy in your package.json file.

Linking of Dependency

After installing the dependency 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.


Open App.js in any code editor and replace the code with the following code.

App.js

Permission to Access Network State and other configurations for Android

We are accessing the network state so we need to add some permission in AndroidManifest.xml file (For Android) after ejecting the project from expo environment.  On devices before SDK version API 23, the permissions are automatically granted if they appear in the manifest but after SDK version 23 android applies new permissions model. For more about the permission, you can see React Native Android Permission.

So we are adding going to add the following permission in the AndroidMnifest.xml

By adding permission in AndroidManifest.xml you are able to access ACCESS_NETWORK_STATE of your devices.

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).

That was the React Native NetInfo. If you have any doubt or you want to share something about the topic you can comment below or contact us here. The remaining components will be covered in the next article. Stay tuned!

Hope you liked it. 🙂

Get Device Height Width on Button Click in React Native

Here is an Example to Get Device Height Width on Button Click in React Native. We will use Dimensions component of react-native to get the Height and Width of the Device.

In mobile app development, we have to support different screens sizes. Especially if you are working on an App where responsiveness matters a lot then you need to keep track of Device Height and Width. So Let’s get started with the example to get the Device Height Width.

Import Dimensions

To Get the Height of the Device

To Get the Width of the Device

In this example, We will get the device height and width on a click of a button.

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.

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 Screenshots

          

Android Screenshots

          

That was the way to get device height width on button click. If you have any doubt or you want to share something about the topic you can comment below or contact us here. The remaining components will be covered in the next article. Stay tuned!

Hope you liked it. 🙂

React Native Copy to Clipboard

Reading and writing from the Clipboard is incredibly easy in React Native by using the Clipboard API. It will work on both Android and IOs platform. If you are working with the app which provides codes or referral numbers then you can provide Copy to Clipboard feature.

To Import Clipboard in Code

Use of Clipboard

Copy the value using

Paste the value using

In this example, We will copy the text inserted into TextInput and will show the copied text in Alert on a click of a Button. So let’s get started.

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.

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).

Android

      

IOS

That was the way to copy some text to Clipboard 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. The remaining components will be covered in the next article. Stay tuned!

Hope you liked it. 🙂

React Native Clicking on a Text Hyperlink to Open It in The Browser Using Linking

The example React Native Clicking on a Text Hyperlink to open it in the Browser will show you how to click on a link / URL to open it in the default browser. Clicking on a link and open it in the browser can be done using a React Native component called Linking.

While writing a text paragraph we some time needs the user to visit the reference website or in order to describe something we need to redirect the user to the reference website. To do this we can provide the copy to clipboard feature so that user can copy the web URL and can visit by pasting that URL in the browser or we can provide click to open in browser facility which will be the good impression on the user.

To Import Linking in Code

Linking Can be Used as

In this example, we will open a Web URL in browser Using React Native Linking component. So let’s get started.

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.

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).

Android

IOS

That was the React Native Linking Component. If you have any doubt or you want to share something about the topic you can comment below or contact us here. The remaining components will be covered in the next article. Stay tuned!

Hope you liked it. 🙂

Get Application State using AppState in React Native

This is an example to Get Application State using AppState in React Native. React Native AppState let you know the currents state of the application. It will give you the information that Application is in the foreground or in the background, and will notify you on the change of state. AppState is frequently used to determine the intent and proper behavior when handling push notifications.

App States

React Native AppState will provide you the following different App states:

  • active – The app is running in the foreground
  • background – The app is running in the background. The user is either:
    • using another app
    • on the home screen
    • [Android] on another Activity (even if it was launched by your app)
  • inactive – This is a state that occurs when transitioning between foreground & background, and during periods of inactivity such as entering the Multitasking view or in the event of an incoming call

To Import AppState in Code

To add AppState Listener

In this Example, we will see how to know the application status using the AppState. So Let’s get started.

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.

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).

Android

      



IOS

            

That was the React Native AppState. If you have any doubt or you want to share something about the topic you can comment below or contact us here. The remaining components will be covered in the next article. Stay tuned!

Hope you liked it. 🙂

Lifecycle of React Native Application Component

Hello Guys, Today we will talk about the Lifecycle of React Native Application Component. Lifecycle methods are inbuilt methods. As a Mobile Application developer, we have to take care of the Lifecycle of each screen/activity/component because sometimes we have to load the data accordingly.  For an Example, if I want to initialize some connection when the user opens the screen reader and close it when the user closes it; In both the cases we have to have some knowledge about the Lifecycle methods so that we can perform such actions.

The lifecycle of React Native Application

There are 4 types of Lifecycle methods available in React Native:

  1. Mounting methods
    • constructor()
    • componentWillMount()
    • render()
    • componentDidMount()
  2. Updating methods
    • componentWillReceiveProps()
    • shouldComponentUpdate()
    • componentWillUpdate()
    • componentDidUpdate()
  3. Unmounting methods
    • componentWillUnmount()
  4. Error handling methods
    • componentDidCatch()

Description

1. Mounting Methods:

1. constructor(): It is the first method called when we open a screen, it is mostly used to create States.

2. componentWillMount(): It is called right after constructor(), used to call asynchronous tasks or network calls.

3. render(): Render is the most important Lifecycle method because it is used to render UI or we can say the main View of the screen.

4. componentDidMount(): Is called after render method, It is used for the network calls.

2. Updating methods:

Updating methods are used to update the value of Props or State to React Native. These methods are called automatically when a component re-renders.
1. componentWillReceiveProps(): It is called before the component dose anything with new props, We would send the next prop as an argument inside it.

2. shouldComponentUpdate(): It is called every time before the screen or parent component re-renders. We can stop re-rendering of the screen by passing false in this method.

3. componentWillUpdate(): It is called before the re-rendering when new state or props is received for updating. It does not allow the this.setState({}) method.

4. componentDidUpdate(): It is called after the rendering, this method is mostly used to interact with updated rendering values and execute any post render events.

3. Unmounting method:

1. componentWillUnmount(): It is called when the component is removed from the DOM, Users can clear any running timers, stop network requests and cleaning any previously stored value in the application in this method.

4. Error handling method:

1. The componentDidCatch(): It is a part of the error handling method. It is used to find error between JavaScript code and handle them by passing the correct message or argument. It will help us to use any try /cache block to handle any error.

That was the different methods which are called in a Lifecycle of any Screen/Activity/Component. You can try it out by making an example This post will help you to know more about the way you can make a React Native project or by replacing the following code in your existing project’s App.js

App.js

         

 

You can also try it on Snack

That was the Lifecycle methods of the React Native App. If you have anything to share please comment below or contact us here.

Have a happy codding.
Hope you liked it:)