App.tsx

import React, { useEffect, useRef } from "react";
import { SafeAreaView, StyleSheet } from "react-native";
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { store, persistor } from './src/redux/store'
import RootStack from "./src/routes/RootStack";
import { NavigationContainer, DarkTheme } from '@react-navigation/native';
import SplashScreen from 'react-native-splash-screen';
import { CommonActions, createNavigationContainerRef } from '@react-navigation/native'
import { useDispatch } from 'react-redux';
import { changeSelectedScreen } from "./src/redux/actions";


const App = () => {
  const navigationRef = createNavigationContainerRef();
  //  const dispatch = useDispatch();

  useEffect(() => {
    setTimeout(() => {
      SplashScreen.hide()
    }, 2000)
  }, [])
  const onStateChange = async () => {
    const currentRouteName = navigationRef?.current?.getCurrentRoute()?.name
    console.log('screen', currentRouteName);
    store.dispatch(changeSelectedScreen(currentRouteName))
  }

  return (
    <SafeAreaProvider style={{ backgroundColor: 'black' }}>
      <SafeAreaView style={styles.container}>
        <Provider store={store}>
          <PersistGate loading={null} persistor={persistor}>
            <NavigationContainer ref={navigationRef} theme={DarkTheme} onStateChange={onStateChange}>
              <RootStack />
            </NavigationContainer>
          </PersistGate>
        </Provider>
      </SafeAreaView>
    </SafeAreaProvider>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1
  }
});

export default App;