rn-rad

CLI for React Native, boilerplates and generators. Rapid Application Development (RAD) model for React Native.

Table of content

• Requirements
• Installation
• Commands
• Packages
• License

Requirements

You need the following requirements:

• node 10+
• npm & npx

Installation

npm install -g @codepso/rn-rad
npm update -g @codepso/rn-rad

Commands

Initializers (i)
rn-rad i packages [redux=true]
rn-rad i structure [redux=true]
rn-rad i project [resources=true]

Generators (g)
rn-rad g component [name] [path]
rn-rad g screen [name] [path]
rn-rad g form [name] [path] [screen=true]

About
rn-rad help
rn-rad version

command: i packages [options]

install the most used packages and pod's (ios)

• --redux (-r) Flag to indicate if a redux packages will be added, default: true
• --lang (-l) Flag to indicate if languages packages will be added, default: true

rn-rad i packages
rn-rad i packages --redux false
rn-rad i packages -r false

rn-rad i packages --lang false
rn-rad i packages -l false

Icons

ios/AwesomeProject/info.plist

<key>UIAppFonts</key>
<array>
  <string>MaterialCommunityIcons.ttf</string>
  <string>MaterialIcons.ttf</string>
</array>

android/app/build.gradle

project.ext.vectoricons = [
    iconFontNames: ['MaterialIcons.ttf', 'MaterialCommunityIcons.ttf']
]

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

command: i structure [options]

Create the directory structure

• --redux (-r) Flag to indicate if redux directory will be added, default: true
• --lang (-l) Flag to indicate if i18n directory will be added, default: true

rn-rad i structure
rn-rad i structure --redux false
rn-rad i structure -r false

rn-rad i structure --lang false
rn-rad i structure -l false

command: i project [options]

Add a theme, styles, images and helpers to RN project, rn-rad.config.js will be created Note: i structure (it's required)

• --resources (-r) Flag to indicate if the resources will be added, default: true

rn-rad i project
rn-rad i project --resource false
rn-rad i project -r false

command: g theme [name]

Create a new theme (styles, colors)

• name: theme name (use kebab-case)

rn-rad g theme
rn-rad g theme codepso

command: g screen [name] [options]

Create a screen

• name: Screen name (use UpperCamelCase)
• --path (-p): Flag to indicate the path where it will be created, default: src/screens

rn-rad g screen
rn-rad g screen Welcome
rn-rad g screen Welcome --path src/screens/home
rn-rad g screen Welcome -p src/screens/home

command: g component [name] [options]

Create a component

• name: Component name (use UpperCamelCase)
• --path (-p) Flag to indicate the path where it will be created, default: src/components

rn-rad g component
rn-rad g component Footer
rn-rad g component Footer --path src/ui
rn-rad g component Footer -p src/ui

command: g form [name] [options]

Create a form Require: yup, formik.

• name: Form name (use UpperCamelCase)
• --path (-p) Flag to indicate the path where it will be created, default: src/forms
• --view (-v) Flag to indicate if the view will be created, default: true

rn-rad g form
rn-rad g form User

rn-rad g form User --path src/forms/user
rn-rad g form User -p src/forms/user

rn-rad g form User --view false
rn-rad g form User -v false

rn-rad g form User -p src/forms/user -v false

Packages

• React Native 0.6.1+
• React Navigation 5+
• React Native Paper 3.10+/4
• Vector Icons 6
• Redux
• Yup
• Formik
• React Native Localize
• i18n js
• React Native Helper

License

The React RAD is licensed under the terms of the GPL Open Source license and is available for free.