https://github.com/webmasterdevlin/react-native-typescript-react-navigation-v5
React Native TypeScript and React Navigation v5
https://github.com/webmasterdevlin/react-native-typescript-react-navigation-v5
Last synced: 2 months ago
JSON representation
React Native TypeScript and React Navigation v5
- Host: GitHub
- URL: https://github.com/webmasterdevlin/react-native-typescript-react-navigation-v5
- Owner: webmasterdevlin
- Created: 2020-01-11T18:08:58.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T02:25:22.000Z (over 2 years ago)
- Last Synced: 2025-03-25T20:05:27.400Z (3 months ago)
- Language: Objective-C
- Size: 3.11 MB
- Stars: 2
- Watchers: 2
- Forks: 2
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## React Native TypeScript and React Navigation vNext (5.0)
Let's create a React Native app with TypeScript and React Navigation vNext (5.0) by using the builder below.
####Requirements:
- [nodejs](https://nodejs.org/en/) (this includes NPM package manager)
- [vscode](https://code.visualstudio.com/)
- [yarn](https://yarnpkg.com/lang/en/) (optional NPM package manager)
- uninstall the legacy react-native-cli
```sh
$ npm uninstall -g react-native-cli
$ npm i -g @react-native-community/cli
```
Open up a terminal that points to your Desktop.
Then start creating a React Native in TypeScript project
```sh
$ npx react-native init MyRnProject --template react-native-template-typescript@latest
```
open the project on vscode using the command below
```sh
$ code MyRnProject
```
Install the packages below
```sh
$ npm install @react-navigation/native
$ npm install react-native-gesture-handler
$ npm install react-native-reanimated
$ npm install react-native-screens
$ npm install react-native-safe-area-context
$ npm install @react-navigation/stack
$ npm install @react-native-community/masked-view
```
additional configuration
Copy then paste it
```shell script
$ implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
$ implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'
```
#### Adding React Native Paper
```sh
$ npm install react-native-paper
$ npm install react-native-vector-icons
```
then link the react native vector icons
```sh
$ react-native link react-native-vector-icons
```
create the directories and files below
- app/auth/LoginScreen.tsx
- app/navigation/root-navigation.tsx
Just copy and paste the content of each file. Also edit the App.tsx
To run the app
```sh
$ npm run android
```
or
```sh
$ npm run ios
```
