Sandbox app which contains two screens with React Native Stack navigator.
When using The buttons to explicitly call 'navigation.navigate("Desired Screen")' the app performs decently well. However, when trying to use the back button (auto created on header when navigating away from initialRoute screen), it takes about 2 seconds for the screen to load.
Tested on real Android device with 'Debug' turned on and without Debug turned on. Is this expected behavior with react-native navigation?
App.tsx:
import React from 'react';import {Text, View} from 'react-native';import {Home} from './src/screens/fornav/Home';import {MySettings} from './src/screens/fornav/MySettings';import {createStackNavigator} from '@react-navigation/stack';import {NavigationContainer} from '@react-navigation/native';type RootStackParamList = { Home: undefined; MySettings: undefined;};const MyStack = createStackNavigator<RootStackParamList>();const App = () => { return (<NavigationContainer><MyStack.Navigator initialRouteName="Home"><MyStack.Screen name="Home" component={Home} options={{title: 'My Home Screen'}} /><MyStack.Screen name="MySettings" component={MySettings} /></MyStack.Navigator></NavigationContainer> );};export default App;
Home.tsx:
import React from 'react';import {Button, StyleSheet, Text, View} from 'react-native';interface HomeProps { navigation: any;}export const Home: React.FC<HomeProps> = ({navigation}) => { return (<View style={styles.viewStyle}><Text>{'HOME SCREEN'}</Text><Button title={'Go to settings.'} onPress={() => navigation.navigate('MySettings')} /></View> );};const styles = StyleSheet.create({ viewStyle: {},});
MySettings.tsx:
import React from 'react';import {Button, StyleSheet, Text, View} from 'react-native';interface MySettingsProps { navigation: any;}export const MySettings: React.FC<MySettingsProps> = ({navigation}) => { return (<View style={styles.viewStyle}><Text>{'SETTINGS SCREEN'}</Text><Button title={'Go home.'} onPress={() => navigation.navigate('Home')} /></View> );};const styles = StyleSheet.create({ viewStyle: {},});