This project aims to be a strong foundation for react-native applications. It provides a clear and organized structure, core dependencies, and boilerplate to jumpstart development.
- Node.js > 12 and npm (Recommended: Use nvm)
- Watchman
- Xcode 12
- Cocoapods 1.10.1
- JDK > 11
- Android Studio and Android SDK
Click the "Use this template" button above the file list, then use the Owner drop-down menu, and select the account you want to own the repository. Creating a repository from a template has the following advantages:
- A repository created from a template starts with a single commit.
- Commits to a repository created from a template do appear in your contribution graph.
- Creating a repository from a template starts a new project quickly.
You can start by cloning this repository and using react-native-rename. In the current state of this project, it should give you no issues at all, just run the script, delete your node modules and reinstall them and you should be good to go.
Keep in mind that this library can cause trouble if you are renaming a project that uses Pods
on the iOS side.
After that you should proceed as with any javascript project:
- Go to your project's root folder and run
npm install
. - If you are using Xcode 12.5 or higher got to /ios and execute
pod install --
repo-update` - Run
npm run ios
ornpm run android
to start your application!
(Using yarn: yarn ios
or yarn android
)
Note: Please read the Setup environments section that is below in this file for more information about the execution scripts.
If you want to roll on your own and don't want to use this as a template, you can create your project and then copy the /src
folder (which has all the code of your application) and update your index.js
.
Keep in mind that if you do this, you'll have to install and link all dependencies (as well as adding all the necessary native code for each library that requires it).
This template follows a very simple project structure:
src
: This folder is the main container of all the code inside your application.assets
: Asset folder to store all images, vectors, etc.components
: Folder to store any common component that you use through your app (such as a generic button)screens
: Folder that contains all your application screens/features.Screen
: Each screen should be stored inside its folder and inside it a file for its code and a separate one for the styles and tests.Screen.js
Screen.styles.js
Screen.test.js
App.js
: Main component that starts your whole app.index.js
: Entry point of your application as per React-Native standards.
In this folder, you have the main objects to apply the composition architecture. Just create a folder for each screen you have in your application, call all the components and static resources you need to render the scene and finally use the corresponding hooks to interact with redux and create behaviors depending on the store.
To keep the structure, extract the styles from the main file and place it in a {namefile.styles.js} do the same for the set of tests needed for each screen with the file {namefile.test.js}