@mentormate/rn-bootstrap
v4.1.1
Published
rn-bootstrap CLI
Downloads
90
Readme
rn-bootstrap CLI
The CLI facilitates the process of creating a new React Native project from scratch.
When starting a new project with rn-bootstrap
it automatically installs and sets up the following:
- React
- React Native
- TypeScript
- React Navigation - read more here
- Styles (optional) - styled-components vs Stylesheet vs Gluestack - read more here
- Storybook (optional) - workshop for building UI components - read more here
- Redux State management(optional) - read more here
- Jest - unit test setup, threshold for coverage - read more here
- Predefined environments - read more here
- Husky Hooks - read more here
- Commits linter - commitlint and commitizen - read more here
- Predefined eslint and prettier rules
Installation
npm i -g @mentormate/rn-bootstrap
Prerequisites
Yarn - If you don't already have yarn installed, please follow the steps listed here.
Before you can start using this tool you need to prepare you local environment for React Native development as described here.
Make sure to follow the instructions under the React Native CLI Quickstart
tab for both iOS and Android platforms and when you reach the React Native Command Line Interface
return to this guide and proceed with next steps.
Usage
Create a new project using start-project
and mandatory options for Folder Name
and App Bundle Id
rn-bootstrap start-project awesomeApp com.awesomeapp
Note that bundle ID should follow proper format (for details check BUNDLE_ID_REGEX
in constants.ts
) or an Error will be thrown.
Pick the styling/theming library - Gluestack, Styled Components or built-in StyleSheet:
? Please select a styling library …
❯ Gluestack-UI Core (Unstyled)
Gluestack-UI Default
Gluestack-UI Ejected
Styled Components
React-Native built-in StyleSheet
Pick the state management library - Redux Toolkit, Redux Toolkit with RTK Query, or No State Management
? Please select a state management library …
❯ Redux Toolkit
Redux Toolkit with RTK Query Example
No State Management
In case you want to add react-navigation example code in the project:
? React Navigation: …
❯ With set-up and example screens.
Without examples.
Styles
Gluestack UI
- comes with three different options:- Gluestack-UI Core - is intentionally designed as an unstyled library, providing you with the flexibility to style your components.
- Gluestack-UI Default - comes with a package called
@gluestack-ui/config
, which has ready-made styles for all the components. - Gluestack-UI Ejected - ejects
@gluestack-ui/themed
library to match your project's unique visual identity.- This will create a config folder in your project root directory.
When any of the Gluestack options is selected the CLI will automatically install and wrap the
HomeContainer
with<GluestackUIProvider>
. Read more about gluestack concepts and configuration options here.Styled Components
- when selectedstyled-components
library is automatically installed and basic usage code examples are added inbaseProject/src/features/home/components/HomeComponent.tsx
React-Native built-in StyleSheet
- the application will use the default StyleSheet functionality:const styles = StyleSheet.create({ container: { ...options } });
Storybook
Storybook
- you can design and develop individual React Native components on a device & simulator.- In order to run storybook :
yarn storybook
Windows issues:
Please note that npm uses cmd by default and that doesn't support command substitution, so if you want to leverage that, then you need to update your .npmrc to set the script-shell to powershell. Learn more- To generate the initial set of stories for a very first time:
yarn storybook-generate
- In order to run storybook :
State Management
Redux Toolkit
option - when selectedreact-redux
library will be automatically installed.src/store/store.ts
will be imported in App.tsx. The file contains a basic store setup including the redux toolkit.src/store/hooks.ts
is also available with a predefined setup for easy usage of useDispatch and useSelector.Redux Toolkit with RTK Query
option - will include Redux Toolkit and also predefined RTK Query Example: CheckoutbaseProject/src/common/services/api/api.ts
and the RTK Query documentation: https://redux-toolkit.js.org/rtk-query/overview
Reactotron
Reactotron
(Optional) is a powerful debugger for React and React Native applications. It provides developers with an intuitive interface to monitor application state, network requests, and performance metrics.reactotronConfig.js
file will be added in the project's root for easy integration
Navigation
With set-up and example screens
option - when selected the App will automatically include an example BottomTabNavigator (src/common/navigation/bottomTab/BottomTabNavigator.tsx
)
Icon Toolkit
Lucide Icons
(Optional) Provides rich set of well styled icons.
Testing
- The script will install
jest
and setup jest config for the coverage threshold
Environments
- In order to handle different environments the CLI will install
react-native-config
library and include dev, stage, and production environment files.
Husky
- Husky hooks are to be used in order to automate some processes:
- commit-msg - will trigger validation on the commit message enforcing writing proper commit messages.
- pre-commit - will run linters and TypeScript check against staged files. It will also check for circular dependencies in the project.
- pre-push - will run all tests and fail if any of them fail or the coverage threshold is not met.
Commits
The CLI enforces the usage of proper commit messages using commitlint and commitizen. Commitizen will guide you through a friendly CLI when the git commit command is used:
It is all about using Conventional Commits
Generator Commands:
Container:
rn-bootstrap generate container FileNameContainer
Filename must end with Container keyword. If a container folder doesn't exist, you will be asked if it should be created.Component:
rn-bootstrap generate component FileNameComponent
Filename must end with Component keyword. If a container folder doesn't exist, you will be asked if it should be created.Hook:
rn-bootstrap generate hook useMyHookName
Filename follows the "useYourHookName" convention.Model:
rn-bootstrap generate model ModelFile
Page:
rn-bootstrap generate page FileNamePage
Filename must end with Page keyword.Util:
rn-bootstrap generate util FileNameUtil
Test:
rn-bootstrap generate test FileName
File must be placed inside a container, component, hook, model, page, or util folder.Feature:
rn-bootstrap generate feature awesome-feature
Feature names should start with lowercase characters.As a result, a new set of feature components will be added to the project:
Contribution
Read our Contributing Guide to learn about our development process, and how to build and test your changes.
License
MM-RN-CLI is MIT licensed, as found in the LICENSE file.