Example to Get Device Information in React Native

This is an Example to Get Device Information in React Native. To get the device information in React Native will use the react-native-device-info library.

In this example, we will show you how to get all the information about the device using a single library. We will get the following details in this example.

MethodReturn Type iOSAndroidSince
getAPILevel()number0.12.0
getApplicationName()string0.14.0
getBatteryLevel()Promise<number>0.18.0
getBrand()string0.9.3
getBuildNumber()string?
getBundleId()string?
getCarrier()string0.13.0
getDeviceCountry()string0.9.0
getDeviceId()string0.5.0
getDeviceLocale()string0.7.0
getDeviceName()string?
getFirstInstallTime()number0.12.0
getFontScale()number0.15.0
getFreeDiskStorage()number0.15.0
getIPAddress()Promise<string>0.12.0
getInstallReferrer()string0.19.0
getInstanceID()string?
getLastUpdateTime()number0.12.0
getMACAddress()Promise<string>0.12.0
getManufacturer()string?
getMaxMemory()number0.14.0
getModel()string?
getPhoneNumber()string0.12.0
getReadableVersion()string?
getSerialNumber()string0.12.0
getSystemName()string?
getSystemVersion()string?
getTimezone()string?
getTotalDiskCapacity()number0.15.0
getTotalMemory()number0.14.0
getUniqueID()string?
getUserAgent()string0.7.0
getVersion()string?
is24Hour()boolean0.13.0
isAirPlaneMode()Promise<boolean>0.25.0
isEmulator()boolean?
isPinOrFingerprintSet()(callback)boolean0.10.1
isTablet()boolean?
hasNotch()boolean0.23.0
isLandscape()boolean0.24.0
getDeviceType()string?

So let’s get started with the example to Get Device Info.

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 Dependency

To use DeviceInfo we need to install react-native-device-info 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 dependencies into your node_module directory, You can find the directory in node_module directory named react-native-device-info.

–save is optional, it is just to update the react-native-device-info 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.

Additional Permission for Android

To use getIPAddress in Android you need to get the permission in Android. So to get the permission, add the blow line into your AndroidManifest.xml

 

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

      

This is how you can get the Device Info. 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. 🙂

React Native Add Items to ScrollView using Loop

This is an Example of React Native Add Items to ScrollView using Loop.  In this example, you will be having the basic idea about the loop in JavaScript. We are making a List but here we are not using any ListView instead we are making using the for loop and scroll view. We are attaching a single view containing Text on the ScrollView using the loop.

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

Android

This is how you can add items to ScrollView using Loop. 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. 🙂

Example to Call Functions of Other Class From Current Class in React Native

This is an Example to Call Functions of Other Class From Current Class in React Native. This can be usually seen in object-oriented languages like Java; Where we make an object of the other class and call the function of it. In the case of React Native, you can also do the same by making an object of a class. You can also pass the arguments if you want.

To call the function from OtherClass

OR

In this example of Calling Functions of Other Class From Current Class, we will make an OtherClass and will define two functions with and without arguments and after that, we will call this functions from Our default class.

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

          

This is how you can call the function of other class from the current class. 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. 🙂

React Native Get Unique ID of Device

Every mobile device in the world has its unique ID which is a combination of Alphabetic and Numeric characters. To get the device’s Unique ID and we can use the react-native-device-info library.

The unique device ID is used to identify a device uniquely. For example, if you are making an application which requires a unique device dependent login mechanism like WhatsApp where you want the user to log in from a single device at a time then you can use device unique ID to track the single device login.

So let’s get started with the example to Get Unique ID of Device.

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 Dependency

To use DeviceInfo we need to install react-native-device-info package. To install this

Open the terminal and jump into your project

Run the following command

This command will copy all the dependencies into your node_module directory, You can find the directory in node_module directory named react-native-device-info.

–save is optional, it is just to update the react-native-device-info dependancy in your package.json file.

Now we need to execute

This command will link installed package to our current react native project.

For more related installation click 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).

      

This is how you can get the Unique ID of Device. 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. 🙂

React Native Show SuperScript and SubScript

React Native SuperScript SubScript is a React Native Version of tags available in HTML known as <sup> superscript and <sub> subscript.

Superscript tag sets the half of character above on the text writing line like (10am) and same as but in a different manner the Subscript tag is opposite of superscript, In subscript tag, the next character would be half down to the previous one like (10am).

lineHeight is a style attribute which will help us to make Superscript and Subscript text.

LineHeightText Type
30Shows normal Text
18Shows superscript
37Shows subscript

Here is the simple example to show how to show SuperScript and SubScript.

Show SuperScript Using

Show SubScript Using

In this example,  we will show a simple sentence which will have a SuperScript and SubScript text. 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).

This is how you can show SuperScript and SubScript. 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. 🙂

React Native Global Scope Variables

We all know either we are developing any web or any mobile app, We always need Global Scope Variables. If you are not familiar with global variable just think about the variables which can be accessed from any screen/activity after first initialization.

They can be used on any screen as local variables but the difference is their scope is global. In React Native we can make any variable Global Scope Variables by just putting global. prifix.
For an Example
If we have myvar which is a local variable and accessible only from the same class. and if we have global.myvar then it becomes global and can be accessed from any class of the application.

Here is the example to understand it. We have a global.MyVar variable initialized in the first screen which can be accessed from First Screen as well as from the Second Screen.

This example will work for the React Navigation Version 3+. If you are using Version 2+ then please find the comments in the code for the suitable changes or can see our old post React Native Navigation Version 2+ for the help.

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.

We are going to use the react-navigation library to switch our screen so you need to install the same.

Installation of Dependencies

To use createStackNavigator you need to install react-navigation and react-native-gesture-handler dependencies.

To install these dependencies open the terminal and jump into your project

Run the following commands

This command will copy all the dependencies into your node_module directory. –save is optional, it is just to update 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.

Project File Structure

To start with this Example you need to create a directory named pages in your project and create two files FirstPage.js and SecondPage.js

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

App.js

Open pages/FirstPage.js in any code editor and the Replace the code with the following code.

FirstPage.js

Open pages/SecondPage.js in any code editor and the Replace the code with the following code.

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

    

This is how you can make a Global Scope Variables. 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. 🙂