Skip to content
This repository was archived by the owner on Feb 25, 2020. It is now read-only.

Release 2.0.0-alpha.0

Pre-release
Pre-release

Choose a tag to compare

View all tags
@satya164 satya164 released this 14 Jun 19:06
· 253 commits to master since this release
v2.0.0-alpha.0
0f14f09

2.0.0-alpha.0 (2019-06-14)

This release is a rewrite of the stack navigator for improved animations and gesture performance.

Upgrade instructions

Installation

Open a Terminal in the project root and run:

yarn add react-navigation-stack@alpha

If you are using Expo, you are done. Otherwise, continue to the next step.

Install and link react-native-reanimated. To install and link it, run:

yarn add react-native-reanimated
react-native link react-native-reanimated

BREAKING CHANGES

Library exports

The library now exports the following items:

  • createStackNavigator
  • Assets
  • Header
  • HeaderTitle
  • HeaderBackButton
  • CardStyleInterpolators
  • HeaderStyleInterpolators
  • TransitionPresets
  • StackGestureContext

The following components now receive different set of props, so if you use them, or use your own custom component, you will need to update them:

Header (header option)

  • mode - mode of the header, 'float' or 'screen'
  • scene - scene object for the screen the header is shown for
  • previous - scene object for previous screen
  • navigation - the navigation prop
  • styleInterpolator - style interpolator function for the header

HeaderBackButton (headerLeft option)

  • disabled
  • onPress
  • pressColorAndroid
  • backImage
  • tintColor
  • label
  • truncatedLabel
  • labelVisible
  • labelStyle
  • allowFontScaling
  • onLabelLayout - callback to measure the layout of the label
  • screenLayout - layout of the screen
  • titleLayout - layout of the title text in the header

Stack navigator options

The following configuration options have been removed:

  • headerLayoutPreset
  • headerTransitionPreset
  • transitionConfig

The transition configuration is revamped. The library exports several presets under the TransitionPresets export, but its straightforward to write a custom transition preset.

A transition preset consists of following properties:

  • direction - direction of the gesture, vertical or horizontal
  • transitionSpec - an object with a open and close property which contains the animation config for opening and closing a screen respectively
  • cardStyleInterpolator` - function which returns interpolated styles for the card. It can contain the following properties:
    • containerStyle
    • cardStyle
    • overlayStyle
    • shadowStyle
  • headerStyleInterpolator - function which returns interpolated styles for the header. It can contain the following properties:
    • leftLabelStyle
    • leftButtonStyle
    • rightButtonStyle
    • titleStyle
    • backgroundStyle

All the properties in a preset can be specified in the stack navigator's config to customize the screen transition.

navigationOptions

The following navigationOptions have been removed:

  • headerTransparent - use headerStyle instead
  • headerForceInset - use headerStatusBarHeight instead
  • gestureDirection - use direction in stack configuration instead

The headerRight and headerBackground options now accept a function returning a React Element instead of a React Element directly to keep consistency with other options.

The following navigationOptions have been added:

  • animationEnabled - whether transition animation should be enabled for a screen, true by default

Known issues

  • react-native-screens integration is broken
Assets 2
Loading