The project structure is as close to JHipster's React client as possible.
App.js is the entrypoint of the app. It bootstraps React Navigation and sends the user to the launch screen.
Your app folder is where most of the files are located in a JHipster React Native app.
Let's walk through them in more detail. Start with the config folder and work your way down the walkthrough in order.
Initialize and configure things in this folder.
app-config.js- configuration for your React Native appredux-persist.js- configures Redux Persistence
Contains files for handling registration, password management, and user settings.
chat-screen.js- shows live chat messages from other userschat-reducer.js- chat state management
entities-screen.js- lists the generated entities and links to their screens
home-screen.js- this is the first screen shown in your application
login-screen.js- the login screen, contains a login and password inputlogin-reducer.js- login state managementlogin-sagas.js- login logic for getting the response from the JHipster backend
Your primary and other navigation components reside here.
entity-stack.js- navigation configuration for all entity routesnav-container.js- navigation configuration for all base routesnav-ref.js- reference to thenavigationobject, allows navigating outside of a componentmodal-screen.js- displays a modal on top of the application
drawer-content.js- contains the content of the Drawer Menu componentdrawer-button.js- button used to toggle the Drawer Menu
Contains shared components such as alert-message, form, rounded-button, and search-bar.
Contains custom input components to handle each of JHipster's data types
Contains json files that mimic API responses for quicker development. These are used by the app/shared/services/fixture-api.js object to mock API responses.
Contains actual images (usually png) used in your application. The images are loaded in app/shared/themes/images.js
Redux configuration, contains shared reducers such as account, app-state, and user
Saga configuration, contains shared sagas
Contains your API service and other important utilities for your application.
api.js- main API service, giving you an interface to communicate with your back endfixture-api.js- mocks your API service, making it faster to develop early on in your apprehydration.service.js- part of the redux-persist implementation, allows resetting reducer data by incrementing the version
Styling themes used throughout your app styles.
application.styles.js- app-wide stylescolors.js- defined colors for your appfonts.js- defined fonts for your appimages.js- loads and caches images used in your appmetrics.js- standard measurements of margins, icons, and more
Contains favicon, splash screen, and app icon image files
Contains Detox E2E tests. These tests run on a device or emulator and follow steps described in the test files. They are very similar to Protractor or Selenium tests.
Contains patches for npm dependencies.
- KeyboardAwareScrollView is patched to improve the jerky scroll animation
- SectionedMultiSelect is patched to fix label display on multi-select inputs
Storybook is configured to show off components in the different states. Storybook is a great way to develop and test components outside of use in your app. View the Storybook when running on an emulator or local device via the "Storybook" option in the Side Menu. All stores are contained in the *.story.js files along side the components.
setup.js- configures Jest mocks
Contains sample Jest snapshot and unit tests for your application.