Skip to content

Commit 0c2d3e1

Browse files
juanchoperezjjuanchoperezj
committed
Update README.md
1 parent 352b1c5 commit 0c2d3e1

File tree

1 file changed

+176
-163
lines changed

1 file changed

+176
-163
lines changed

‎README.md‎

Lines changed: 176 additions & 163 deletions
Original file line numberDiff line numberDiff line change
@@ -1,183 +1,196 @@
1-
# React Native Base - TypeScript
2-
3-
![GHA CI Test](https://github.com/rootstrap/react-native-base/workflows/CI%20Test/badge.svg)
4-
[![Maintainability](https://api.codeclimate.com/v1/badges/8bb29bcea21bb5dda316/maintainability)](https://codeclimate.com/github/rootstrap/react-native-base/maintainability)
5-
[![Test Coverage](https://api.codeclimate.com/v1/badges/8bb29bcea21bb5dda316/test_coverage)](https://codeclimate.com/github/rootstrap/react-native-base/test_coverage)
6-
7-
## Commands
8-
9-
1. **Start the app**: `yarn android:{env}` or `yarn ios:{env}` (envs: `dev`, `staging`, and `prod`)
10-
2. **Start metro bundler**: `yarn start`
11-
3. **Lint the app**: `yarn lint`
12-
4. **Test the app**: `yarn test`
13-
14-
## Getting started
15-
16-
1. Install dependencies: `yarn`
17-
2. Create a `.env.dev` file in the root directory of the project, based on the `.env.example` sample file and the extra constants that you may need. This will be your development env.
18-
19-
You can also create `.env.prod`, `.env.staging`, and `.env.qa` to define environment variables for production and staging.
20-
21-
1. Rename your new project using `yarn rename` or `npm run rename`
22-
2. Start on android or ios: `yarn android:{env}` or `yarn ios:{env}` (envs: `dev`,`qa`, `staging`, and `prod`)
23-
24-
### Steps for Android development
25-
26-
None
27-
28-
### Steps for iOS development
29-
30-
1. Run the following command to install iOS pods
31-
32-
```
33-
npx pod-install
34-
```
35-
36-
## Continuous Integration
37-
38-
The repo includes configuration for using GitHub Actions to run unit tests and code analysis: `.github/workflows/test.yml`. This can be adapted as needed for specifics of each project. Both CodeClimate and Sonarqube integrations are included in the workflow and their required environment settings should be retrieved from the repo Secrets.
39-
40-
## Using folders template
41-
42-
There's a folder named .fttemplates where you'll find a template you can use to create new components for your app, keeping the same folder conventions for all your components.
43-
44-
You must install Folder Templates extensions in Visual Studio Code to use this feature. You'll find it [here](https://marketplace.visualstudio.com/items?itemName=Huuums.vscode-fast-folder-structure).
45-
46-
If you install the extension you can create your components folder using the template by clicking on Create new templated folder button in the context menu.
1+
<p align="center">
2+
<img src="https://camo.githubusercontent.com/2a2696626c8fce8df0706969bb11303a11751f22b55e87ffc969925a046169c5/68747470733a2f2f73332d75732d776573742d312e616d617a6f6e6177732e636f6d2f726f6f7473747261702e636f6d2f696d672f72732e706e67" width="100" alt="project-logo">
3+
<h1 align="center">React Native Base</h1>
4+
🔥 A React Native starter kit Built with TypeScript, React Navigation, React Query, i18n, and zustand.
5+
6+
<br>
7+
8+
<img src="https://github.com/rootstrap/react-native-base/workflows/tests/badge.svg" style="flat-square&color=0080ff" alt="test-work-flow"> <img src="https://img.shields.io/github/languages/top/rootstrap/react-native-base?style=flat-square&color=0080ff" alt="repo-top-language"> <img src="https://img.shields.io/github/stars/rootstrap/react-native-base?style=flat-square&logo=github&logoColor=white&color=0080ff" alt="last-commit"> <img src="https://img.shields.io/github/issues/rootstrap/react-native-base?style=flat-square&logo=github&logoColor=white&color=0080ff" alt="repo-issues">[![Code Climate](https://api.codeclimate.com/v1/badges/8bb29bcea21bb5dda316/maintainability)](https://codeclimate.com/github/rootstrap/react-native-base/maintainability)
9+
10+
11+
## Libraries
12+
- [React Navigation](https://reactnavigation.org/)
13+
- [React Query](https://react-query.tanstack.com/)
14+
- [i18next](https://www.i18next.com/)
15+
- [Zustand](https://github.com/pmndrs/zustand)
16+
- [TypeScript](https://www.typescriptlang.org/)
17+
- [Prettier](https://prettier.io/)
18+
- [ESLint](https://eslint.org/)
19+
- [Jest](https://jestjs.io/)
20+
- [Axios](https://axios-http.com/docs/intro)
21+
- [React Native MMKV](https://github.com/mrousavy/react-native-mmkv)
22+
- [React Native Config](https://github.com/lugg/react-native-config)
23+
- [React Native Bootsplash](https://github.com/zoontek/react-native-bootsplash)
24+
---
25+
26+
## Features
27+
28+
- 📱 Latest React Native version, we are aware of the changes and improvements that RN Team is making and we are working to keep up with them.
29+
- 📲 TypeScript to reduced bugs and improve code quality.
30+
- 💾 VS Code Recommended Extensions to improve your development experience.
31+
- 📋 Schemes: iOS custom schemes to build different environments.
32+
- 🤖 Flavors for Android to build apps for different environments.
33+
- ⚙️ React Native Config for environment variables.
34+
- 🧑‍💻 Code Quality to format, lint, and test your code.
35+
- 💻 Pre-commit actions to validate TypeScript code quality staged files and catch errors before committing.
36+
- 🔧 Testing is done with Jest and React Native Testing Library.
37+
- 🌍 Localization with i18next for localization.
38+
- 💡 Dark Mode Support already implemented, as well as for the Splash Screen.
39+
- 🚢 Navigation already configured.
40+
- 🚀 Fast Folder Structure to boost the creation of new components.
41+
- 📝 Custom scripts to bump build version using SemVer and to rename application.
42+
---
43+
44+
## Why React Native Base?
45+
46+
Starting a react native project is often difficult and time consuming, because we need to set up a lot of dependencies and configurations, that almost every time would be the same or at least very similar for every project.
47+
48+
Here at Rootstrap we've been working and iterating over this project for a couple of years pulling together the best practices and tools to build high-quality React Native applications, and we think that this template will help you get started quickly and efficiently.
49+
50+
---
51+
52+
## Getting Started
53+
54+
System Requirements:
55+
56+
- React Native Environment: [Check official docs](https://reactnative.dev/docs/environment-setup)
57+
58+
### Installation
59+
60+
> 1. Clone the react-native-base repository:
61+
>
62+
> ```console
63+
> $ git clone https://github.com/rootstrap/react-native-base
64+
> ```
65+
>
66+
> 2. Change to the project directory:
67+
>
68+
> ```console
69+
> $ cd react-native-base
70+
> ```
71+
>
72+
> 3. Install the dependencies:
73+
>
74+
> ```console
75+
> $ yarn install
76+
> $ cd ios && pod install
77+
> or
78+
> $ npx pod-install
79+
> ```
80+
81+
### Run your application on 🤖 Android or 🍎 iOS
82+
83+
<h4>We have flavors for Android and schemes for iOS to manage different environments</h4>
84+
<p align="left">
85+
You can easily run and build both platforms using the commands below:</p>
86+
87+
>
88+
> ```console
89+
> $ yarn ios:dev
90+
> $ yarn ios:qa
91+
> $ yarn ios:release:qa
92+
> $ yarn android:dev
93+
> $ yarn android:qa
94+
> $ yarn android:release:qa
95+
> ```
96+
> Check the package.json to see the full list of commands
97+
98+
### Tests
99+
100+
> Run the test suite using the command below:
101+
>
102+
> ```console
103+
> $ yarn test
104+
> ```
105+
106+
### Bump version
107+
108+
> Bump the version of the application using the command below:
109+
>
110+
> ```console
111+
> $ yarn bump
112+
> ```
113+
114+
Here you will be prompted to select the environment and the version you want to bump.
115+
116+
### Rename application
117+
118+
> Rename the application using the command below:
119+
>
120+
> ```console
121+
> $ yarn rename
122+
> ```
123+
124+
---
47125
126+
## Using Fast Folder Structure with our template
127+
128+
There's a folder named .fttemplates where you'll find a template to be used with the extension [vscode-fast-folder-structure](https://marketplace.visualstudio.com/items?itemName=Huuums.vscode-fast-folder-structure) to create components faster.
129+
130+
Then, you can create components by clicking on the Create new templated folder button in the context menu.
48131
49132
https://user-images.githubusercontent.com/11773865/216385411-9e152929-e6f7-41a2-a22c-5312509acbd4.mov
50133
51134
135+
## Contributing
52136
137+
These template is open source, and at the moment is being developed by the Rootstrap team. We are always looking for contributors to help us improve the project and make it even better.
53138
54-
## Configuring Code Climate
55-
56-
1. After adding the project to CC, go to `Repo Settings`
57-
2. On the `Test Coverage` tab, copy the `Test Reporter ID`
58-
3. Set the copied value as environment variable `CC_TEST_REPORTER_ID` (and repo Secrets)
59-
60-
## Sonarqube Integration
61-
62-
1. Log into Sonarqube console (`SONAR_URL`) and create a new Project key(`SONAR_PROJECT`)
63-
2. Generate a token for the new project and copy it
64-
3. Set the token value as environment variable `SONAR_TOKEN`
65-
66-
### Usage
67-
68-
```
69-
sonar-scanner \
70-
-Dsonar.qualitygate.wait=true \
71-
-Dsonar.host.url=$SONAR_URL \
72-
-Dsonar.login=$SONAR_TOKEN \
73-
-Dsonar.projectKey=$SONAR_PROJECT \
74-
-Dsonar.scm.provider=git \
75-
-Dsonar.java.binaries=/tmp \
76-
-Dsonar.nodejs.executable=$(which node) \
77-
-Dsonar.projectVersion=$(echo $GITHUB_SHA | cut -c1-8) \
78-
-Dsonar.sources=. \
79-
-Dsonar.projectBaseDir=. \
80-
-Dsonar.javascript.lcov.reportPaths=coverage/lcov.info
81-
-Dsonar.coverage.exclusions=**/spec.js,**/__mocks__/**,**/**.spec.js,**/**.config.js,**/rnbv.js,**/android/**,**/ios/**,**/**.styles.js,**/tests/**,**/__mocks__/**,**/httpClient/**,**/jest-setup.js,**/constants/**,**/assets/**,**/node_modules/**,**/coverage/**
82-
```
83-
84-
## Build Android Release
85-
86-
### Configuration
87-
88-
🚧 UNDER CONSTRUCTION 🚧
89-
90-
### Create release
91-
92-
🚧 UNDER CONSTRUCTION 🚧
93-
94-
## Build iOS Release
95-
96-
1. Make sure that the version was already bumped if it applies if not you can run the version bump script with `npm run bump` or `yarn bump`.
97-
2. Select on Xcode the scheme of the env you want to create the release for.
98-
3. For the device select **generic iOS device**.
99-
4. Then go to **Product** -> **Archive**.
100-
5. After it is done processing and the archive succeeds the **organizer** will open. Here is where you can see all the previously generated archives.
101-
6. The last step is to upload it to the App Store from there or release it Ad Hoc style.
102-
103-
## Managing multiple environments
104-
105-
The base is already equipped with three main environments: `dev`, `qa`, `staging`, `production`. All the env files you need to provide are as follows: `.env.dev`, `.env.qa`, `.env.staging`, and `.env.prod`.
106-
107-
If you want to add a new env here are the steps to follow:
108-
109-
1. Create a new env file with the format `.env.{name}`.
110-
111-
### Android
112-
113-
2. go to `android/app/build.gradle` and add the env file association to `project.ext.envConfigFiles` following the existing ones as example.
114-
3. Scroll down to the `flavors` section and add a new flavor with the following format:
115-
116-
```
117-
{name} {
118-
applicationIdSuffix '.{name}'
119-
minSdkVersion rootProject.ext.minSdkVersion
120-
targetSdkVersion rootProject.ext.targetSdkVersion
121-
}
122-
```
123-
124-
4. Inside `android/app/src` copy one of the existing env folders like `staging` and rename it with the name of your new flavor.
125-
5. In that new folder you will see a folder called `values` and inside a file called `strings.xml`. There you can set the app name that is going to appear for this flavor. You can also set special app icons for each flavor inside `res` folder.
126-
6. (optional) go ahead and add new scripts in the `package.json` file for this new env. As you can see, the other envs already have scripts to run, build and build release. This will make your development workflow a lot easier.
127-
7. you might need to open the android folder in Android Studio and do **File** -> **Sync project with grade files**
128-
8. Last but not least, make sure that you add the new environment to the `bump` script at
129-
130-
#### ENV file validation during build time
131-
132-
We have in place a validation that will check if the env file exists and has all the variables defined before building the app. This is to avoid building the app with the wrong env file and having to wait for the build to fail to realize that.
133-
134-
Variables are defined in `src/@types/env` and the validation is done in `scripts/validation-env.ts`.
135-
136-
```
137-
APP_ENV={dev | prod | staging | qa} react-native run-{android | ios}
138-
```
139-
140-
Note: For iOS the validation occurs within the `scripts/simulator.sh` script. For Android it occurs as an inline command in the `package.json` scripts
141-
### iOS
142-
143-
#### Using different schemes
144-
145-
You can use schemes to configure different app-icons, splash, bundle-ids, etc.
146-
147-
Schemes are a great way to manage multiple envs in TestFlight.
148-
149-
Fortunately the base already comes with the schemes you will probably need to get to production: `ReactNativeBase-Develop`, `ReactNativeBase-QA`, `ReactNativeBase-Staging` and `ReactNativeBase` which is for production use.
150-
151-
Each build target has its respective scheme already set up, they all have the same name as the build target except for the production one, that one is called `ReactNativeBase-Prod`. This leaves `ReactNativeBase` scheme free of an env setup just in case you don't want to use build targets.
152-
153-
To add a new build target do as follows:
139+
Also, if you need to built a custom React Native application, you can contact us at [rootstrap.com/contact](https://www.rootstrap.com/contact) to further discuss your project and how we can help you to achieve your goals.
154140
155-
🚧 UNDER CONSTRUCTION 🚧
141+
Contributions are welcome! Here are several ways you can contribute:
156142
157-
#### Manually set the env file
143+
- **[Report Issues](https://github.com/rootstrap/react-native-base/issues)**: Submit bugs found or log feature requests for the `react-native-base` project.
144+
- **[Submit Pull Requests](https://github.com/rootstrap/react-native-base/blob/main/CONTRIBUTING.md)**: Review open PRs, and submit your own PRs.
145+
- **[Join the Discussions](https://github.com/rootstrap/react-native-base/discussions)**: Share your insights, provide feedback, or ask questions.
158146
159-
If you are looking for something quick and easy in the short term, there is one more way you can run the app with a custom env file, just run:
147+
<details closed>
148+
<summary>Contributing Guidelines</summary>
160149
161-
```
162-
ENVFILE=.env.{env} react-native run-ios
163-
```
150+
1. **Fork the Repository**: Start by forking the project repository to your github account.
151+
2. **Clone Locally**: Clone the forked repository to your local machine using a git client.
152+
```sh
153+
git clone https://github.com/rootstrap/react-native-base
154+
```
155+
3. **Create a New Branch**: Always work on a new branch, giving it a descriptive name.
156+
```sh
157+
git checkout -b new-feature-x
158+
```
159+
4. **Make Your Changes**: Develop and test your changes locally.
160+
5. **Commit Your Changes**: Commit with a clear message describing your updates.
161+
```sh
162+
git commit -m 'Implemented new feature x.'
163+
```
164+
6. **Push to github**: Push the changes to your forked repository.
165+
```sh
166+
git push origin new-feature-x
167+
```
168+
7. **Submit a Pull Request**: Create a PR against the original project repository. Clearly describe the changes and their motivations.
169+
8. **Review**: Once your PR is reviewed and approved, it will be merged into the main branch. Congratulations on your contribution!
170+
</details>
164171

165-
### Adding App Icons for each env
172+
<details closed>
173+
<summary>Contributor Graph</summary>
174+
<br>
175+
<p align="center">
176+
<a href="https://github.com{/rootstrap/react-native-base/}graphs/contributors">
177+
<img src="https://contrib.rocks/image?repo=rootstrap/react-native-base">
178+
</a>
179+
</p>
180+
</details>
166181

167-
#### iOS
182+
---
168183

169-
Open the project with XCode and in the files tree find `ReactNativeBase/ReactNativeBase/Images.xcassets` file. There you can find a different App Icon file for each environment, and you can modify each with your own icons.
184+
## License
170185

171-
#### Android
186+
This project is protected under the [MIT](https://choosealicense.com/licenses/mit/) License. For more details, refer to the [LICENSE](https://choosealicense.com/licenses/mit/) file.
172187

173-
Open the project with Android Studio. Under `android/app/src` you will find a folder for each environment. Each one contains the app icon in square and round version in different sizes. You can change these png files in all sizes to use your own app icon.
188+
---
174189

175-
## Base dependencies
190+
## Credits
176191

177-
- [React-Navigation](https://reactnavigation.org)
178-
- [Jest](https://github.com/facebook/jest)
179-
- [React-Query](https://tanstack.com/query/v4/?from=reactQueryV3&original=https://react-query-v3.tanstack.com/)
192+
[](https://github.com/rootstrap/react-native-base#credits)
180193

181-
### Adding a Splash Screen
194+
React Native Base is maintained by [Rootstrap](http://www.rootstrap.com/) with the help of our [contributors](https://github.com/rootstrap/react-native-base/contributors).
182195

183-
The package used to add the splash screen functionality was [react-native-bootsplash](https://github.com/zoontek/react-native-bootsplash) and uses placeholder images.
196+
[![](https://camo.githubusercontent.com/2a2696626c8fce8df0706969bb11303a11751f22b55e87ffc969925a046169c5/68747470733a2f2f73332d75732d776573742d312e616d617a6f6e6177732e636f6d2f726f6f7473747261702e636f6d2f696d672f72732e706e67)](http://www.rootstrap.com/)

0 commit comments

Comments
 (0)