npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@mentormate/rn-bootstrap

v4.1.1

Published

rn-bootstrap CLI

Downloads

188

Readme

rn-bootstrap CLI

Commitizen friendly

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 selected styled-components library is automatically installed and basic usage code examples are added in baseProject/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

State Management

  • Redux Toolkit option - when selected react-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: Checkout baseProject/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:

    commitizen.png

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.

    select_feature_folders.png

    As a result, a new set of feature components will be added to the project:

    generated_feature.png

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.