Bilişim dünyasına kaliteli, özgün ve Türkçe içerikler kazandırmayı hedefleyen bir platform..

React Native uygulamalarında eğer internet üzerinden veri çekiyorsak yapmamız gerek şeylerden birisi internet bağlantımızı kontrol etmektir. Kullanıcıya boş bir sayfa göstermektense bir uyarı mesajı vermek daha mantıklı olacaktır.

İnternet bağlantısını kontrol etmek için kullanacağımız paketin adı netinfo

Kurulum

npm install --save @react-native-community/netinfo

Import

import NetInfo from "@react-native-community/netinfo";

Kullanımı

Sayfa yüklendiğinde kontrol etmek istiyorsak:

import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View, Button, Alert } from 'react-native';
import NetInfo from "@react-native-community/netinfo";

export default function InternetConnectionScreen({ navigation }) {
  const [type, setType] = useState(false);
  const [isConnected, setIsConnected] = useState(false);
  useEffect(() => {
    NetInfo.fetch().then(state => {
      setType(state.type);
      console.log("Connection type", state.type);

      setIsConnected(state.isConnected);
      console.log("Is connected?", state.isConnected);
    });
    //console.log("Uygulama Yüklendi!");
  }, []);
  return (
    <>
      
      <Text>InternetConnection!</Text>
      
    </>
  )
}

Dinleyici kullanarak her değişiklikte öğrenmek istiyorsak, return ifadesini kullanacağız ve state değişkeni olan NetInfo'yu dizi içine alacağız.

import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View, Button, Alert } from 'react-native';
import NetInfo from "@react-native-community/netinfo";

export default function InternetConnectionScreen({ navigation }) {
  const [type, setType] = useState(false);
  const [isConnected, setIsConnected] = useState(false);
  useEffect(() => {
    // Subscribe
    const unsubscribe = NetInfo.addEventListener(state => {

      setType(state.type);
      console.log("Connection type", state.type);

      setIsConnected(state.isConnected);
      console.log("Is connected?", state.isConnected);
      Alert.alert("Is connected? "+state.isConnected)
    });

    // Unsubscribe
    return unsubscribe();
    //console.log("Uygulama Yüklendi!");
  }, [NetInfo]);
  return (
    <>

      <Text>InternetConnection!</Text>

    </>
  )
}