Ufdjrw

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.