https://github.com/webmasterdevlin/react-native-typescript-react-navigation-v4

React Native TypeScript and React Navigation v4
https://github.com/webmasterdevlin/react-native-typescript-react-navigation-v4

Last synced: about 1 year ago
JSON representation

React Native TypeScript and React Navigation v4

• Host: GitHub
• URL: https://github.com/webmasterdevlin/react-native-typescript-react-navigation-v4
• Owner: webmasterdevlin
• Created: 2020-01-11T17:29:24.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-05T04:59:58.000Z (over 3 years ago)
• Last Synced: 2025-02-11T13:22:02.517Z (over 1 year ago)
• Language: Objective-C
• Size: 2.9 MB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 18
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
## React Native TypeScript and React Navigation v4.0

Let's create a React Native app with TypeScript and React Navigation v4.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

```

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

```

![app](./assets/vscode.png)

Install the packages below

```sh

$ npm install react-navigation

$ 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

![app](./assets/ios-and-android-config.png)

![app](./assets/android.png)

To run the app

```sh

$ npm run android

```

or

```sh

$ npm run ios

```

![app](./assets/app.png)

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

![app](./assets/login.png)