This tutorial explains how to get android or ios device unique ID in react native application. Every mobile phone device in the world has its unique ID(Identify Signature) which makes with the combination of Alphabetic and Numeric characters. Unique device ID is used in Push Notification, identify a device uniquely at login app and most of money making app’s usages this to prevent multiple app installation in same device.
Both android and iOS devices supports Unique ID and using the react-native-device-info NPM library we can easily retrieve Get Android iOS Device Unique ID Dynamically on button click in Android iOS react native application.
NPM command :
Automatic link using below command :
Step 1: Create a new react native project, if you don’t know how to create a new project in react native just follow this tutorial.
Step 2: Open your react native project folder in CMD or Terminal and execute the below command to install the react-native-device-info library.
NPM command :
Automatic link using below command :
Step 3: Open App.js File in your favorite code editor and erase all code and follow this tutorial.
Step 4: Through react , react-native, react-native-device-info packages import all required components.
Step 5: create constructor block inside your App component and make a State named as DeviceID, this state is used to hold the Unique device id.
Step 6: Create a function named as getUniqueDeviceID(), Inside this function we would simply get the unique device id using DeviceInfo.getUniqueID() method and store this into State.
Step 7: Implement render method inside the App class and wrapped the below layout design inside the root View component.
Step 8 : Apply the below style sheet design.
Screenshot :
This is all about React Native Get Android or iOS Device Unique ID Dynamically. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.
Both android and iOS devices supports Unique ID and using the react-native-device-info NPM library we can easily retrieve Get Android iOS Device Unique ID Dynamically on button click in Android iOS react native application.
Installation of Dependency
To get unique device ID android or ios we have to install act-native-device-info package, in our project directory first.NPM command :
npm install --save react-native-device-info
Automatic link using below command :
react-native link react-native-device-info
React Native Get Unique ID of Device
Lets see the complete source code that helps to get android or ios device unique ID in react native application with simple example.Step 1: Create a new react native project, if you don’t know how to create a new project in react native just follow this tutorial.
Step 2: Open your react native project folder in CMD or Terminal and execute the below command to install the react-native-device-info library.
NPM command :
npm install --save react-native-device-info
Automatic link using below command :
react-native link react-native-device-info
Step 3: Open App.js File in your favorite code editor and erase all code and follow this tutorial.
Step 4: Through react , react-native, react-native-device-info packages import all required components.
import React, { Component } from 'react'; import { StyleSheet, Text, View, TouchableOpacity } from 'react-native'; import DeviceInfo from 'react-native-device-info';
Step 5: create constructor block inside your App component and make a State named as DeviceID, this state is used to hold the Unique device id.
constructor() { super(); this.state = { DeviceID: '' } }
Step 6: Create a function named as getUniqueDeviceID(), Inside this function we would simply get the unique device id using DeviceInfo.getUniqueID() method and store this into State.
getUniqueDeviceID = () => { var id = DeviceInfo.getUniqueID(); this.setState({ DeviceID: id }) }
Step 7: Implement render method inside the App class and wrapped the below layout design inside the root View component.
render() { return ( <View style={styles.Container}> <Text style={{ textAlign: 'center', fontSize: 20, marginBottom: 10 }}>{this.state.DeviceID}</Text> <TouchableOpacity onPress={this.getUniqueDeviceID} activeOpacity={0.5} style={styles.button} > <Text style={styles.TextStyle}> CLICK TO GET DEVICE UNIQUE ID </Text> </TouchableOpacity> </View> ); }
Step 8 : Apply the below style sheet design.
const styles = StyleSheet.create({ Container: { flex: 1, justifyContent: 'center', alignItems: 'center' }, TextStyle: { fontSize: 15, textAlign: 'center', color: 'white' }, button: { paddingTop: 10, paddingBottom: 10, width: '90%', backgroundColor: '#673ab7', }, });
Complete Source Code for App.js
Lets see the complete source code that helps to get android or ios device unique ID in react native application.
import React, { Component } from 'react'; import { StyleSheet, Text, View, TouchableOpacity } from 'react-native'; import DeviceInfo from 'react-native-device-info'; export default class App extends Component { constructor() { super(); this.state = { DeviceID: '' } } getUniqueDeviceID = () => { var id = DeviceInfo.getUniqueID(); this.setState({ DeviceID: id }) } render() { return ( <View style={styles.Container}> <Text style={{ textAlign: 'center', fontSize: 20, marginBottom: 10 }}>{this.state.DeviceID}</Text> <TouchableOpacity onPress={this.getUniqueDeviceID} activeOpacity={0.5} style={styles.button} > <Text style={styles.TextStyle}> CLICK TO GET DEVICE UNIQUE ID </Text> </TouchableOpacity> </View> ); } } const styles = StyleSheet.create({ Container: { flex: 1, justifyContent: 'center', alignItems: 'center' }, TextStyle: { fontSize: 15, textAlign: 'center', color: 'white' }, button: { paddingTop: 10, paddingBottom: 10, width: '90%', backgroundColor: '#673ab7', }, });
Screenshot :
This is all about React Native Get Android or iOS Device Unique ID Dynamically. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.
No comments:
Post a Comment