refactor: minor tweaks

example/StackNavigator.tsx

@@ -24,10 +24,13 @@ type Action =
 export type StackNavigationProp = NavigationProp<typeof StackRouter>;
 
 const StackRouter = {
-  getInitialState(
-    routeNames: string[],
-    { initialRouteName = routeNames[0] }: { initialRouteName?: string }
-  ) {
+  initial({
+    routeNames,
+    initialRouteName = routeNames[0],
+  }: {
+    routeNames: string[];
+    initialRouteName?: string;
+  }) {
     const index = routeNames.indexOf(initialRouteName);
 
     return {
@@ -88,10 +91,16 @@ export default function StackNavigator(props: Props) {
           key={route.key}
           style={{
             position: 'absolute',
-            top: i * 10,
+            margin: 20,
+            left: i * 20,
+            top: i * 20,
             padding: 10,
+            height: 480,
+            width: 320,
             backgroundColor: 'white',
-            border: '1px solid black',
+            borderRadius: 3,
+            boxShadow:
+              '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)',
           }}
         >
           {descriptors[route.key].render()}

example/TabNavigator.tsx

@@ -22,10 +22,13 @@ type Action = {
 export type TabNavigationProp = NavigationProp<typeof TabRouter>;
 
 const TabRouter = {
-  getInitialState(
-    routeNames: string[],
-    { initialRouteName = routeNames[0] }: { initialRouteName?: string }
-  ) {
+  initial({
+    routeNames,
+    initialRouteName = routeNames[0],
+  }: {
+    routeNames: string[];
+    initialRouteName?: string;
+  }) {
     const index = routeNames.indexOf(initialRouteName);
 
     return {
@@ -64,14 +67,15 @@ export default function TabNavigator(props: Props) {
   const { navigation, descriptors } = useNavigationBuilder(TabRouter, props);
 
   return (
-    <div style={{ display: 'flex', flexDirection: 'row' }}>
+    <div style={{ display: 'flex', flexDirection: 'row', height: '100%' }}>
       {navigation.state.routes.map((route, i, self) => (
         <div
           key={route.key}
           style={{
             width: `${100 / self.length}%`,
+            padding: 10,
+            borderRadius: 3,
             backgroundColor: i === navigation.state.index ? 'tomato' : 'white',
-            border: '1px solid black',
           }}
         >
           {descriptors[route.key].render()}

example/index.html

@@ -1,2 +1,34 @@
+<style type="text/css">
+  html {
+    box-sizing: border-box;
+  }
+
+  *,
+  *:before,
+  *:after {
+    box-sizing: inherit;
+  }
+
+  *:focus {
+    outline: none;
+  }
+
+  *:focus-visible {
+    outline: auto;
+  }
+
+  html,
+  body {
+    height: 100%;
+    width: 100%;
+  }
+
+  body {
+    font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-size: 14px;
+    line-height: 1.42857143;
+    background-color: #E2E1E0;
+  }
+</style>
 <div id="root"></div>
 <script src="./index.tsx"></script>

example/index.tsx

@@ -7,7 +7,7 @@ import TabNavigator, { TabNavigationProp } from './TabNavigator';
 
 const First = ({ navigation }: { navigation: StackNavigationProp }) => (
   <div>
-    <h1>First route</h1>
+    <h1>First</h1>
     <button type="button" onClick={() => navigation.push('second')}>
       Push second
     </button>
@@ -22,7 +22,7 @@ const First = ({ navigation }: { navigation: StackNavigationProp }) => (
 
 const Second = ({ navigation }: { navigation: StackNavigationProp }) => (
   <div>
-    <h1>Second route</h1>
+    <h1>Second</h1>
     <button type="button" onClick={() => navigation.push('first')}>
       Push first
     </button>
@@ -38,7 +38,7 @@ const Fourth = ({
   navigation: TabNavigationProp & StackNavigationProp;
 }) => (
   <div>
-    <h1>Fourth route</h1>
+    <h1>Fourth</h1>
     <button type="button" onClick={() => navigation.jumpTo('fifth')}>
       Jump to fifth
     </button>
@@ -57,7 +57,7 @@ const Fifth = ({
   navigation: TabNavigationProp & StackNavigationProp;
 }) => (
   <div>
-    <h1>Fifth route</h1>
+    <h1>Fifth</h1>
     <button type="button" onClick={() => navigation.jumpTo('fourth')}>
       Jump to fourth
     </button>