Opinionated resources generator for React Native

---

• 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