I am building a React Native with expo android with real device and I am using react-native-paper with it’s navigation.

I also added bottom navigation bar but the problem is that when I reload the page the click on tabs to change the component then it works for 3 seconds maximum and then it stops working after 3 seconds, I don’t what is happening with my app and why it is working in the first place and not then.

const Tab = createBottomTabNavigator();


function Home() {
  return (
    <View style={homeStyles.container}>
      <Text variant="headlineMedium">Home!</Text>
    </View>
  );
}

function App() {

   return (
   <PaperProvider theme={theme}>
    <NavigationContainer>
       <Tab.Navigator>
         <Tab.Screen name="Home" component={Home} />
         <Tab.Screen name="Settings" component={SettingsScreen} />
       </Tab.Navigator>
    </NavigationContainer>
   </PaperProvider>
   )
}

this is the function I am using and nothing other than that.

but it is still just working when I reload the app then buttons on navigation doesn’t click and change tabs. I may be missing some dependencies but why work in the first place.

• I have tried with material-navigation-tabs but same problem is in there.

• I have tried deleting node_modules and again reinstalled the dependencies but no error and not working.

• Tried many different navigation tabs libs but same result is shown for every one of them.

Even my android device’s screen is perfectly fine.
When I try to test the online version of react native https://snack.expo.dev/2hHn0ExLdNp6ubeU4m0pU and scan it in my expo app in device then navigation is also not working but working online, but my device is perfectly fine with Android 10, Can this create conflicts in devices?
Does it have to do with the functional/class component?