If you open the new project in VSCode you will see the following structure:
ui: This folder contains all the UI components and the theme configuration. We provide minimal components with a basic
obytestheme. You can add your own components and theme configuration here.
core: This folder contains the core files, such as authentication, localization, storage, and more. It can be shared with other projects. That’s why we are only including modules that have nothing to do with project logic. This approach helps us share code between projects and also update the starter with new features.
navigation: This folder contains the navigation files such as stack, tab and drawer navigators. We provide a basic navigation structure for the demo app that you can modify to fit your needs.
screens: This folder contains the screens files. We provide a basic screens structure for the demo app that you can remove and add your screens. If you need to create a specific component for a screen you can create a
componentsfolder inside the screen folder.
api: This folder contains the API files. We provide a basic api client and provider and you just need to create query and mutation for your modules. Check
postsfolder for inspiration on how to create a query and mutation.
translations: This folder contains the translation resources files. We recommend using translation files even if you are not supporting multiple languages as it will help you to support multiple languages in the future and also help you to find all the strings in one place.
types: This folder contains the global types.
We use absolute imports to import files using the Babel module resolver plugin and TypeScript path mapping. This approach helps us avoid long relative paths and makes the code cleaner and more readable.
Here is a simple example of how the Feed screen looks with absolute imports.
This approach is very useful when you are working on a large project with a lot of files and folders and it can be done by updating the
babel.config.js file and
tsconfig.json file to the following: