fix(expo): Rolls back to react-native-screens JS version for Expo (#332 by @harrisrobin)

Author: harrisrobin

…ate/app/navigation/primary-navigator.tsx …app/navigation/primary-navigator.tsx.ejsboilerplate/app/navigation/primary-navigator.tsx renamed to boilerplate/app/navigation/primary-navigator.tsx.ejs boilerplate/app/navigation/primary-navigator.tsx renamed to boilerplate/app/navigation/primary-navigator.tsx.ejs

@@ -1,9 +1,17 @@
 import React from "react"
+<% if (props.useExpo) { -%>
+import { createStackNavigator } from "@react-navigation/stack"
+<% } else { -%>  
 import { createNativeStackNavigator } from "react-native-screens/native-stack"
+<% } -%>
 import { WelcomeScreen, DemoScreen } from "../screens"
 import { PrimaryParamList } from "./types"
 
+<% if (props.useExpo) { -%>
+const Stack = createStackNavigator<PrimaryParamList>()
+<% } else { -%>  
 const Stack = createNativeStackNavigator<PrimaryParamList>()
+<% } -%>
 
 export function PrimaryNavigator() {
   return (

…rplate/app/navigation/root-navigator.tsx …te/app/navigation/root-navigator.tsx.ejsboilerplate/app/navigation/root-navigator.tsx renamed to boilerplate/app/navigation/root-navigator.tsx.ejs boilerplate/app/navigation/root-navigator.tsx renamed to boilerplate/app/navigation/root-navigator.tsx.ejs

@@ -1,19 +1,29 @@
 import React from "react"
 import { NavigationContainer, NavigationContainerRef } from "@react-navigation/native"
+<% if (props.useExpo) { -%>
+import { createStackNavigator } from "@react-navigation/stack"
+<% } else { -%>  
 import { createNativeStackNavigator } from "react-native-screens/native-stack"
-
+<% } -%>
 import { RootParamList } from "./types"
 import { PrimaryNavigator } from "./primary-navigator"
 
+<% if (props.useExpo) { -%>
+const Stack = createStackNavigator<RootParamList>()
+<% } else { -%>  
 const Stack = createNativeStackNavigator<RootParamList>()
+<% } -%>
+
 
 const RootStack = () => {
   return (
     <Stack.Navigator
       screenOptions={{
         headerShown: false,
         gestureEnabled: true,
+        <% if(!props.useExpo){ %>
         stackPresentation: "modal",
+        <% } -%>
       }}
     >
       <Stack.Screen

boilerplate/package.json.ejs

@@ -40,18 +40,20 @@
     "react-native-splash-screen": "3.2.0",
     "reactotron-mst": "^3.1.1",
     "reactotron-react-native": "^4.0.0-beta.1",
-
+    "react-native-screens": "^2.5.0",
     "react-native-safe-area-context": "0.7.3",
-<% if (!props.useExpo) { -%>
-      "@react-native-community/async-storage": "^1.5.1",
-      "@react-native-community/masked-view": "0.1.5",
-      "react-native-safe-area-view": "1.0.0",
-      "react-native-gesture-handler": "<%= props.reactNativeGestureHandlerVersion %>",
-      "react-native-localize": "^1.0.0",
-      "react-native-screens": "^2.4.0",
-      "react-native-keychain": "5.0.1",
-      "@react-navigation/native": "^5.0.0",
-<% } -%>
+    "@react-navigation/native": "^5.1.5",
+  <% if(props.useExpo){ %>
+    "@react-navigation/stack": "^5.2.10",
+  <% } else { -%>  
+    "@react-native-community/async-storage": "^1.5.1",
+    "@react-native-community/masked-view": "0.1.5",
+    "react-native-safe-area-view": "1.0.0",
+    "react-native-gesture-handler": "<%= props.reactNativeGestureHandlerVersion %>",
+    "react-native-localize": "^1.0.0",
+    "react-native-keychain": "5.0.1",
+    "@react-native-community/async-storage": "^1.9.0",
+  <% } -%>
     "validate.js": "0.13.1"
   },
   "devDependencies": {

boilerplate/storybook/storybook.tsx.ejs

@@ -14,7 +14,11 @@ const StorybookUI = getStorybookUI({
   port: 9001,
   host: "localhost",
   onDeviceUI: true,
+<% if (props.useExpo) { -%>
+  asyncStorage: require("react-native").AsyncStorage,
+<% } else { -%>  
   asyncStorage: require("@react-native-community/async-storage").default
+<% } -%>
 })
 
 export const StorybookUIRoot: React.FunctionComponent = () => {

src/boilerplate.ts

@@ -198,6 +198,14 @@ export const install = async (toolbox: IgniteToolbox) => {
       template: "app/screens/demo-screen/demo-screen.tsx.ejs",
       target: "app/screens/demo-screen/demo-screen.tsx",
     },
+    {
+      template: "app/navigation/root-navigator.tsx.ejs",
+      target: "app/navigation/root-navigator.tsx",
+    },
+    {
+      template: "app/navigation/primary-navigator.tsx.ejs",
+      target: "app/navigation/primary-navigator.tsx",
+    },
     { template: "storybook/storybook.tsx.ejs", target: "storybook/storybook.tsx" },
     { template: "bin/postInstall", target: "bin/postInstall" },
   ]