|
1 | | -# react-native-typescript-boilerplate |
2 | | -React Native Typescript Boilerplate |
| 1 | +# react-native-typescript-boilerplate-template 2022 |
| 2 | +[](https://www.npmjs.com/package/@handidev/react-native-typescript-boilerplate) |
| 3 | +[](https://conventionalcommits.org) |
| 4 | + |
| 5 | +## What is React Native Typescript Boilerplate |
| 6 | + |
| 7 | +It is a template that you can clone and reuse for every project. It is starting point for React Native application. |
| 8 | + |
| 9 | +## React Native Typescript Boilerplate ( 0.69.1 ) |
| 10 | + |
| 11 | +consist of: |
| 12 | + |
| 13 | +- react-native": "0.69.1" |
| 14 | +- "@react-native-masked-view/masked-view": "^0.2.7", |
| 15 | +- "@react-navigation/bottom-tabs": "^6.3.2", |
| 16 | +- "@react-navigation/material-top-tabs": "^6.2.2", |
| 17 | +- "@react-navigation/native": "^6.0.11", |
| 18 | +- "@react-navigation/native-stack": "^6.7.0", |
| 19 | +- "@react-navigation/stack": "^6.2.2", |
| 20 | +- "@reduxjs/toolkit": "^1.8.3", |
| 21 | +- "react": "18.0.0", |
| 22 | +- "react-native-gesture-handler": "^2.5.0", |
| 23 | +- "react-native-pager-view": "^5.4.25", |
| 24 | +- "react-native-safe-area-context": "^4.3.1", |
| 25 | +- "react-native-screens": "^3.15.0", |
| 26 | +- "react-native-tab-view": "^3.1.1", |
| 27 | +- "react-native-vector-icons": "^9.2.0", |
| 28 | +- "react-redux": "^8.0.2" |
| 29 | +## Requirements |
| 30 | + |
| 31 | +Node 12 or greater is required. Development for iOS requires a Mac and Xcode 10 or up, and will target iOS 11 and up. |
| 32 | + |
| 33 | +You also need to install the dependencies required by React Native. |
| 34 | +Go to the [React Native environment setup](https://reactnative.dev/docs/environment-setup), then select `React Native CLI Quickstart` tab. |
| 35 | +Follow instructions for your given `development OS` and `target OS`. |
| 36 | + |
| 37 | +## Quick start |
| 38 | + |
| 39 | +To create a new project using the boilerplate simply run : |
| 40 | + |
| 41 | +``` |
| 42 | +npx react-native init MyApp --template @handidev/react-native-boilerplate |
| 43 | +``` |
| 44 | + |
| 45 | +note: replace `MyApp` with your desired App name. |
| 46 | + |
| 47 | +Assuming you have all the requirements installed, you can run the project by running: |
| 48 | + |
| 49 | +- `yarn start` / `npm start -- -- reset-cache` to start the metro bundler, in a dedicated terminal |
| 50 | +- `npx react-native run-ios` / `npx react-native run-android` to run the *platform* application (remember to start a simulator or connect a device) |
| 51 | +## List of Q & A |
| 52 | + |
| 53 | +#### I got error `Error: spawn ./gradlew EACCES` when run `npx react-native run-android`. |
| 54 | + |
| 55 | +Run this command `chmod 755 android/gradlew` from your root project directory |
| 56 | + |
| 57 | +#### I got error `Error: SDK location not found. Define location with sdk.dir in the local.properties file or with an ANDROID_HOME environment variable.` |
| 58 | + |
| 59 | +- Go to your Project -> Android |
| 60 | +- Create a file local.properties |
| 61 | +- Open the file |
| 62 | +- Paste your Android SDK path depending on the operating system: |
| 63 | + |
| 64 | + - Windows: |
| 65 | + sdk.dir=C:\\Users\\`USERNAME`\\AppData\\Local\\Android\\sdk |
| 66 | + - Linux or MacOS |
| 67 | + sdk.dir=/Users/`USERNAME`/Library/Android/sdk |
| 68 | + |
| 69 | +- Replace `USERNAME` with your PC username |
| 70 | + |
| 71 | +### React Native Build Failed on M1 Macbook Pro / Air |
| 72 | + |
| 73 | +try this solution: [How to Run and Build React Native on Macbook Pro M1 Apple Silicon](https://handi.dev/blog/how-run-react-native-on-macbook-m1-apple-silicon) |
0 commit comments