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)

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)

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)

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)

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