-
Notifications
You must be signed in to change notification settings - Fork 15
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Chore: Update README.md #266
Open
juanchoperezj
wants to merge
2
commits into
main
Choose a base branch
from
feature/update-readme
base: main
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Open
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit
Hold shift + click to select a range
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,183 +1,196 @@ | ||
| # React Native Base - TypeScript | ||
|
|
||
|  | ||
| [](https://codeclimate.com/github/rootstrap/react-native-base/maintainability) | ||
| [](https://codeclimate.com/github/rootstrap/react-native-base/test_coverage) | ||
|
|
||
| ## Commands | ||
|
|
||
| 1. **Start the app**: `yarn android:{env}` or `yarn ios:{env}` (envs: `dev`, `staging`, and `prod`) | ||
| 2. **Start metro bundler**: `yarn start` | ||
| 3. **Lint the app**: `yarn lint` | ||
| 4. **Test the app**: `yarn test` | ||
|
|
||
| ## Getting started | ||
|
|
||
| 1. Install dependencies: `yarn` | ||
| 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. | ||
|
|
||
| You can also create `.env.prod`, `.env.staging`, and `.env.qa` to define environment variables for production and staging. | ||
|
|
||
| 1. Rename your new project using `yarn rename` or `npm run rename` | ||
| 2. Start on android or ios: `yarn android:{env}` or `yarn ios:{env}` (envs: `dev`,`qa`, `staging`, and `prod`) | ||
|
|
||
| ### Steps for Android development | ||
|
|
||
| None | ||
|
|
||
| ### Steps for iOS development | ||
|
|
||
| 1. Run the following command to install iOS pods | ||
|
|
||
| ``` | ||
| npx pod-install | ||
| ``` | ||
|
|
||
| ## Continuous Integration | ||
|
|
||
| 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. | ||
|
|
||
| ## Using folders template | ||
|
|
||
| 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. | ||
|
|
||
| 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). | ||
|
|
||
| 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. | ||
| <p align="center"> | ||
| <img src="https://camo.githubusercontent.com/2a2696626c8fce8df0706969bb11303a11751f22b55e87ffc969925a046169c5/68747470733a2f2f73332d75732d776573742d312e616d617a6f6e6177732e636f6d2f726f6f7473747261702e636f6d2f696d672f72732e706e67" width="100" alt="project-logo"> | ||
| <h1 align="center">React Native Base</h1> | ||
| 🔥 A React Native starter kit Built with TypeScript, React Navigation, React Query, i18n, and zustand. | ||
|
|
||
| <br> | ||
|
|
||
| <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">[](https://codeclimate.com/github/rootstrap/react-native-base/maintainability) | ||
|
|
||
|
|
||
| ## Libraries | ||
| - [React Navigation](https://reactnavigation.org/) | ||
| - [React Query](https://react-query.tanstack.com/) | ||
| - [i18next](https://www.i18next.com/) | ||
| - [Zustand](https://github.com/pmndrs/zustand) | ||
| - [TypeScript](https://www.typescriptlang.org/) | ||
| - [Prettier](https://prettier.io/) | ||
| - [ESLint](https://eslint.org/) | ||
| - [Jest](https://jestjs.io/) | ||
| - [Axios](https://axios-http.com/docs/intro) | ||
| - [React Native MMKV](https://github.com/mrousavy/react-native-mmkv) | ||
| - [React Native Config](https://github.com/lugg/react-native-config) | ||
| - [React Native Bootsplash](https://github.com/zoontek/react-native-bootsplash) | ||
| --- | ||
|
|
||
| ## Features | ||
|
|
||
| - 📱 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. | ||
| - 📲 TypeScript to reduced bugs and improve code quality. | ||
| - 💾 VS Code Recommended Extensions to improve your development experience. | ||
| - 📋 Schemes: iOS custom schemes to build different environments. | ||
| - 🤖 Flavors for Android to build apps for different environments. | ||
| - ⚙️ React Native Config for environment variables. | ||
| - 🧑💻 Code Quality to format, lint, and test your code. | ||
| - 💻 Pre-commit actions to validate TypeScript code quality staged files and catch errors before committing. | ||
| - 🔧 Testing is done with Jest and React Native Testing Library. | ||
| - 🌍 Localization with i18next for localization. | ||
| - 💡 Dark Mode Support already implemented, as well as for the Splash Screen. | ||
| - 🚢 Navigation already configured. | ||
| - 🚀 Fast Folder Structure to boost the creation of new components. | ||
| - 📝 Custom scripts to bump build version using SemVer and to rename application. | ||
| --- | ||
|
|
||
| ## Why React Native Base? | ||
|
|
||
| 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. | ||
|
|
||
| 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. | ||
|
|
||
| --- | ||
|
|
||
| ## Getting Started | ||
|
|
||
| System Requirements: | ||
|
|
||
| - React Native Environment: [Check official docs](https://reactnative.dev/docs/environment-setup) | ||
|
|
||
| ### Installation | ||
|
|
||
| > 1. Clone the react-native-base repository: | ||
| > | ||
| > ```console | ||
| > $ git clone https://github.com/rootstrap/react-native-base | ||
| > ``` | ||
| > | ||
| > 2. Change to the project directory: | ||
| > | ||
| > ```console | ||
| > $ cd react-native-base | ||
| > ``` | ||
| > | ||
| > 3. Install the dependencies: | ||
| > | ||
| > ```console | ||
| > $ yarn install | ||
| > $ cd ios && pod install | ||
| > or | ||
| > $ npx pod-install | ||
| > ``` | ||
|
|
||
| ### Run your application on 🤖 Android or 🍎 iOS | ||
|
|
||
| <h4>We have flavors for Android and schemes for iOS to manage different environments</h4> | ||
| <p align="left"> | ||
| You can easily run and build both platforms using the commands below:</p> | ||
|
|
||
| > | ||
| > ```console | ||
| > $ yarn ios:dev | ||
| > $ yarn ios:qa | ||
| > $ yarn ios:release:qa | ||
| > $ yarn android:dev | ||
| > $ yarn android:qa | ||
| > $ yarn android:release:qa | ||
| > ``` | ||
| > Check the package.json to see the full list of commands | ||
|
|
||
| ### Tests | ||
|
|
||
| > Run the test suite using the command below: | ||
| > | ||
| > ```console | ||
| > $ yarn test | ||
| > ``` | ||
|
|
||
| ### Bump version | ||
|
|
||
| > Bump the version of the application using the command below: | ||
| > | ||
| > ```console | ||
| > $ yarn bump | ||
| > ``` | ||
|
|
||
| Here you will be prompted to select the environment and the version you want to bump. | ||
|
|
||
| ### Rename application | ||
|
|
||
| > Rename the application using the command below: | ||
| > | ||
| > ```console | ||
| > $ yarn rename | ||
| > ``` | ||
|
|
||
| --- | ||
|
|
||
| ## Using Fast Folder Structure with our template | ||
|
|
||
| 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. | ||
|
|
||
| Then, you can create components by clicking on the Create new templated folder button in the context menu. | ||
|
|
||
| https://user-images.githubusercontent.com/11773865/216385411-9e152929-e6f7-41a2-a22c-5312509acbd4.mov | ||
|
|
||
|
|
||
| ## Contributing | ||
|
|
||
| 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. | ||
|
|
||
| ## Configuring Code Climate | ||
|
|
||
| 1. After adding the project to CC, go to `Repo Settings` | ||
| 2. On the `Test Coverage` tab, copy the `Test Reporter ID` | ||
| 3. Set the copied value as environment variable `CC_TEST_REPORTER_ID` (and repo Secrets) | ||
|
|
||
| ## Sonarqube Integration | ||
|
|
||
| 1. Log into Sonarqube console (`SONAR_URL`) and create a new Project key(`SONAR_PROJECT`) | ||
| 2. Generate a token for the new project and copy it | ||
| 3. Set the token value as environment variable `SONAR_TOKEN` | ||
|
|
||
| ### Usage | ||
|
|
||
| ``` | ||
| sonar-scanner \ | ||
| -Dsonar.qualitygate.wait=true \ | ||
| -Dsonar.host.url=$SONAR_URL \ | ||
| -Dsonar.login=$SONAR_TOKEN \ | ||
| -Dsonar.projectKey=$SONAR_PROJECT \ | ||
| -Dsonar.scm.provider=git \ | ||
| -Dsonar.java.binaries=/tmp \ | ||
| -Dsonar.nodejs.executable=$(which node) \ | ||
| -Dsonar.projectVersion=$(echo $GITHUB_SHA | cut -c1-8) \ | ||
| -Dsonar.sources=. \ | ||
| -Dsonar.projectBaseDir=. \ | ||
| -Dsonar.javascript.lcov.reportPaths=coverage/lcov.info | ||
| -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/** | ||
| ``` | ||
|
|
||
| ## Build Android Release | ||
|
|
||
| ### Configuration | ||
|
|
||
| 🚧 UNDER CONSTRUCTION 🚧 | ||
|
|
||
| ### Create release | ||
|
|
||
| 🚧 UNDER CONSTRUCTION 🚧 | ||
|
|
||
| ## Build iOS Release | ||
|
|
||
| 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`. | ||
| 2. Select on Xcode the scheme of the env you want to create the release for. | ||
| 3. For the device select **generic iOS device**. | ||
| 4. Then go to **Product** -> **Archive**. | ||
| 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. | ||
| 6. The last step is to upload it to the App Store from there or release it Ad Hoc style. | ||
|
|
||
| ## Managing multiple environments | ||
|
|
||
| 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`. | ||
|
|
||
| If you want to add a new env here are the steps to follow: | ||
|
|
||
| 1. Create a new env file with the format `.env.{name}`. | ||
|
|
||
| ### Android | ||
|
|
||
| 2. go to `android/app/build.gradle` and add the env file association to `project.ext.envConfigFiles` following the existing ones as example. | ||
| 3. Scroll down to the `flavors` section and add a new flavor with the following format: | ||
|
|
||
| ``` | ||
| {name} { | ||
| applicationIdSuffix '.{name}' | ||
| minSdkVersion rootProject.ext.minSdkVersion | ||
| targetSdkVersion rootProject.ext.targetSdkVersion | ||
| } | ||
| ``` | ||
|
|
||
| 4. Inside `android/app/src` copy one of the existing env folders like `staging` and rename it with the name of your new flavor. | ||
| 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. | ||
| 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. | ||
| 7. you might need to open the android folder in Android Studio and do **File** -> **Sync project with grade files** | ||
| 8. Last but not least, make sure that you add the new environment to the `bump` script at | ||
|
|
||
| #### ENV file validation during build time | ||
|
|
||
| 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. | ||
|
|
||
| Variables are defined in `src/@types/env` and the validation is done in `scripts/validation-env.ts`. | ||
|
|
||
| ``` | ||
| APP_ENV={dev | prod | staging | qa} react-native run-{android | ios} | ||
| ``` | ||
|
|
||
| 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 | ||
| ### iOS | ||
|
|
||
| #### Using different schemes | ||
|
|
||
| You can use schemes to configure different app-icons, splash, bundle-ids, etc. | ||
|
|
||
| Schemes are a great way to manage multiple envs in TestFlight. | ||
|
|
||
| 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. | ||
|
|
||
| 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. | ||
|
|
||
| To add a new build target do as follows: | ||
| 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. | ||
|
|
||
| 🚧 UNDER CONSTRUCTION 🚧 | ||
| Contributions are welcome! Here are several ways you can contribute: | ||
|
|
||
| #### Manually set the env file | ||
| - **[Report Issues](https://github.com/rootstrap/react-native-base/issues)**: Submit bugs found or log feature requests for the `react-native-base` project. | ||
| - **[Submit Pull Requests](https://github.com/rootstrap/react-native-base/blob/main/CONTRIBUTING.md)**: Review open PRs, and submit your own PRs. | ||
| - **[Join the Discussions](https://github.com/rootstrap/react-native-base/discussions)**: Share your insights, provide feedback, or ask questions. | ||
|
|
||
| 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: | ||
| <details closed> | ||
| <summary>Contributing Guidelines</summary> | ||
|
|
||
| ``` | ||
| ENVFILE=.env.{env} react-native run-ios | ||
| ``` | ||
| 1. **Fork the Repository**: Start by forking the project repository to your github account. | ||
| 2. **Clone Locally**: Clone the forked repository to your local machine using a git client. | ||
| ```sh | ||
| git clone https://github.com/rootstrap/react-native-base | ||
| ``` | ||
| 3. **Create a New Branch**: Always work on a new branch, giving it a descriptive name. | ||
| ```sh | ||
| git checkout -b new-feature-x | ||
| ``` | ||
| 4. **Make Your Changes**: Develop and test your changes locally. | ||
| 5. **Commit Your Changes**: Commit with a clear message describing your updates. | ||
| ```sh | ||
| git commit -m 'Implemented new feature x.' | ||
| ``` | ||
| 6. **Push to github**: Push the changes to your forked repository. | ||
| ```sh | ||
| git push origin new-feature-x | ||
| ``` | ||
| 7. **Submit a Pull Request**: Create a PR against the original project repository. Clearly describe the changes and their motivations. | ||
| 8. **Review**: Once your PR is reviewed and approved, it will be merged into the main branch. Congratulations on your contribution! | ||
| </details> | ||
|
|
||
| ### Adding App Icons for each env | ||
| <details closed> | ||
| <summary>Contributor Graph</summary> | ||
| <br> | ||
| <p align="center"> | ||
| <a href="https://github.com{/rootstrap/react-native-base/}graphs/contributors"> | ||
| <img src="https://contrib.rocks/image?repo=rootstrap/react-native-base"> | ||
| </a> | ||
| </p> | ||
| </details> | ||
|
|
||
| #### iOS | ||
| --- | ||
|
|
||
| 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. | ||
| ## License | ||
|
|
||
| #### Android | ||
| 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. | ||
|
|
||
| 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. | ||
| --- | ||
|
|
||
| ## Base dependencies | ||
| ## Credits | ||
|
|
||
| - [React-Navigation](https://reactnavigation.org) | ||
| - [Jest](https://github.com/facebook/jest) | ||
| - [React-Query](https://tanstack.com/query/v4/?from=reactQueryV3&original=https://react-query-v3.tanstack.com/) | ||
| [](https://github.com/rootstrap/react-native-base#credits) | ||
|
|
||
| ### Adding a Splash Screen | ||
| 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). | ||
|
|
||
| The package used to add the splash screen functionality was [react-native-bootsplash](https://github.com/zoontek/react-native-bootsplash) and uses placeholder images. | ||
| [](http://www.rootstrap.com/) | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
While we don't configure Sonarqube I feel we should keep the codeclimate badges
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Agreed! We are keeping them. You can find them in line 8.