Create Screens

Create a Screen

• To create your screen simply run:

rnhc create -s <screen-name>

• This will create a screen after the given name screen-name under the src/screens/ folder.

Example

rnhc create -s testScreen

• This will create the following:

JavaScript

src/
└── screens
    └── test-screen
        ├── __tests__
        │   └── index.spec.jsx
        ├── functions
        │   └── index.js
        ├── index.jsx
        └── styles.js

TypeScript

src/
└── screens
    └── test-screen
        ├── __tests__
        │   └── index.spec.tsx
        ├── functions
        │   └── index.ts
        ├── index.tsx
        └── styles.ts

• Where index.* represent the screen which is nothing but a React FC component that contains the following:

JavaScript

import { Text, View } from "react-native";
import {} from "./functions";
import { TestScreenStyles } from "./styles";

const TestScreenScreen = () => {
  return (
    <View>
      <Text>TestScreen screen created!</Text>
    </View>
  );
};
export default TestScreenScreen;

TypeScript

import { FC } from "react";
import { Text, View } from "react-native";
import {} from "./functions";
import { TestScreenStyles } from "./styles";

interface TestScreenScreenProps {}

const TestScreenScreen: FC<TestScreenScreenProps> = ({}) => {
  return (
    <View>
      <Text>TestScreen screen created!</Text>
    </View>
  );
};
export default TestScreenScreen;

• As for styles.* you will find:

JavaScript

import { StyleSheet } from "react-native";

export const TestScreenStyles = StyleSheet.create({});

TypeScript

import { StyleSheet } from "react-native";

export const TestScreenStyles = StyleSheet.create({});

• And index.spec.* will contain:

JavaScript

import "react-native";

import React from "react";
import TestScreenScreen from "..";
import renderer from "react-test-renderer";

it("renders correctly", () => {
  renderer.create(<TestScreenScreen />);
});

TypeScript

import "react-native";

import TestScreenScreen from "../";
import React from "react";
import renderer from "react-test-renderer";

it("renders correctly", () => {
  renderer.create(<TestScreenScreen />);
});

• And under the functions folder you should write your screen's functions and export them in function/index.* file, which by default it will contain the following:

JavaScript

// write your TestScreen screen functions here

TypeScript

// write your TestScreen screen functions here
export {};

Create multiple Screens

• To create multiple screens simply run:

rnhc create -s <screen-name-1> <screen-name-2> ...

• This will create multiple screens under the src/screens/ folder.

Example

rnhc create -s screen-1 screen-2

• This will create the following:

JavaScript

src/
└── screens
    ├── screen-1
    │   ├── __tests__
    │   │   └── index.spec.jsx
    │   ├── functions
    │   │   └── index.js
    │   ├── index.jsx
    │   └── styles.js
    └── screen-2
        ├── __tests__
        │   └── index.spec.jsx
        ├── functions
        │   └── index.js
        ├── index.jsx
        └── styles.js

TypeScript

src/
└── screens
    ├── screen-1
    │   ├── __tests__
    │   │   └── index.spec.tsx
    │   ├── functions
    │   │   └── index.ts
    │   ├── index.tsx
    │   └── styles.ts
    └── screen-2
        ├── __tests__
        │   └── index.spec.tsx
        ├── functions
        │   └── index.ts
        ├── index.tsx
        └── styles.ts

Create Screens in a Specific Folder

• To create one or multiple screens in a specific path that resides under src/screens/ folder, simply run:

rnhc create -s <screen-name-1> <screen-name-2> ... -f <folder-path>

• This will create your screens under the src/screens/<folder-path> folder.

Example

rnhc create -s screen-1 screen-2 -f foo/bar

• This will create the following:

JavaScript

src/
└── screens
    └── foo
        └── bar
            ├── screen-1
            │   ├── __tests__
            │   │   └── index.spec.jsx
            │   ├── functions
            │   │   └── index.js
            │   ├── index.jsx
            │   └── styles.js
            └── screen-2
                ├── __tests__
                │   └── index.spec.jsx
                ├── functions
                │   └── index.js
                ├── index.jsx
                └── styles.js

TypeScript

src/
└── screens
    └── foo
        └── bar
            ├── screen-1
            │   ├── __tests__
            │   │   └── index.spec.tsx
            │   ├── functions
            │   │   └── index.ts
            │   ├── index.tsx
            │   └── styles.ts
            └── screen-2
                ├── __tests__
                │   └── index.spec.tsx
                ├── functions
                │   └── index.ts
                ├── index.tsx
                └── styles.ts