A (Renewed) Path to React Navigation V1

September 12, 2017

It’s been awhile since the last post on this blog and I wanted to take a moment to bring everyone up to speed on what’s been going on with React Navigation.

This project got big really fast: as the officially recommended navigation library for React Native, thousands of developers are using the project every day to build apps.

Having such a broad usage, the repository has a lot of new questions, feature requests, and (as with any library) bugs. It’s gotten a bit out of hand (thus hard to manage) so I wanted to give you an overview of how we’re trying to get things moving forward again resulting in a stable V1 release.

Issues

If you've looked at the project over the last few months you've probably seen that there are a lot of open issues. If you've looked closely over the last few weeks you may have noticed that it's a few hundred less - progress!

I wanted to tell you about how we’re addressing the GitHub issues: in an effort to reduce the cognitive load associated with so many open issues we've set out to accomplish a few things:

Label all issues
Close any "question" type issues. The idea here is to keep GitHub issues focused on bugs & feature requests. StackOverflow and Reactiflux are better places for questions.
Eliminate duplicate issues
Of the remaining issues determine bugs & features necessary for V1

Don't hesitate to open new issues but please do follow the issue template! 😄

Pull Requests

We greatly appreciate all the time put into each and every one of them but, as with issues, there's a bit of a backlog to work through.

We encourage PRs but we want you to know that we’re prioritizing bug fixes and feature requests that align with the new 1.0 roadmap (see next section). We want to focus on the highest impact features for the community as a whole.

A New Roadmap

We’re happy to say we’ve put together a new roadmap to version 1.0 of this package! You can see what will be included by checking out this issue.

How do we decide on what to include in the revised V1.0?

We had conversations with people using React Navigation in production, looked at issues with the most reactions, reviewed high quality pull requests, and talked with the community to see what was needed.

Will V1.0 cover everyone’s uses? No. But it should cover most use cases and we hope to improve documentation enough that you’re comfortable and able to customize React Navigation to your needs.

Roles & Responsibilities

Just like any other organization - no one person can do everything. It’s helpful to have defined roles & responsibilities so that others know who to ask and we can avoid becoming overwhelmed.

This is something I want to adopt for the management of React Navigation. I hope it reduces the likelihood of burnout for those that have chosen to dedicate time to the project. With that in mind here are the roles a few primary contributors have chosen to take on:

davepack - Pull request review, development
GantMan - Issue management, testing
kelset - Issue management, pull request review
matthamil - Pull request review, issue management
skevy - Pull request review, release management
spencercarli - Documentation, issue management

Expo has expressed that React Navigation V1.0 is a priority for them and has committed one of their engineers (Dave) to aid in that.

The Community Navigation Library

React Navigation is the React Native community’s navigation library with that being said - you too can contribute!

If you see someone's question - try to answer it! If you have thoughts on a potential API for a requested feature - share it! If you think you know the cause for a bug - explain it!

Regardless of what you do though, be nice & remember that on the other side of the screen there is another developer, just like you…

Personally, I enjoy some shade thrown my way, but I might be in the minority 😉.

Thanks for reading and I look forward to working with you on React Navigation!

Spencer Carli

Thanks to Matt Hamill & Lorenzo Sciandra for reviewing.

On the path to React Navigation V1

April 26, 2017

React Navigation

When we announced React Navigation earlier this year, the core team was blown away at the community's overwhelming excitement and support for the new project. Since the launch in late January, hundreds of contributors have sprung up, reported detailed issues, and committed important fixes to the library.

With several community members preparing to put apps in production, the highest priority for the core team is to refine the final v1 API, and stabilize it to make sure your apps feel rock-soild.

Today we're excited to announce the release of beta 9, which iterates upon the initial API. Although you will need to modify your screen navigation options for this upgrade, we are very confident in the new API. Our goal for future v1 releases is to avoid making any breaking API changes - we are now focused on filling in essential missing features, and stabilization.

The community has experienced some thrash by a few of our earlier beta releases. So, starting with this release, we will include detailed release notes about any API changes, new features, and bug fixes.

After the stabilization and release of v1, we're excited to explore new ways of customizing transitions, and overriding navigation components. There are some exciting proposals about these new APIs, and we look forward to the community's feedback and involvement.

Introducing React Navigation for React Native

January 26, 2017

Eric Vicenti

Today we're excited to introduce React Navigation, a flexible navigation library for React Native and web, including customizable views for React Native, routers for any platform, and navigators that make it super easy to get started. We aim to provide a simple and extensible solution which enables developers to share one navigation paradigm for all of their React apps.

Start Quick with pre-built Navigators

A navigator is a React component with a static .router declared on it. To make it super easy to get started, React Navigation ships with a few navigator factories, pairing common views with routers.

For example, the provided StackNavigator makes it easy to use a CardStack view and a StackRouter together:

const MyApp = StackNavigator({
  Home: {screen: HomeScreen},
  Profile: {screen: ProfileScreen},
});

Each of these screens are just React components, and they can easily set their own title:

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Home',
  };
  render() {
    const { navigate } = this.props.navigation;
    return (
      <Button
        onPress={() => navigate('Profile', { name: 'A' })}
        title="Go to A's profile"
      />
    );
  }
}

To learn more, continue with the getting started guide.

Performant Views on React Native

Animations and gestures are critical for smooth navigation in a mobile app. React Navigation utilizes React Native's Animated library to provide 60fps animations that are driven from the native thread.

The views are designed to be highly extensible. For your app, you may want to build a custom modal, fork the stack header, or even utilize the underlying <Transitioner> component to build an entirely custom navigation presentation.

Routers for Every Platform

In React Navigation, routers manage the relationship between actions, state, and URIs. The routers are cross-platform, and there is example code for iOS, Android, and web. Several routers are included, including TabRouter and StackRouter, and it is encouraged to override their behavior as needed.

The routers are composable and can be useful for structuring your app. A common navigation structure in iOS is to have an independent navigation stack for each tab, where all tabs can be covered by a modal. This is three layers of router: a card stack, within tabs, all within a modal stack. So unlike our experience on web apps, the navigation state of mobile apps is too complex to encode into a single URI. Routers in react-navigation map from URIs to navigation actions, which are then used to compute navigation state.

Future

React Navigation is born from the React Native community's need for an extensible yet easy-to-use navigation solution. It replaces and improves upon several navigation libraries in the ecosystem, including Ex-Navigation and React Native's Navigator and NavigationExperimental components.

Until the community lands on one navigation solution that works well on the web and React Native, we will forever be destined to re-invent navigation. We are extremely sensitive about the burden of change that accompanies a new navigation library, so we aim to provide a solution that will work long into the future. We are excited to support React Navigation for any platform, including cutting-edge frontiers like hybrid native apps, web server rendering, and ReactVR.

The first beta of React Navigation is available today on npm and GitHub, and you can get started here. We're excited to hear feedback from the React community, and together we still have a long way to go before our dream is realized. We'd love to see the community flourish with beautiful navigation views, custom router integrations, and more easy-to-use navigators. All of these individual contributions can work together seamlessly. If you have improvements for the built-in components, please follow the contributors guide and dive right in!