@nativescript/template-blank-react-vision 8.6.0 → 8.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nativescript/template-blank-react-vision",
-  "version": "8.6.0",
+  "version": "8.6.1",
   "description": "Nativescript visionOS Starter with React",
   "author": "Jamie Birch <14055146+shirakaba@users.noreply.github.com>",
   "main": "src/app.ts",

package/src/components/ScreenOne.tsx

@@ -1,7 +1,6 @@
 import { Dialogs } from '@nativescript/core';
 import { RouteProp } from '@react-navigation/core';
 import * as React from "react";
-import { StyleSheet } from "react-nativescript";
 import { FrameNavigationProp } from "react-nativescript-navigation";
 
 import { MainStackParamList } from "../NavigationParamList";
@@ -13,42 +12,30 @@ type ScreenOneProps = {
 
 export function ScreenOne({ navigation }: ScreenOneProps) {
     return (
-        <flexboxLayout style={styles.container}>
+        <gridLayout rows="*,auto,auto,*,auto,100">
             <label
-                className="fas"
-                style={styles.text}
+                row="1"
+                className="fas text-3xl text-center leading-8"
+                height="40"
             >
                 &#xf135; You're viewing screen one!
             </label>
             <button
-                style={styles.button}
+                row="2"
+                className="ronded-full text-3xl p-5 my-5" 
+                width="300"
                 onTap={() => Dialogs.alert("Tapped!")}
             >
                 Tap me for an alert
             </button>
             <button
-                style={styles.button}
+                row="4"
+                className="ronded-full text-2xl p-5" 
+                width="300"
                 onTap={() => navigation.navigate("Two", { message: "Hello, world!" })}
             >
                 Go to next screen
             </button>
-        </flexboxLayout>
+        </gridLayout>
     );
 }
-
-const styles = StyleSheet.create({
-    container: {
-        height: "100%",
-        flexDirection: "column",
-        justifyContent: "center",
-    },
-    text: {
-        textAlignment: "center",
-        fontSize: 24,
-        color: "black",
-    },
-    button: {
-        fontSize: 24,
-        color: "#2e6ddf",
-    },
-});

package/src/components/ScreenTwo.tsx

@@ -1,6 +1,5 @@
 import { RouteProp } from '@react-navigation/core';
 import * as React from "react";
-import { StyleSheet } from "react-nativescript";
 import { FrameNavigationProp } from "react-nativescript-navigation";
 
 import { MainStackParamList } from "../NavigationParamList";
@@ -12,37 +11,21 @@ type ScreenTwoProps = {
 
 export function ScreenTwo({ navigation, route }: ScreenTwoProps) {
     return (
-        <flexboxLayout style={styles.container}>
-            <label style={styles.text}>
+        <gridLayout rows="*,auto,auto,*,auto,100">
+            <label row="1" className="text-3xl text-center">
                 You're viewing screen two!
             </label>
-            <label style={styles.text}>
+            <label row="2" className="text-3xl text-center my-5">
                 Message: {route.params.message}
             </label>
             <button
-                style={styles.button}
+                row="4"
+                className="ronded-full text-2xl p-5"
+                width="300"
                 onTap={() => navigation.goBack()}
             >
                 Go back
             </button>
-        </flexboxLayout>
+        </gridLayout>
     );
 }
-
-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",
-    },
-});