Rnerator NPM | npm.io

RNERATOR

Generator of component for React Native. also provides a sandbox environment for the component dev.

⚠️ The project is really new so the API could have breaking change in a near future

Set Up

Installation

First you need to install the package.

You can install the CLI on your RN project or globally.

⚠️ for an easier management of the CLI version used. I would suggest to prefer the local installation

npm

# local installation
npm install --save-dev rnerator

# global installation
npm install rnerator -g

yarn

# local installation
yarn add -D rnerator

# global installation
yarn global add rnerator

Initialization

Then you have to init the cli in your project. This will (if it doesn't exist) create template, sandbox, components folders and set up their content.

# local npm installation
npm exec rnerator init

# local yarn installation
yarn run rnerator init

# global installation
rnerator init

⚠️ To avoid useless conflict you should add sandboxFiles.ts to your .gitignore

Component Generation

Know you can generate your component thanks to the generate command

# local npm installation
npm exec rnerator generate Button -l components/core

# local yarn installation
yarn run rnerator generate Button -l components/core

# global installation
rnerator generate Button -l components/core

Commands

`rnerator generate NAME`

Generate a new element

USAGE
  $ rnerator generate [NAME] [-t <value>] [-l <value>] [-s] [-i]

ARGUMENTS
  NAME  component Name

FLAGS
  -i, --indexDisabled     disabled the creation of an index file
  -l, --location=<value>  location of the component generated
  -s, --sandboxDisabled   disabled the creation of a sandbox file
  -t, --template=<value>  [default: component] template used for the component generated

DESCRIPTION
  Generate a new element

EXAMPLES
  $ rnerator generate <name> --template=<template>

  $ rnerator generate Test
  CREATED src/components/Test/Test.tsx
  CREATED src/components/Test/index.ts
  CREATED src/components/Test/Test.sandbox.tsx
  UPDATED src/sandbox/sandboxFiles.ts

See code: dist/commands/generate/index.ts

`rnerator help [COMMAND]`

Display help for rnerator.

USAGE
  $ rnerator help [COMMAND] [-n]

ARGUMENTS
  COMMAND  Command to show help for.

FLAGS
  -n, --nested-commands  Include all nested commands in the output.

DESCRIPTION
  Display help for rnerator.

See code: @oclif/plugin-help

`rnerator init`

Initialize a new project

USAGE
  $ rnerator init [-j]

FLAGS
  -j, --js  is a javascript project

DESCRIPTION
  Initialize a new project

EXAMPLES
  $ rnerator init

See code: dist/commands/init/index.ts

`rnerator sandbox`

Generate the sandboxFiles.ts file

USAGE
  $ rnerator sandbox

DESCRIPTION
  Generate the sandboxFiles.ts file

EXAMPLES
  $ rnerator sandbox

See code: dist/commands/sandbox/index.ts

Templates

When you execute the command init a folder is created with a unique template component.ts You can edit this one and add your own templates

Template Format

All the templates must have the same format.

{
  "template": "import React from 'react'; import Box from '~core/Box'; import Text from '~core/Text'; type {{name}}Props = {}; const {{name}} = (props: {{name}}Props) => { return (<Box><Text>{{name}}</Text></Box>);};export default {{name}};",
  "location": "components",
  "sandboxDisabled": false
}

Sandbox

The main interest of this component generator is the Sandbox environment automatically generated.

It provide a sandbox view for all your component. In which you can develop your component. This is an alternative to Storybook for React Native

Folder structure

When you initialize the project thanks to rnerator init a folder with this structure is created:

|-sandbox
|-- App.tsx
|-- Navigator.tsx
|-- Home.tsx
|-- sandboxFiles.ts
|-- Wrapper.ts

sandboxFiles

Each time you generate a component with a sandbox file, sandboxFiles.ts is re-generated. (you can also re-regenerate this file thanks to rnerator sandbox)

Thanks to sandboxFiles.ts, a navigator is created with all the Sandbox Files and the Home screen display a link for each screen.

To develop your component in this sandBox environment you now just have to change the App in index.js by src/sandbox/App.tsx