Browse Source

Fix tab navigator render loop

Arnaud Vergnet 2 years ago
parent
commit
9e6fee467f

+ 4
- 4
App.tsx View File

53
 export default class App extends React.Component<{}, StateType> {
53
 export default class App extends React.Component<{}, StateType> {
54
   navigatorRef: { current: null | NavigationContainerRef };
54
   navigatorRef: { current: null | NavigationContainerRef };
55
 
55
 
56
-  defaultHomeRoute: string | null;
56
+  defaultHomeRoute: string | undefined;
57
 
57
 
58
-  defaultHomeData: { [key: string]: string };
58
+  defaultHomeData: { [key: string]: string } | undefined;
59
 
59
 
60
   urlHandler: URLHandler;
60
   urlHandler: URLHandler;
61
 
61
 
67
     };
67
     };
68
     initLocales();
68
     initLocales();
69
     this.navigatorRef = React.createRef();
69
     this.navigatorRef = React.createRef();
70
-    this.defaultHomeRoute = null;
71
-    this.defaultHomeData = {};
70
+    this.defaultHomeRoute = undefined;
71
+    this.defaultHomeData = undefined;
72
     this.urlHandler = new URLHandler(this.onInitialURLParsed, this.onDetectURL);
72
     this.urlHandler = new URLHandler(this.onInitialURLParsed, this.onDetectURL);
73
     this.urlHandler.listen();
73
     this.urlHandler.listen();
74
     setSafeBounceHeight(Platform.OS === 'ios' ? 100 : 20);
74
     setSafeBounceHeight(Platform.OS === 'ios' ? 100 : 20);

+ 12
- 5
src/navigation/MainNavigator.tsx View File

313
 }
313
 }
314
 
314
 
315
 type PropsType = {
315
 type PropsType = {
316
-  defaultHomeRoute: string | null;
317
-  defaultHomeData: { [key: string]: string };
316
+  defaultHomeRoute?: string;
317
+  defaultHomeData?: { [key: string]: string };
318
 };
318
 };
319
 
319
 
320
-export default function MainNavigator(props: PropsType) {
320
+function MainNavigator(props: PropsType) {
321
   const { preferences } = usePreferences();
321
   const { preferences } = usePreferences();
322
   const showIntro = getPreferenceBool(PreferenceKeys.showIntro, preferences);
322
   const showIntro = getPreferenceBool(PreferenceKeys.showIntro, preferences);
323
-
323
+  const createTabNavigator = () => <TabNavigator {...props} />;
324
   return (
324
   return (
325
     <MainStackComponent
325
     <MainStackComponent
326
       showIntro={showIntro !== false}
326
       showIntro={showIntro !== false}
327
-      createTabNavigator={() => <TabNavigator {...props} />}
327
+      createTabNavigator={createTabNavigator}
328
     />
328
     />
329
   );
329
   );
330
 }
330
 }
331
+
332
+export default React.memo(
333
+  MainNavigator,
334
+  (pp: PropsType, np: PropsType) =>
335
+    pp.defaultHomeRoute === np.defaultHomeRoute &&
336
+    pp.defaultHomeData === np.defaultHomeData
337
+);

+ 12
- 5
src/navigation/TabNavigator.tsx View File

136
 const HomeStack = createStackNavigator();
136
 const HomeStack = createStackNavigator();
137
 
137
 
138
 function HomeStackComponent(
138
 function HomeStackComponent(
139
-  initialRoute: string | null,
140
-  defaultData: { [key: string]: string }
139
+  initialRoute?: string,
140
+  defaultData?: { [key: string]: string }
141
 ) {
141
 ) {
142
   let params;
142
   let params;
143
   if (initialRoute) {
143
   if (initialRoute) {
232
 const Tab = createBottomTabNavigator<TabStackParamsList>();
232
 const Tab = createBottomTabNavigator<TabStackParamsList>();
233
 
233
 
234
 type PropsType = {
234
 type PropsType = {
235
-  defaultHomeRoute: string | null;
236
-  defaultHomeData: { [key: string]: string };
235
+  defaultHomeRoute?: string;
236
+  defaultHomeData?: { [key: string]: string };
237
 };
237
 };
238
 
238
 
239
 const ICONS: {
239
 const ICONS: {
264
   },
264
   },
265
 };
265
 };
266
 
266
 
267
-export default function TabNavigator(props: PropsType) {
267
+function TabNavigator(props: PropsType) {
268
   const { preferences } = usePreferences();
268
   const { preferences } = usePreferences();
269
   let defaultRoute = getPreferenceString(
269
   let defaultRoute = getPreferenceString(
270
     PreferenceKeys.defaultStartScreen,
270
     PreferenceKeys.defaultStartScreen,
324
   );
324
   );
325
 }
325
 }
326
 
326
 
327
+export default React.memo(
328
+  TabNavigator,
329
+  (pp: PropsType, np: PropsType) =>
330
+    pp.defaultHomeRoute === np.defaultHomeRoute &&
331
+    pp.defaultHomeData === np.defaultHomeData
332
+);
333
+
327
 export enum TabRoutes {
334
 export enum TabRoutes {
328
   Services = 'services',
335
   Services = 'services',
329
   Proxiwash = 'proxiwash',
336
   Proxiwash = 'proxiwash',

+ 0
- 3
src/screens/Home/HomeScreen.tsx View File

139
   return finalFeed;
139
   return finalFeed;
140
 };
140
 };
141
 
141
 
142
-/**
143
- * Class defining the app's home screen
144
- */
145
 function HomeScreen(props: Props) {
142
 function HomeScreen(props: Props) {
146
   const theme = useTheme();
143
   const theme = useTheme();
147
   const navigation = useNavigation();
144
   const navigation = useNavigation();

+ 2
- 2
src/screens/MainApp.tsx View File

15
 import { setupStatusBar } from '../utils/Utils';
15
 import { setupStatusBar } from '../utils/Utils';
16
 
16
 
17
 type Props = {
17
 type Props = {
18
-  defaultHomeRoute: string | null;
19
-  defaultHomeData: { [key: string]: string };
18
+  defaultHomeRoute?: string;
19
+  defaultHomeData?: { [key: string]: string };
20
 };
20
 };
21
 
21
 
22
 function MainApp(props: Props, ref?: Ref<NavigationContainerRef>) {
22
 function MainApp(props: Props, ref?: Ref<NavigationContainerRef>) {

Loading…
Cancel
Save