4

native-info package like tutorial but just enters once and initial render, I implemented App.js is my initial rendering page and I use redux and react nativagiton to App.js return method I confuse why console.warn triggered once and initial render, my App.js code like below

import {SafeAreaProvider} from 'react-native-safe-area-context';
import {Provider} from 'react-redux';
import {PersistGate} from 'redux-persist/integration/react';
import {NavigationContainer} from '@react-navigation/native';

import { SafeAreaProvider } from "react-native-safe-area-context";
import { Provider } from "react-redux";
import { PersistGate } from "redux-persist/integration/react";
import { NavigationContainer } from "@react-navigation/native";

export default function App() {
  let navigator;
  const [netInfo, setNetInfo] = useState("");
  const [netConnection, setNetConnection] = useState(false);

  useEffect(() => {
    const unsubscribe = NetInfo.addEventListener((state) => {
      setNetInfo({
        isConnected: state.isConnected,
      });
    });

    return () => {
      unsubscribe();
    };
  }, []);

  useEffect(() => {
    console.warn(netInfo.isConnected);
    if (netInfo.isConnected === undefined) {
      if (netInfo.isConnected) {
        setNetConnection(true);
      } else {
        setNetConnection(false);
      }
    }
  }, [netInfo]);

  return (
    <Provider store={store}>
      {netConnection && <RnModal show={netConnection} />}
      <PersistGate loading={null} persistor={persistor}>
        <SafeAreaProvider>
          <NavigationContainer
            ref={(nav) => {
              navigator = nav;
            }}
          >
            <Navigator />
          </NavigationContainer>
        </SafeAreaProvider>
      </PersistGate>
    </Provider>
  );
}
Alisan26
  • 323
  • 2
  • 12

0 Answers0