⚛️ An opinionated universal navigation strategy for codebases containing both React & React Native
This is the source code from this blog post.
Requirements: React 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
yarn xcode
(open the project on Xcode)yarn studio
(open the project on Android Studio)$ yarn android
or $ yarn ios
useNavigation()
useNavigation
is a hook which gives access to the navigation
object. It includes:
navigate
: Go to another routereplace
: Replace the current route with a new onegoBack
: Close active route and move back in the stackuseRoute()
useRoute
is a hook which gives access to the route
object. It includes:
name
: Name of the route. Defined in navigator component hierarchyparams
: 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 toparams
: An object of key/value pairs of route parametersuseRoute
hookuseNavigation
hookLink
componenttRedirect
component