Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

React Navigation: Back button very slow to execute

$
0
0

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: {},});

Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>