From 00fdd133564060c86ed483dda09538af5d79ee2d Mon Sep 17 00:00:00 2001
From: "satyajit.happy" <satyajit.happy@gmail.com>
Date: Sun, 9 Jun 2019 20:30:51 +0200
Subject: [PATCH] docs: add info about how initial state is handled

---
 README.md                    | 8 ++++++--
 example/StackNavigator.tsx   | 4 ++--
 example/TabNavigator.tsx     | 2 +-
 example/index.tsx            | 2 +-
 src/NavigationContainer.tsx  | 3 ---
 src/types.tsx                | 2 +-
 src/useNavigationBuilder.tsx | 9 ++++-----
 7 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/README.md b/README.md
index 7293c1c7..e3b70db7 100644
--- a/README.md
+++ b/README.md
@@ -84,6 +84,10 @@ function App() {
 
 Navigators need to have `Screen` components as their direct children. These components don't do anything by themselves, but the navigator can extract information from these and determine what to render. Implementation-wise, we'll use `React.Children` API for this purpose.
 
-## TODO
+## Initial state
 
-...
+In the current implementation of React Navigation, the initial state is extracted from the navigator definitions. This is possible because they are defined statically. In our case, it's not possible because the screens are rendered dynamically.
+
+Turns out we don't really need the initial state in the `NavigationContainer`. This state is the default state, so we can store `undefined` instead, and let the navigators initialize their initial state themselves. Next time an action modifies the state, we update the value in the container.
+
+If an initial state is specified, e.g. as a result of `Linking.getInitialURL()`, the child navigators will use that state, instead of having to initialize it themselves.
diff --git a/example/StackNavigator.tsx b/example/StackNavigator.tsx
index fd04a140..fe260aa2 100644
--- a/example/StackNavigator.tsx
+++ b/example/StackNavigator.tsx
@@ -49,7 +49,7 @@ const StackRouter = {
             ...state.routes,
             {
               name: action.payload.name,
-              key: `${name}-${shortid()}`,
+              key: `${action.payload.name}-${shortid()}`,
             },
           ],
         };
@@ -94,7 +94,7 @@ export default function StackNavigator(props: Props) {
             border: '1px solid black',
           }}
         >
-          {descriptors[route.name].render()}
+          {descriptors[route.key].render()}
         </div>
       ))}
     </div>
diff --git a/example/TabNavigator.tsx b/example/TabNavigator.tsx
index 2d1c26ee..206cfd76 100644
--- a/example/TabNavigator.tsx
+++ b/example/TabNavigator.tsx
@@ -74,7 +74,7 @@ export default function TabNavigator(props: Props) {
             border: '1px solid black',
           }}
         >
-          {descriptors[route.name].render()}
+          {descriptors[route.key].render()}
         </div>
       ))}
     </div>
diff --git a/example/index.tsx b/example/index.tsx
index 610bd40b..1465cf86 100644
--- a/example/index.tsx
+++ b/example/index.tsx
@@ -93,7 +93,7 @@ function App() {
         <Screen name="second" component={Second} />
         <Screen name="third">
           {props => (
-            <TabNavigator {...props}>
+            <TabNavigator {...props} initialRouteName="fifth">
               <Screen name="fourth" component={Fourth} />
               <Screen name="fifth" component={Fifth} />
             </TabNavigator>
diff --git a/src/NavigationContainer.tsx b/src/NavigationContainer.tsx
index 40c14b59..24fa5eb2 100644
--- a/src/NavigationContainer.tsx
+++ b/src/NavigationContainer.tsx
@@ -25,9 +25,6 @@ export default function NavigationContainer({ initialState, children }: Props) {
   const [state, setState] = React.useState<NavigationState | undefined>(
     initialState
   );
-
-  console.log(state);
-
   const value = React.useMemo(() => ({ state, setState }), [state, setState]);
 
   return (
diff --git a/src/types.tsx b/src/types.tsx
index 3c6fd98f..9f23ef98 100644
--- a/src/types.tsx
+++ b/src/types.tsx
@@ -1,6 +1,6 @@
 export type NavigationState = {
   index: number;
-  routes: Array<Route | Route & NavigationState>;
+  routes: Array<Route & { state?: NavigationState }>;
 };
 
 export type Route = {
diff --git a/src/useNavigationBuilder.tsx b/src/useNavigationBuilder.tsx
index 57c05869..8134ba98 100644
--- a/src/useNavigationBuilder.tsx
+++ b/src/useNavigationBuilder.tsx
@@ -69,17 +69,16 @@ export default function useNavigationBuilder(router: Router, options: Options) {
         state: route,
       };
 
-      acc[route.name] = {
+      acc[route.key] = {
         render: () => (
           <NavigationContext.Provider
             value={{
-              state: 'routes' in route && 'index' in route ? route : undefined,
-              setState: s =>
+              state: route.state,
+              setState: child =>
                 setState({
                   ...state,
-                  // @ts-ignore
                   routes: state.routes.map(r =>
-                    r === route ? { ...route, ...s } : r
+                    r === route ? { ...route, state: child } : r
                   ),
                 }),
             }}