Browse Source

Fix tab navigator render loop

Arnaud Vergnet 2 years ago
parent
commit
9e6fee467f

+ 4
- 4
App.tsx View File

@@ -53,9 +53,9 @@ type StateType = {
53 53
 export default class App extends React.Component<{}, StateType> {
54 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 60
   urlHandler: URLHandler;
61 61
 
@@ -67,8 +67,8 @@ export default class App extends React.Component<{}, StateType> {
67 67
     };
68 68
     initLocales();
69 69
     this.navigatorRef = React.createRef();
70
-    this.defaultHomeRoute = null;
71
-    this.defaultHomeData = {};
70
+    this.defaultHomeRoute = undefined;
71
+    this.defaultHomeData = undefined;
72 72
     this.urlHandler = new URLHandler(this.onInitialURLParsed, this.onDetectURL);
73 73
     this.urlHandler.listen();
74 74
     setSafeBounceHeight(Platform.OS === 'ios' ? 100 : 20);

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

@@ -313,18 +313,25 @@ function MainStackComponent(props: {
313 313
 }
314 314
 
315 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 321
   const { preferences } = usePreferences();
322 322
   const showIntro = getPreferenceBool(PreferenceKeys.showIntro, preferences);
323
-
323
+  const createTabNavigator = () => <TabNavigator {...props} />;
324 324
   return (
325 325
     <MainStackComponent
326 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,8 +136,8 @@ function PlanningStackComponent() {
136 136
 const HomeStack = createStackNavigator();
137 137
 
138 138
 function HomeStackComponent(
139
-  initialRoute: string | null,
140
-  defaultData: { [key: string]: string }
139
+  initialRoute?: string,
140
+  defaultData?: { [key: string]: string }
141 141
 ) {
142 142
   let params;
143 143
   if (initialRoute) {
@@ -232,8 +232,8 @@ function PlanexStackComponent() {
232 232
 const Tab = createBottomTabNavigator<TabStackParamsList>();
233 233
 
234 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 239
 const ICONS: {
@@ -264,7 +264,7 @@ const ICONS: {
264 264
   },
265 265
 };
266 266
 
267
-export default function TabNavigator(props: PropsType) {
267
+function TabNavigator(props: PropsType) {
268 268
   const { preferences } = usePreferences();
269 269
   let defaultRoute = getPreferenceString(
270 270
     PreferenceKeys.defaultStartScreen,
@@ -324,6 +324,13 @@ export default function TabNavigator(props: PropsType) {
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 334
 export enum TabRoutes {
328 335
   Services = 'services',
329 336
   Proxiwash = 'proxiwash',

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

@@ -139,9 +139,6 @@ const generateNewsFeed = (rawFeed: RawNewsFeedType): Array<FeedItemType> => {
139 139
   return finalFeed;
140 140
 };
141 141
 
142
-/**
143
- * Class defining the app's home screen
144
- */
145 142
 function HomeScreen(props: Props) {
146 143
   const theme = useTheme();
147 144
   const navigation = useNavigation();

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

@@ -15,8 +15,8 @@ import { CustomDarkTheme, CustomWhiteTheme } from '../utils/Themes';
15 15
 import { setupStatusBar } from '../utils/Utils';
16 16
 
17 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 22
 function MainApp(props: Props, ref?: Ref<NavigationContainerRef>) {

Loading…
Cancel
Save