• The problem
• The solution
• Installation
• Usage
  • Screen
  • Component
  • Hook
  • Redux Slice
  • Api
  • Redux folder
• Dry run

The problem

If you follow the recommended folder structure for React Native apps, you have to create multiple files for a single screen or a component (styles, constants, types etc.). This wastes a lot of time.

The solution

Use rnx-gen to create common resources with a single command.
Here's how you would generate the files for a new screen component:

Installation

Save rnx-gen as a dev dependency

npm i rnx-gen --save-dev

Usage

Screen

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 (example --path=src/screens/auth) | | --keep-name | Use the resource name provided without modification | | --dry-run | Simulate command execution without creating any files |

Component

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 (example --path=src/components/cards) | | --keep-name | Use the resource name provided without modification | | --dry-run | Simulate command execution without creating any files |

Hook

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 (example --path=src/hooks/data) | | --keep-name | Use the resource name provided without modification | | --dry-run | Simulate command execution without creating any files |

Redux slice

npx rnx-gen g slice users

• Result

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

• Command options

| Option | Descriptions | | ----------- | ----------------------------------------------------- | | --path | Custom path (example --path=src/redux/reducers) | | --keep-name | Use the resource name provided without modification | | --dry-run | Simulate command execution without creating any files |

Api

npx rnx-gen g api dashboard

• Result

src
   |-services
        |-api
            |-dashboardApi
                |-dashboardApi.ts
                |-dashboardApi.endpoints.ts
                |-index.ts

• Command options

| Option | Descriptions | | -------------- | ----------------------------------------------------- | | --path | Custom path (example --path=src/api/home) | | --keep-name | Use the resource name provided without modification | | --no-endpoints | Do not create the endpoints file | | --no-dir | Do not create a separate folder for the api | | --dry-run | Simulate command execution without creating any files |

Redux folder

npx rnx-gen redux

• Result

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

• Command options

| Option | Descriptions | | ------------- | ----------------------------------------------------- | | --path | Custom path for the redux folder | | --no-testutil | Do not create the test.utils.tsx file | | --dry-run | Simulate command execution without creating any files |

Dry run

Execute any command with the --dry-run option to simulate file creation

• Example

npx rnx-gen g screen Splash --dry-run