/react-native-web-monorepo-navigation

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

Primary LanguageTypeScript

Navigation on React Native [Web]

This is the source code from this blog post.

cover

Table of Contents

How to run

Requirements: React Native (last tested on react-native@0.61)

  • $ git clone git@github.com: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

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' })

<Link />

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

  • useRoute hook
  • useNavigation hook
  • Link componentt
  • Redirect component

Miscellaneous

  • Move API to a library that can be installed as an npm package