https://github.com/ythecombinator/react-native-web-monorepo-navigation

⚛️ An opinionated universal navigation strategy for codebases containing both React & React Native.
https://github.com/ythecombinator/react-native-web-monorepo-navigation

monorepo react react-native react-navigation react-router-dom typescript

Last synced: 3 months ago
JSON representation

⚛️ An opinionated universal navigation strategy for codebases containing both React & React Native.

• Host: GitHub
• URL: https://github.com/ythecombinator/react-native-web-monorepo-navigation
• Owner: ythecombinator
• Created: 2019-12-26T03:57:07.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2022-10-20T20:30:31.000Z (about 2 years ago)
• Last Synced: 2024-10-19T09:55:02.233Z (3 months ago)
• Topics: monorepo, react, react-native, react-navigation, react-router-dom, typescript
• Language: TypeScript
• Homepage:
• Size: 6.65 MB
• Stars: 26
• Watchers: 4
• Forks: 3
• Open Issues: 26
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Navigation on React Native [Web]

This is the source code from [this blog post](https://dev.to/ythecombinator/driving-towards-a-universal-navigation-strategy-in-react-j60).

![cover](cover.png)

### Table of Contents

- [How to run](#how-to-run)

- [API](#api)

- [Roadmap](#roadmap)

### How to run

_Requirements: [React Native](https://facebook.github.io/react-native/docs/getting-started.html#native) (last tested on [email protected])_

- `$ git clone [email protected]:ythecombinator/react-native-web-monorepo-navigation.git`

- `$ cd react-native-web-monorepo-navigation`

- `$ yarn`

- `$ cd packages/mobile/ios`

- `$ pod install`

- `$ cd -`

- `$ yarn workspace web start`

- `$ yarn workspace mobile start`

- Run the project

  - [iOS] Via Xcode

    - `yarn xcode` (open the project on Xcode)

    - Press the Run button

  - [Android] Via Android Studio

    - `yarn studio` (open the project on Android Studio)

    - Press the Run button

  - Via CLI

    - _You may need to launch your device emulator before the next command_

    - `$ yarn android` or `$ yarn ios`

### [API](#api)

#### `useNavigation()`

`useNavigation` is a hook which gives access to the `navigation` object. It includes:

- `navigate`: Go to another route

- `replace`: Replace the current route with a new one

- `goBack`: Close active route and move back in the stack

#### `useRoute()`

`useRoute` is a hook which gives access to the `route` object. It includes:

- `name`: Name of the route. Defined in navigator component hierarchy

- `params`: Set of params which is defined while navigating – e.g. `navigate('Twitter', { user: 'Dan Abramov' })`

#### ``

Provides declarative, accessible navigation around your application. It has the following props:

- `path`: A string representing the path to link to

- `params`: An object of key/value pairs of route parameters

### Roadmap

#### API

- [x] `useRoute` hook

- [x] `useNavigation` hook

- [x] `Link` componentt

- [ ] `Redirect` component

#### Miscellaneous

- [ ] Move API to a library that can be installed as an npm package