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. Does it have to do with the functional/class component?