Navigate back to the homepage

How to get ip address in react native?

Infinitbility
React Native
October 24th, 2021 · 1 min read
How to get ip address in react native?

Hello Friends 👋,

Welcome To Infinitbility! ❤️

This tutorial will help you to get ip address and ipv4address in react native, and in this tutorial we will use React native network info to get ipaddress of device.

Let’s start today tutorial How to get ip address in react native?

Introduction

React native network info provide getIPAddress() method to get ip address of device, it will simply return data in string data type, and one more thing getIPAddress() available on both Platform android, and iOS.

Installation

  • Go to your project directory and install react-native-network-info package using npm.
1npm install --save react-native-network-info
  • Link react-native-network-info package if your react native version less then 0.63.
1npx react-native link react-native-network-info

Syntax

DeviceInfo.getIPAddress() function usages syntax.

1import {NetworkInfo} from 'react-native-network-info';
2
3// Get Local IP
4NetworkInfo.getIPAddress().then(ipAddress => {
5 console.log(ipAddress);
6});
7
8NetworkInfo.getIPV4Address().then(ipv4Address => {
9 console.log(ipv4Address);
10});

Example

In Below Example, we will store getIPAddress() value on state and show in application.

React Native Network Info getIPAddress example

1import React, { Component } from 'react';
2import {
3 StyleSheet,
4 View,
5 Text,
6 SafeAreaView,
7} from 'react-native';
8import {NetworkInfo} from 'react-native-network-info';
9
10class App extends Component {
11
12 constructor(props) {
13 super(props);
14
15 this.state = {
16 ipAddress: null,
17 ipv4Address: null
18 }
19 }
20
21
22 componentDidMount(){
23 NetworkInfo.getIPAddress().then(ipAddress => {
24 this.setState({ipAddress: ipAddress});
25 });
26
27 NetworkInfo.getIPV4Address().then(ipv4Address => {
28 this.setState({ipv4Address: ipv4Address});
29 });
30 }
31
32
33
34 render() {
35 const { ipv4Address, ipAddress } = this.state;
36 return (
37 <SafeAreaView style={{ flex: 1 }}>
38 <View style={styles.container}>
39 <Text>Your device ipAddress is </Text>
40 <Text>{`${ipAddress}`}</Text>
41 <Text>Your device ipv4Address is </Text>
42 <Text>{`${ipv4Address}`}</Text>
43 </View>
44 </SafeAreaView>
45 );
46 }
47}
48
49const styles = StyleSheet.create({
50 container: {
51 flex: 1,
52 alignItems: 'center',
53 marginTop: 20,
54 backgroundColor: '#ffffff',
55 },
56});
57
58export default App;

Output

React Native, network info, ipAddress, ipv4Address, Example

Thanks for Reading…

Join our email list and get notified about new content

No worries, I respect your privacy and I will never abuse your email.

Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

Guide book

Guidebook: The Javascript Monorepo

Tutorials

Categories

More articles from Infinitbility

How to get current month name in react native?

How to get current month name in react native?

React native getMonth name example

October 23rd, 2021 · 1 min read
How to check array is empty or not in react native?

How to check array is empty or not in react native?

Example check array is empty or not in react native

October 20th, 2021 · 1 min read
© 2020–2021 Infinitbility
About
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]