Skip to content

v1.0.0-beta.9
Compare
Choose a tag to compare
@grabbou grabbou released this 26 Apr 22:02
· 2920 commits to main since this release
v1.0.0-beta.9
004e963

Over the past month, we have closed over 300 issues, most of them being questions. Understanding the confusion people had around the available API has helped us to develop a bunch of improvements that should make working with React Navigation more pleasant.

Today, we are releasing a new version of React Navigation. It is a huge step towards our first stable release. The API is in a nearly final stage and our focus now is on increasing the overall stability of the library.

The reason this release took so long is that we wanted to better understand the way users are using the library and ship breaking changes (if any) only once.

Breaking changes

Navigation options are now flat

93976d3 - @grabbou

Options are now flat and merged key-by-key. That said, it is no longer needed to manually extend default options.

Before:

{
  title: 'My screen',
  header: (_, defaultHeader) => ({
    ...defaultHeader,
    tintColor: 'black',
  }),
};

Now:

{
  title: 'My screen',
  headerTintColor: 'black',
};

New API for dynamic navigation options

93976d3 - @grabbou

Navigation options can now be a function that receives same props that are available to the screen component.

Before:

{
  title: 'My screen',
  header: (navigation) => ({
    ...header,
    tintColor: 'black',
  }),
};

Now:

({ navigation, screenProps }) => ({
  title: 'My screen',
  headerTintColor: 'black',
});

header.visible is now header: null

2b24492 - @grabbou

Header can be now configured on per screen basis with header navigation option. You can hide it by setting it to null for an arbitrary screen.

Before:

{
  header: {
    visible: false,
  },
}

Now:

{
   header: null,
}

Static components are gone

a252b46 - @grabbou

All components are now exposed through main interface rather than static properties on different screens.

Before:

import { CardStack, DrawerView } from 'react-navigation';

console.log(CardStack.Header.BackButton);
console.log(DrawerView.Items);

Now:

import { HeaderBackButton, DrawerItems } from 'react-navigation';

console.log(HeaderBackButton);
console.log(DrawerItems);

lazyLoad is now lazy for TabView

0cd3eaa - @satya164

Now, the TabNavigatorConfig matches props passed to react-native-tab-view.

Before:

TabNavigator({...}, {
  lazyLoad: true,
});

Now:

TabNavigator({...}, {
  lazy: true,
});

onNavigationStateChange can now be only set on a top-level navigator

a252b46 - @grabbou

It is no longer possible to subscribe to state changes for navigators that receive their navigation prop from outside, e.g. from Redux or a parent navigator.

Before:

render() {
  return <MyNavigator navigation={...} onNavigationStateChange={() => console.log('Changed')} />
}

Now:

componentDidUpdate() {
  console.log('Changed')
}

render() {
  return <MyNavigator navigation={...} />
}

Static containerOptions are now gone

a252b46 - @grabbou

Top-level navigator can be now configured with props, just like any other React component.

Before:

StackNavigation({...}, {
  containerOptions: {
    URIPrefix: '',
  },
});

Now:

const MyNavigator = StackNavigation({...});

render() {
  return <MyNavigator uriPrefix={''} />;
}

cardStack.gesturesEnabled is now gesturesEnabled

93976d3 - @grabbou

Before:

{
 cardStack: {
   gesturesEnabled: false,
 },
}

Now:

{
  gesturesEnabled: false,
}

New features

Support for latest React Native

We now support latest React Native release (0.43).

Built-in logger can be now disabled

0f6b328 - @grabbou

You can now turn off built-in logger by overriding default onNavigationStateChange for any top-level navigator.

render() {
  return <MyNavigator onNavigationStateChange={null} />;
}

Header can be now set on per screen basis

2b24492 - @grabbou

You can now define either a React.Element or a function, that given HeaderProps returns such element, by doing:

class MyScreen extends React.Component {
  static navigationOptions = {
    header: <Text>My header</Text>,
  };
}

Add a config to override the truncated back title

c384e33 - @fson

You can now define the string used by the back button when headerBackTitle doesn't fit on the screen.

{
  headerBackButton: 'Go home',
}

Add a config to define color for material ripple on Android

31c5384 - @jamieparkinson

You can now define a color for material ripple on Android to be used for a header back button.

{
  headerPressColorAndroid: 'red',
}

Automatically generate propTypes

e2f5e7f - @grabbou

We now generate propTypes out of flow type definitions automatically. That should improve developer experience and
resolve issues where propTypes were invalid.

Add iconStyle option for TabBarTop

96a34db - @navid94

You can now define a custom style for an icon without defining a whole new TabBar component.

TabNavigator({...}, {
  tabBarOptions: {
    iconStyle: {},
  },
};

Add labelStyle option for DrawerViewItems

3cee5c3 - @alimek

You can now define a custom style for an item displayed in the Drawer without defining a whole new contentComponent.

DrawerNavigator({...}, {
  contentOptions: {
     labelStyle: {},
  },
});

Redux docs and examples are now much improved

5c12c41 - @cooperka

We have shipped numerous updates to the official Redux example and its documentation. It should be now much easier and less error-prone to use Redux with React Navigation.

We also now automatically test Redux example on CircleCI making sure we no longer break examples when working on features.

Fix eslint issues and use prettier

bbe9caf - @grabbou

We now use prettier which provides a consistent style throughout the codebase. All pull requests that contain style issues will now automatically fail on CircleCI.

You can fix all the style issues by running:

npm run format

before submitting a pull request.

Fixes

For the full list of changes, please see the commit log.

Assets 2
Loading