Merge pull request #166 from simpleweb/feature/update-screen-command

Feature: Update the screen command

Author: craigcoles

.changeset/nice-drinks-jog.md

@@ -0,0 +1,5 @@
+---
+"romulus-cli": minor
+---
+
+Update the screen command

README.md

@@ -127,10 +127,11 @@ App/
 │   ├── Text/
 │   │   ├── index.tsx
 │   │   └── styles.ts
-│   └── Utilities/
-│       └── Environment/
-│           ├── index.tsx
-│           └── styles.ts
+│   ├── Utilities/
+│   │   └── Environment/
+│   │       ├── index.tsx
+│   │       └── styles.ts
+│   └── Router.tsx
 ├── Config/
 │   ├── Locales/
 │   │   └── en.json
@@ -162,7 +163,6 @@ App/
 ├── Theme/
 │   └── index.js
 ├── index.tsx
-├── Router.ts
 └── Theme.ts
 ```
 

docs/commands.md

@@ -145,16 +145,25 @@ You should then import this screen into `App/Screens/index.ts` so it can be
 easily added to the router.
 
 ```js
+import { Box } from "@mobily/stacks";
 import React from "react";
-import { NavigationStackScreenComponent } from "react-navigation-stack";
-import Layout from "Remulus/App/Components/Layout";
-import Text from "Remulus/App/Components/Text";
+import { StackNavigationProp } from "@react-navigation/stack";
+import Text from "MyApp/App/Components/Text";
 
-const Home: NavigationStackScreenComponent = ({ navigation }) => {
+type HomeScreenNavigationProp = StackNavigationProp<
+  RootStackParamList,
+  "Home"
+>;
+
+type Props = {
+  navigation: HomeScreenNavigationProp;
+};
+
+function Home({ navigation }: Props) {
   return (
-    <Layout.Center>
+    <Box flex="fluid" alignX="center" alignY="center">
       <Text>Home</Text>
-    </Layout.Center>
+    </Box>
   );
 };
 

generators/screen/templates/index.tsx

@@ -1,6 +1,6 @@
+import { Box } from "@mobily/stacks";
 import React from "react";
 import { StackNavigationProp } from "@react-navigation/stack";
-import Layout from "<%= name %>/App/Components/Layout";
 import Text from "<%= name %>/App/Components/Text";
 
 type <%= screen %>ScreenNavigationProp = StackNavigationProp<
@@ -12,11 +12,11 @@ type Props = {
   navigation: <%= screen %>ScreenNavigationProp;
 };
 
-const <%= screen %>: React.FC<Props> = ({ navigation }) => {
+function <%= screen %>({ navigation }: Props) {
   return (
-    <Layout.Center>
+    <Box flex="fluid" alignX="center" alignY="center">
       <Text><%= screen %></Text>
-    </Layout.Center>
+    </Box>
   );
 }