Using Templates
You can create your screens and components with your defined templates by following these steps:
First thing to do is to create a
.template
folder at the root of your react project.Inside the
.template
folder you can add your template, for examplecomponentWithUseEffect.tsx
(the file extension doesn't matter so it could be*.jsx
,*.js
or*.tsx
):
import React, { useEffect } from "react";
import { View, Text } from "react-native";
export default function __COMPONENT__() {
useEffect(() => {}, []);
return (
<View>
<Text>Hello, World!</Text>
</View>
);
}
There is a restriction in naming these templates which is you should not put dots (
.
) between the name, like this (component.WithUseEffect.jsx
). It should only contain one dot that makes the extension file like we're doing above.You should type
__COMPONENT__
in the template file and it will be replaced with the component name you want to create.
- After creating your template you can use them to create components or screens as the following:
rnhc create -c <component-name> -t <template-name>
rnhc create -s <screen-name> -t <template-name>
- And of course, you can create multiple components or screens with the same template.
Example
As for our example it can be used like this for the above template:
rnhc create -c comp -t componentWithUseEffect
This will create
comp
component undersrc/components/
folder and theindex.jsx
for this component will contain the same code written in the template.For the screen case, the
index.jsx
for that screen will contain the code written in the template.