fix: use route keys instead of index for lazy load

react-navigation · Oct 7, 2020 · c49dab3 · c49dab3
1 parent 16e7ac1
commit c49dab3
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 11 deletions.
diff --git a/packages/bottom-tabs/src/views/BottomTabView.tsx b/packages/bottom-tabs/src/views/BottomTabView.tsx
@@ -25,7 +25,7 @@ type Props = BottomTabNavigationConfig & {
 };
 
 type State = {
-  loaded: number[];
+  loaded: string[];
 };
 
 function SceneContent({
@@ -54,18 +54,18 @@ export default class BottomTabView extends React.Component<Props, State> {
   };
 
   static getDerivedStateFromProps(nextProps: Props, prevState: State) {
-    const { index } = nextProps.state;
+    const focusedRouteKey = nextProps.state.routes[nextProps.state.index].key;
 
     return {
       // Set the current tab to be loaded if it was not loaded before
-      loaded: prevState.loaded.includes(index)
+      loaded: prevState.loaded.includes(focusedRouteKey)
         ? prevState.loaded
-        : [...prevState.loaded, index],
+        : [...prevState.loaded, focusedRouteKey],
     };
   }
 
-  state = {
-    loaded: [this.props.state.index],
+  state: State = {
+    loaded: [this.props.state.routes[this.props.state.index].key],
   };
 
   private renderTabBar = () => {
@@ -103,7 +103,7 @@ export default class BottomTabView extends React.Component<Props, State> {
                   return null;
                 }
 
-                if (lazy && !loaded.includes(index) && !isFocused) {
+                if (lazy && !loaded.includes(route.key) && !isFocused) {
                   // Don't render a screen if we've never navigated to it
                   return null;
                 }

diff --git a/packages/drawer/src/views/DrawerView.tsx b/packages/drawer/src/views/DrawerView.tsx
@@ -83,7 +83,7 @@ export default function DrawerView({
   minSwipeDistance,
   sceneContainerStyle,
 }: Props) {
-  const [loaded, setLoaded] = React.useState([state.index]);
+  const [loaded, setLoaded] = React.useState([state.routes[state.index].key]);
   const dimensions = useWindowDimensions();
 
   const { colors } = useTheme();
@@ -129,8 +129,10 @@ export default function DrawerView({
     return () => subscription?.remove();
   }, [handleDrawerClose, isDrawerOpen, navigation, state.key]);
 
-  if (!loaded.includes(state.index)) {
-    setLoaded([...loaded, state.index]);
+  const focusedRouteKey = state.routes[state.index].key;
+
+  if (!loaded.includes(focusedRouteKey)) {
+    setLoaded([...loaded, focusedRouteKey]);
   }
 
   const renderNavigationView = ({ progress }: any) => {
@@ -159,7 +161,7 @@ export default function DrawerView({
             return null;
           }
 
-          if (lazy && !loaded.includes(index) && !isFocused) {
+          if (lazy && !loaded.includes(route.key) && !isFocused) {
             // Don't render a screen if we've never navigated to it
             return null;
           }