From 9e6fee467fddf642e6056e3ad13a657290c74867 Mon Sep 17 00:00:00 2001 From: Arnaud Vergnet Date: Wed, 19 May 2021 09:47:36 +0200 Subject: [PATCH] Fix tab navigator render loop --- App.tsx | 8 ++++---- src/navigation/MainNavigator.tsx | 17 ++++++++++++----- src/navigation/TabNavigator.tsx | 17 ++++++++++++----- src/screens/Home/HomeScreen.tsx | 3 --- src/screens/MainApp.tsx | 4 ++-- 5 files changed, 30 insertions(+), 19 deletions(-) diff --git a/App.tsx b/App.tsx index 2bafdfc..92ac750 100644 --- a/App.tsx +++ b/App.tsx @@ -53,9 +53,9 @@ type StateType = { export default class App extends React.Component<{}, StateType> { navigatorRef: { current: null | NavigationContainerRef }; - defaultHomeRoute: string | null; + defaultHomeRoute: string | undefined; - defaultHomeData: { [key: string]: string }; + defaultHomeData: { [key: string]: string } | undefined; urlHandler: URLHandler; @@ -67,8 +67,8 @@ export default class App extends React.Component<{}, StateType> { }; initLocales(); this.navigatorRef = React.createRef(); - this.defaultHomeRoute = null; - this.defaultHomeData = {}; + this.defaultHomeRoute = undefined; + this.defaultHomeData = undefined; this.urlHandler = new URLHandler(this.onInitialURLParsed, this.onDetectURL); this.urlHandler.listen(); setSafeBounceHeight(Platform.OS === 'ios' ? 100 : 20); diff --git a/src/navigation/MainNavigator.tsx b/src/navigation/MainNavigator.tsx index 8059edd..f3c7394 100644 --- a/src/navigation/MainNavigator.tsx +++ b/src/navigation/MainNavigator.tsx @@ -313,18 +313,25 @@ function MainStackComponent(props: { } type PropsType = { - defaultHomeRoute: string | null; - defaultHomeData: { [key: string]: string }; + defaultHomeRoute?: string; + defaultHomeData?: { [key: string]: string }; }; -export default function MainNavigator(props: PropsType) { +function MainNavigator(props: PropsType) { const { preferences } = usePreferences(); const showIntro = getPreferenceBool(PreferenceKeys.showIntro, preferences); - + const createTabNavigator = () => ; return ( } + createTabNavigator={createTabNavigator} /> ); } + +export default React.memo( + MainNavigator, + (pp: PropsType, np: PropsType) => + pp.defaultHomeRoute === np.defaultHomeRoute && + pp.defaultHomeData === np.defaultHomeData +); diff --git a/src/navigation/TabNavigator.tsx b/src/navigation/TabNavigator.tsx index cd46841..3457171 100644 --- a/src/navigation/TabNavigator.tsx +++ b/src/navigation/TabNavigator.tsx @@ -136,8 +136,8 @@ function PlanningStackComponent() { const HomeStack = createStackNavigator(); function HomeStackComponent( - initialRoute: string | null, - defaultData: { [key: string]: string } + initialRoute?: string, + defaultData?: { [key: string]: string } ) { let params; if (initialRoute) { @@ -232,8 +232,8 @@ function PlanexStackComponent() { const Tab = createBottomTabNavigator(); type PropsType = { - defaultHomeRoute: string | null; - defaultHomeData: { [key: string]: string }; + defaultHomeRoute?: string; + defaultHomeData?: { [key: string]: string }; }; const ICONS: { @@ -264,7 +264,7 @@ const ICONS: { }, }; -export default function TabNavigator(props: PropsType) { +function TabNavigator(props: PropsType) { const { preferences } = usePreferences(); let defaultRoute = getPreferenceString( PreferenceKeys.defaultStartScreen, @@ -324,6 +324,13 @@ export default function TabNavigator(props: PropsType) { ); } +export default React.memo( + TabNavigator, + (pp: PropsType, np: PropsType) => + pp.defaultHomeRoute === np.defaultHomeRoute && + pp.defaultHomeData === np.defaultHomeData +); + export enum TabRoutes { Services = 'services', Proxiwash = 'proxiwash', diff --git a/src/screens/Home/HomeScreen.tsx b/src/screens/Home/HomeScreen.tsx index 9268723..e14cb9d 100644 --- a/src/screens/Home/HomeScreen.tsx +++ b/src/screens/Home/HomeScreen.tsx @@ -139,9 +139,6 @@ const generateNewsFeed = (rawFeed: RawNewsFeedType): Array => { return finalFeed; }; -/** - * Class defining the app's home screen - */ function HomeScreen(props: Props) { const theme = useTheme(); const navigation = useNavigation(); diff --git a/src/screens/MainApp.tsx b/src/screens/MainApp.tsx index 6002b86..2807a04 100644 --- a/src/screens/MainApp.tsx +++ b/src/screens/MainApp.tsx @@ -15,8 +15,8 @@ import { CustomDarkTheme, CustomWhiteTheme } from '../utils/Themes'; import { setupStatusBar } from '../utils/Utils'; type Props = { - defaultHomeRoute: string | null; - defaultHomeData: { [key: string]: string }; + defaultHomeRoute?: string; + defaultHomeData?: { [key: string]: string }; }; function MainApp(props: Props, ref?: Ref) {