feat(react): Update React NativeScript app template (#182)

* feat(react): Update to latest dependencies, and improve starter template

* chore(react): Change version caret

* chore: Add "Screen" after the names of the screen-related functional components

* chore: Rename Second -> Secondary

Author: shirakaba

packages/template-blank-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nativescript/template-blank-react",
-  "version": "7.0.10",
+  "version": "7.0.11",
   "description": "Blank template for NativeScript apps using React.",
   "author": "Jamie Birch <[email protected]>",
   "main": "app.js",
@@ -33,8 +33,9 @@
     "@nativescript/core": "~7.1.0",
     "@react-navigation/core": "^5.13.2",
     "react": "^16.13.1",
-    "react-nativescript": "^2.1.0",
-    "react-nativescript-navigation": "^2.0.1"
+    "react-nativescript": "^2.2.0",
+    "react-nativescript-navigation": "^2.0.1",
+    "react-refresh": "^0.8.3"
   },
   "devDependencies": {
     "@babel/core": "^7.4.5",
@@ -45,8 +46,7 @@
     "babel-loader": "8.0.6",
     "fork-ts-checker-webpack-plugin": "^5.1.0",
     "patch-package": "^6.2.2",
-    "react-refresh": "^0.8.3",
-    "typescript": "^3.9.3"
+    "typescript": "~4.0.3"
   },
   "gitHead": "1350d382fb4b0ed4c6e9685df909518b2688e004",
   "readme": "NativeScript Application"

packages/template-blank-react/src/components/FirstScreen.tsx

@@ -0,0 +1,53 @@
+import * as React from "react";
+import { RouteProp } from '@react-navigation/core';
+import { Dialogs } from '@nativescript/core';
+import { FrameNavigationProp } from "react-nativescript-navigation";
+import { StyleSheet } from "react-nativescript";
+import { MainStackParamList } from "./NavigationParamList";
+
+type HomeScreenProps = {
+    route: RouteProp<MainStackParamList, "Home">,
+    navigation: FrameNavigationProp<MainStackParamList, "Home">,
+}
+
+export function HomeScreen({ navigation }: HomeScreenProps) {
+    return (
+        <flexboxLayout style={styles.container}>
+            <label
+                className="fas"
+                style={styles.text}
+            >
+                &#xf135; Hello World!
+            </label>
+            <button
+                style={styles.button}
+                onTap={() => Dialogs.alert("Tapped!")}
+            >
+                Tap me for an alert
+            </button>
+            <button
+                style={styles.button}
+                onTap={() => navigation.navigate('Secondary')}
+            >
+                Go to next screen
+            </button>
+        </flexboxLayout>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        height: "100%",
+        flexDirection: "column",
+        justifyContent: "center",
+    },
+    text: {
+        textAlignment: "center",
+        fontSize: 24,
+        color: "black",
+    },
+    button: {
+        fontSize: 24,
+        color: "#2e6ddf",
+    },
+});

packages/template-blank-react/src/components/HomeScreen.tsx

@@ -1,4 +1,4 @@
 export type MainStackParamList = {
-    first: {},
-    second: {},
+    Home: {},
+    Secondary: {},
 };

packages/template-blank-react/src/components/NavigationParamList.ts

@@ -1,21 +1,30 @@
 import * as React from "react";
 import { BaseNavigationContainer } from '@react-navigation/core';
 import { stackNavigatorFactory } from "react-nativescript-navigation";
-import { First } from "./FirstScreen";
-import { Second } from "./SecondScreen";
+import { HomeScreen } from "./HomeScreen";
+import { SecondaryScreen } from "./SecondaryScreen";
 
 const StackNavigator = stackNavigatorFactory();
 
 export const mainStackNavigator = () => (
     <BaseNavigationContainer>
         <StackNavigator.Navigator
-            initialRouteName="first"
+            initialRouteName="Home"
             screenOptions={{
+                headerStyle: {
+                    backgroundColor: "white",
+                },
                 headerShown: true,
             }}
         >
-            <StackNavigator.Screen name="first" component={First} />
-            <StackNavigator.Screen name="second" component={Second} />
+            <StackNavigator.Screen
+                name="Home"
+                component={HomeScreen}
+            />
+            <StackNavigator.Screen
+                name="Secondary"
+                component={SecondaryScreen}
+            />
         </StackNavigator.Navigator>
     </BaseNavigationContainer>
 );

packages/template-blank-react/src/components/Navigator.tsx

@@ -0,0 +1,44 @@
+import * as React from "react";
+import { RouteProp } from '@react-navigation/core';
+import { FrameNavigationProp } from "react-nativescript-navigation";
+import { MainStackParamList } from "./NavigationParamList";
+import { StyleSheet } from "react-nativescript";
+
+type SecondaryScreenProps = {
+    route: RouteProp<MainStackParamList, "Secondary">,
+    navigation: FrameNavigationProp<MainStackParamList, "Secondary">,
+}
+
+export function SecondaryScreen({ navigation }: SecondaryScreenProps) {
+    return (
+        <flexboxLayout style={styles.container}>
+            <label style={styles.text}>
+                You're viewing the secondary screen!
+            </label>
+            <button
+                style={styles.button}
+                onTap={() => navigation.goBack()}
+            >
+                Go back
+            </button>
+        </flexboxLayout>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        height: "100%",
+        flexDirection: "column",
+        justifyContent: "center",
+        backgroundColor: "yellow",
+    },
+    text: {
+        textAlignment: "center",
+        fontSize: 24,
+        color: "black",
+    },
+    button: {
+        fontSize: 24,
+        color: "#2e6ddf",
+    },
+});