4

When I first launch the app, it's quick and responsive. But when I navigate, it's getting slower and slower. Even if i navigate between main screen and second screen recursively. First navigation is instant, but 10th is already taking a second, and the whole app is getting slow. I have a suspicion that navigation is the cause. Because if I don't do anything. the app just running, it's fast until I start to navigate. This happens on android with much greater scale. On iOS (at least on emulator) the issue is only slightly noticeable after a lot of navigations.

As far as I understand, every time I navigate somewhere, new screen is added on top of the stack. All my navigations are made like this.props.navigation.navigate('Home'), sometimes with props. So maybe this is the cause. If it is, is there a way to just reset the stack every time I go back to home screen?

This is my Navigator.js

import React, { Component } from 'react'
import { Platform, Dimensions } from 'react-native';
import { createDrawerNavigator, createAppContainer } from 'react-navigation'
import HomeScreen from '../screens/HomeScreen'
import ExercisesScreen from '../screens/ExercisesScreen'
import SettingsScreen from '../screens/SettingsScreen'
import IntakeScreen from '../screens/IntakeScreen'
import EmotionsScreen from '../screens/EmotionsScreen'
import MenuDrawer from './MenuDrawer';
import ProblemsScreen from '../screens/ProblemsScreen';
import PainScreen from '../screens/PainScreen';
import ActivityScreen from '../screens/ActivityScreen';
import ExerciseWalkingScreen from '../screens/ExerciseWalkingScreen'
import ExerciseStairsScreen from '../screens/ExerciseStairsScreen'
import ExerciseOrthostasisScreen from '../screens/ExerciseOrthostasisScreen';
import LoginScreen from '../screens/LoginScreen';
import ProfileScreen from '../screens/ProfileScreen';
import TimePickScreen from '../screens/TimePickScreen';

const { height, width } = Dimensions.get('window')

const DrawerConfig = {
    drawerWidth: width * 0.637,
    contentComponent: ({ navigation }) => {
        return (
            <MenuDrawer navigation={navigation} />
        )
    }
}

const DrawerNavigator = createDrawerNavigator({
    Home: {
        screen: HomeScreen
    },
    Exercises: {
        screen: ExercisesScreen
    },
    Settings: {
        screen: SettingsScreen
    },
    Intake: {
        screen: IntakeScreen
    },
    Emotions: {
        screen: EmotionsScreen
    },
    Problems: {
        screen: ProblemsScreen
    },
    Pain: {
        screen: PainScreen
    },
    Activity: {
        screen: ActivityScreen
    },
    WalkingExercise: {
        screen: ExerciseWalkingScreen
    },
    StairsExercise: {
        screen: ExerciseStairsScreen
    },
    OrthostasisExercise: {
        screen: ExerciseOrthostasisScreen
    },
    Profile: {
        screen: ProfileScreen
    },
    TimePickScreen: {
        screen: TimePickScreen
    }
}, DrawerConfig)

export default createAppContainer(DrawerNavigator)

I have another navigator with one login screen to show if user is not signed in. But I don't think it's relevant.

This is a content of my HomeScreen.js

import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View } from 'react-native';
import Toolbar from '../components/Toolbar'
import ExercisesTile from '../components/tiles/ExercisesTile'
import ActivityItem from '../components/ActivityItem'
import IntakeTile from '../components/tiles/IntakeTile';
import EmotionsTile from '../components/tiles/EmotionsTile';
import ProblemsTile from '../components/tiles/ProblemsTile';
import PainTile from '../components/tiles/PainTile';
import ActivityTile from '../components/tiles/ActivityTile';

type Props = {};
export default class HomeScreen extends Component<Props> {
    render() {
        return (
            <View style={styles.container}>
                <Toolbar text='Home' navigation={this.props.navigation} />
                <View style={styles.activityBox}>
                    <ExercisesTile navigation={this.props.navigation} />
                    <IntakeTile navigation={this.props.navigation} />
                    <EmotionsTile navigation={this.props.navigation} />
                    <ProblemsTile navigation={this.props.navigation} />
                    <PainTile navigation={this.props.navigation} />
                    <ActivityTile navigation={this.props.navigation} />
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#fff',
    },
    activityBox: {
        marginTop: 10,
        flex: 1,
        flexDirection: 'row',
        flexWrap: 'wrap',
        backgroundColor: 'white',
        justifyContent: 'center'
    }
});

and just for reference, Settings Screen, which is just completely empty

import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View, Alert, AsyncStorage, Button } from 'react-native';
import Toolbar from '../components/Toolbar'

type Props = {};
export default class SettingsScreen extends Component<Props> {
    render() {
        return (
            <View style={styles.container}>
                <Toolbar text='Settings' navigation={this.props.navigation} />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "#fff",
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    }
});

Navigating between these 2 screens back and forth are gettings slower and slower each time.

irondsd
  • 1,140
  • 1
  • 17
  • 34
  • Are all your screens within a single stack? It might be helpful to post how your routes are configured. – Sean Wang Mar 08 '19 at 23:26
  • Yes they are. I posted my Navigator.js file – irondsd Mar 09 '19 at 00:12
  • Check https://www.google.com/url?sa=t&source=web&rct=j&url=https://stackoverflow.com/questions/46127753/react-native-react-navigation-slow-transitions-when-nesting-navigators&ved=2ahUKEwi0nc7VivTgAhVRxIUKHfcqCdcQjjgwA3oECAcQAQ&usg=AOvVaw245au9ZE9maGKncbBxXkUw&cshid=1552101015847 – Amir Hedieh Mar 09 '19 at 03:11
  • 1
    A lot depends on what you are doing in each of your screens. Are they connected to redux? – 10101010 Mar 09 '19 at 06:36
  • No, they are not. Some of the screens are just empty yet, but navigation is still getting slow. Between home screen with 6 pretty simple components and empty screen. After 5 times going back and forth, it's noticeably slow. I checked the article, but they mention complex screens, which is not the case for me, all of my screens are simple. So the issue is different. – irondsd Mar 09 '19 at 08:49
  • I added contents of my screens on the question. As you can see, they are very simple. – irondsd Mar 09 '19 at 08:53
  • @10101010 What implication would it have if screens were connected to redux? – ksav Jun 11 '21 at 00:37
  • @irondsd Did you find the reason as to why this happens? The same thing happens to me all the time. If I navigate back and forth between screen A and B multiple times, it becomes extremely slow, like it eventually takes 20 seconds to do the screen transition. In Android. – badhanganesh Aug 28 '23 at 19:40

0 Answers0