rnx-gen

Opinionated resources generator for React Native

Installation

npm i rnx-gen --save-dev

Usage

1. Generate files for a new screen with boilerplate code for each file

npx rnx-gen g screen UserProfile

Result:

src
   |-screens
        |-UserProfileScreen
            |-__tests__
                |-UserProfileScreen.test.ts
            |-UserProfileScreen.tsx
            |-UserProfileScreen.types.ts
            |-UserProfileScreen.styles.ts
            |-UserProfileScreen.constants.ts
            |-index.ts

Command options:

| Option | Descriptions | | ----------- | ---------------------------------------------------------------- | | --no-test | Do not create the tests folder and the test file | | --no-const | Do not create the constants file | | --no-style | Do not create the styles file | | --path | Custom path beginning with src (example --path=src/screens/auth) | | --keep-name | Use the resource name provided as an option without modification |

2. Generate files for a new component with boilerplate code for each file

npx rnx-gen g component AlertModal

Result:

src
   |-components
        |-AlertModal
            |-__tests__
                |-AlertModal.test.ts
            |-AlertModal.tsx
            |-AlertModal.styles.ts
            |-index.ts

Command options:

| Option | Descriptions | | ----------- | -------------------------------------------------------------------- | | --no-test | Do not create the tests folder and the test file | | --no-dir | Do not create a separate folder for the component | | --no-style | Do not create the styles file | | --path | Custom path beginning with src (example --path=src/components/cards) | | --keep-name | Use the resource name provided as an option without modification |

3. Generate a new hook file with boilerplate code

npx rnx-gen g hook profileData

Result:

src
   |-hooks
        |-useProfileData
            |-useProfileData.ts
            |-useProfileData.test.ts
            |-index.ts

Command options:

| Option | Descriptions | | ----------- | ---------------------------------------------------------------- | | --no-test | Do not create the test file | | --no-dir | Do not create a separate folder for the hook | | --path | Custom path beginning with src (example --path=src/hooks/data) | | --keep-name | Use the resource name provided as an option without modification |

4. Generate a new Redux slice with boilerplate code

npx rnx-gen g slice users

Result:

src
   |-redux
        |-slices
            |-usersSlice.ts

Command options:

| Option | Descriptions | | ----------- | ------------------------------------------------------------------ | | --path | Custom path beginning with src (example --path=src/redux/reducers) | | --keep-name | Use the resource name provided as an option without modification |

5. Set up Redux files (Redux toolkit) with boilerplate code for each file

npx rnx-gen redux

Result:

src
   |-redux
        |-slices
            |-appSlice.ts
        |-selectors
            |-appSelectors.ts
        |-rootReducer.ts
        |-store.ts
        |-store.utils.ts