React-native ile internet tabanlı bir uygulama geliştirirken, uygulamadan atma (crash) hatası almamak için internet işlemlerini yapmadan önce aşağıdaki fonksiyon ile react-native İnternet bağlantı kontrolü yapabilirsiniz.

Aşağıdaki kod android ve ios için çalışmakta. Önce NetInfo ve Platform sınıflarını import etmeniz gerekiyor. NetInfo sınıfı daha önce react-native’in çekirdeğinde geliyordu fakat artık komüniteye devredildi. Önce comunity’deki repositoyr i terminalden çekiyoruz:

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

NetInfo sınıfını link ile bağlıyoruz:

react-native link @react-native-community/netinfo

Kontrol yapacağımız sayfada (ya da import ederek çağırabilirsiniz) default sınıf içerisine aşağıdaki fonksiyonu ekliyoruz:

 CheckConnectivity = () => {
        // For Android devices
        if (Platform.OS === "android") {
            NetInfo.isConnected.fetch().then(isConnected => {
                if (isConnected) {
                    Alert.alert("İnternet'e bağlısınız!");
                } else {
                    Alert.alert("İnternet Bağlantısı Mevcut Değil!");
                }
            });
        } else {
            // For iOS devices
            NetInfo.isConnected.addEventListener(
                "connectionChange",
                this.handleFirstConnectivityChange
            );
        }
    };

    handleFirstConnectivityChange = isConnected => {
        NetInfo.isConnected.removeEventListener(
            "connectionChange",
            this.handleFirstConnectivityChange
        );

        if (isConnected === false) {
            Alert.alert("İnternet Bağlantısı Mevcut Değil!");
        } else {
            Alert.alert("İnternet'e bağlısınız!");
        }
    };

dipnot: Yaptığım demoda uyarıları Alert sınıfı ile veriyorum, dolayısıyla Alert sınıfını import etmelisiniz.

Yapmak istediğiniz işlem ya da görüntülemek istediğiniz sayfadan önce CheckConnectivity() çağırdığınızda bağlantı kontrolü gerçekleşecektir.

Android İçin Ekstra Adımlar

İşin android tarafında NetApi izinlere takılıyor. AndroidManifest.xml dosyasına ACCESS_NETWORK_STATE iznini vermemiz gerekiyor.

React-native proje dizininde Android >> App >> src >> main yolunu takip ederek, AndroidManifest.xml dosyasına aşağıdaki kodu ekleyip uygulamayı yeniden koşturuyoruz.

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

Bu kadar.01