Merge pull request #123 from simpleweb/navigation-fixes

Updates to react-navigation changes

Author: craigcoles

generators/base/templates/@types/index.d.ts

@@ -1,3 +1,10 @@
 interface ReducerAction {
   type: string;
 }
+
+type RootStackParamList = {
+  Main: undefined;
+  Styleguide: undefined;
+};
+
+type Environment = "development" | "staging" | "edge" | "production" | "live";

generators/base/templates/App/Components/App/index.tsx

@@ -2,10 +2,12 @@ import React from "react";
 import { ENV } from "<%= name %>/App/Config";
 import Environment from "<%= name %>/App/Components/Utilities/Environment";
 
+const environment = ENV as Environment;
+
 const App: React.FC = ({ children }) => (
   <React.Fragment>
     {children}
-    <Environment env={ENV} />
+    <Environment env={environment} />
   </React.Fragment>
 );
 

generators/base/templates/App/Router.tsx

@@ -4,7 +4,7 @@ import { createStackNavigator } from "@react-navigation/stack";
 
 import Screens from "<%= name %>/App/Screens";
 
-const Stack = createStackNavigator();
+const Stack = createStackNavigator<RootStackParamList>();
 
 function RootStack() {
   return (

generators/base/templates/App/Screens/Main.tsx

@@ -1,13 +1,19 @@
 import React from 'react';
-import { NavigationStackScreenComponent } from "react-navigation-stack";
+import { StackNavigationProp } from '@react-navigation/stack';
 <% if (i18nSupport) { -%>
 import { t } from "<%= name %>/App/Helpers/Translations";
 <% } -%>
 import Layout from '<%= name %>/App/Components/Layout';
 import Button from '<%= name %>/App/Components/Button';
 import Text from '<%= name %>/App/Components/Text';
 
-const Main: NavigationStackScreenComponent = ({ navigation }) => {
+type MainScreenNavigationProp = StackNavigationProp<RootStackParamList, "Main">;
+
+type Props = {
+  navigation: MainScreenNavigationProp;
+};
+
+const Main: React.FC<Props> = ({ navigation }) => {
   return (
     <Layout.Center>
       <% if (i18nSupport) { -%>

generators/base/templates/App/Screens/Styleguide.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { Alert } from "react-native";
 import { useSelector, useDispatch } from "react-redux";
+import { StackNavigationProp } from "@react-navigation/stack";
 import styled from "styled-components/native";
 import Button from "<%= name %>/App/Components/Button";
 import Layout from "<%= name %>/App/Components/Layout";
@@ -12,7 +13,16 @@ interface RootState {
   };
 }
 
-const Styleguide: React.FC = () => {
+type StyleguideScreenNavigationProp = StackNavigationProp<
+  RootStackParamList,
+  "Styleguide"
+>;
+
+type Props = {
+  navigation: StyleguideScreenNavigationProp;
+};
+
+const Styleguide: React.FC<Props> = () => {
   const dispatch = useDispatch();
   const installed = useSelector((state: RootState) => state.app.installed);
   const requestExample = React.useCallback(

generators/screen/templates/index.tsx

@@ -1,9 +1,18 @@
 import React from "react";
-import { NavigationStackScreenComponent } from "react-navigation-stack";
+import { StackNavigationProp } from "@react-navigation/stack";
 import Layout from "<%= name %>/App/Components/Layout";
 import Text from "<%= name %>/App/Components/Text";
 
-const <%= screen %>: NavigationStackScreenComponent = ({ navigation }) => {
+type <%= screen %>ScreenNavigationProp = StackNavigationProp<
+  RootStackParamList,
+  "<%= screen %>"
+>;
+
+type Props = {
+  navigation: <%= screen %>ScreenNavigationProp;
+};
+
+const <%= screen %>: React.FC<Props> = ({ navigation }) => {
   return (
     <Layout.Center>
       <Text><%= screen %></Text>