• This repository has been archived on 08/Feb/2020
  • Stars
    star
    494
  • Rank 89,130 (Top 2 %)
  • Language
    TypeScript
  • Created over 5 years ago
  • Updated almost 5 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Routing and navigation for your React Native apps

React Navigation 5

THIS REPO IS ARCHIVED AND CODE HAS BEEN MOVED TO THE MAIN REPOSIORY

Build Status Code Coverage MIT License

Routing and navigation for your React Native apps with a component-first API.

Documentation can be found at next.reactnavigation.org.

Contributing

The project uses a monorepo structure for the packages managed by yarn workspaces and lerna. To get started with the project, run yarn in the root directory to install the required dependencies for each package:

yarn

While developing, you can run the example app with Expo to test your changes:

yarn example start

Make sure your code passes TypeScript and ESLint. Run the following to verify:

yarn typescript
yarn lint

To fix formatting errors, run the following:

yarn lint --fix

Remember to add tests for your change if possible. Run the unit tests by:

yarn test

Running the e2e tests with Detox (on iOS) requires the following:

  • Mac with macOS (at least macOS High Sierra 10.13.6)
  • Xcode 10.1+ with Xcode command line tools

First you need to install applesimutils and detox-cli:

brew tap wix/brew
brew install applesimutils
yarn global add detox-cli

Then you can build and run the tests:

detox build -c ios.sim.debug
detox test -c ios.sim.debug

Publishing

To publish a new version, first we need to export a GH_TOKEN environment variable as mentioned here. Then run:

yarn lerna publish

This will automatically bump the version and publish the packages. It'll also publish the changelogs on GitHub for each package.

Installing from a fork on GitHub

Since we use a monorepo, it's not possible to install a package from the repository URL. If you need to install a forked version from Git, you can use gitpkg.

First install gitpkg:

yarn global add gitpkg

Then follow these steps to publish and install a forked package:

  1. Fork this repo to your account and clone the forked repo to your local machine
  2. Open a Terminal and cd to the location of the cloned repo
  3. Run yarn to install any dependencies
  4. If you want to make any changes, make them and commit
  5. Now cd to the package directory that you want to use (e.g. cd packages/stack for @react-navigation/stack)
  6. Run gitpkg publish to publish the package to your repo

After publishing, you should see something like this:

Package uploaded to [email protected]:<user>/<repo>.git with the name <name>

You can now install the dependency in your project:

yarn add <user>/<repo>.git#<name>

Remember to replace <user>, <repo> and <name> with right values.

More Repositories

1

react-navigation

Routing and navigation for your React Native apps
TypeScript
23,453
star
2

react-native-safe-area-view

⚠️ Deprecated: use the successor react-native-safe-area-context instead!
TypeScript
660
star
3

hooks

React hooks for convenient react-navigation use
TypeScript
576
star
4

stack

Stack navigator for React Navigation
TypeScript
391
star
5

tabs

Tab navigators for React Navigation
TypeScript
327
star
6

react-navigation.github.io

Home of the documentation and other miscellanea
JavaScript
311
star
7

redux-helpers

Redux middleware and utils for React Navigation
JavaScript
295
star
8

material-bottom-tabs

A Material Design bottom tab navigator for React Navigation
TypeScript
174
star
9

animated-switch

A switch navigator but with transitions between screens powered by the react-native-reanimated Transitions API
TypeScript
159
star
10

drawer

Drawer navigator for React Navigation
TypeScript
144
star
11

search-layout

A basic search screen layout for usage with React Navigation.
JavaScript
125
star
12

web

Tools for react-navigation on web browsers and servers
JavaScript
95
star
13

rfcs

RFCs for changes to React Navigation
88
star
14

experimental-transitioner

A navigator for custom screen transitions with React Navigation and React Native
JavaScript
73
star
15

deep-linking-example

Example of usage of deep linking for blog post in React Navigation
TypeScript
67
star
16

core

Core utilities for the react-navigation framework shared between the native and web implementations.
JavaScript
62
star
17

native

React Native support for React Navigation. You probably don't need to use this directly, it's included in the react-navigation package.
JavaScript
46
star
18

web-server-example

Example for react-navigation and server-side rendering
JavaScript
44
star
19

create-react-app-example

Example create-react-app using react navigation
JavaScript
38
star
20

reanimated-stacks

TypeScript
21
star
21

boilerplate

Boilerplate app using React Navigation
TypeScript
13
star
22

theme-example

An example project with themes
Objective-C
12
star
23

ci-webhook

JavaScript
3
star
24

check-versions-action

Check for missing or outdated versions of packages mentioned in the issue
JavaScript
3
star
25

bot

A GitHub bot for react-navigation issues (currently unused)
JavaScript
2
star
26

deprecated-tab-navigator

Don't use this unless you have to. You will know if you have to
JavaScript
2
star
27

react-navigation-4

Code of React Navigation 4 for archiving
TypeScript
1
star