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

Release 2.0.1
Compare
Choose a tag to compare
@satya164 satya164 released this 01 Jan 16:53
· 41 commits to master since this release
v2.0.1
3515d5c

2.0.1 (2020-01-01)

BREAKING CHANGES

In this release, we decided to move several options into navigationOptions so that you can configure options per screen instead of per navigator. This lets you do things like customize animations for a particular screen, set options based on screenProps etc. Usage of built-in components such as Header and HeaderBackButton has also been simplified. Other changes are made to improve consistency within the API.

From this version, all state changes have an animation, including replace and reset which didn't do an animation previously. If you don't want animations, you can specify animationEnabled: false in navigationOptions for a specific screen, or in defaultNavigationOptions for the whole navigator.

Note: The alpha versions for 2.0 used Reanimated for the animations. We've replaced Reanimated with React Native's Animated API in the stable release. If you did any custom animations with the alpha, please migrate your code to the Animated API.

New peer dependencies

The new version requires 2 new peer dependencies. Install them in your project:

yarn add react-native-safe-area-context @react-native-community/masked-view

Or

npm install react-native-safe-area-context @react-native-community/masked-view

Stack Navigator config

The following configuration options have been removed or moved:

  • cardShadowEnabled - moved to navigationOptions
  • cardOverlayEnabled - moved to navigationOptions
  • cardStyle - moved to navigationOptions
  • transparentCard - removed in favor of cardStyle: { backgroundColor: 'transparent' } in navigationOptions
  • headerBackTitleVisible - moved to navigationOptions
  • headerLayoutPreset - moved to navigationOptions as headerTitleAlign
  • onTransitionStart - moved to navigationOptions
  • onTransitionEnd - moved to navigationOptions
  • headerTransitionPreset - removed in favor of new APIs for animations in navigationOptions
  • transitionConfig - removed in favor of new APIs for animations in navigationOptions

navigationOptions

The following navigationOptions have been removed or changed:

  • headerForceInset - use safeAreaInsets instead
  • gesturesEnabled - renamed to gestureEnabled for consistency
  • header - now accepts a function returning react element instead, use headerShown: false instead of header: null to hide the header
  • headerTitle - now accepts a function returning a React element or a string
  • headerLeft - now accepts a function returning a React element
  • headerRight - now accepts a function returning a React element
  • headerBackImage - now accepts a function returning a React element
  • headerBackTitle - now specifies the back title visible in current screen instead of next, specifying null no longer hides back title, use backTitleVisible instead, for a screen to change next screen's back title, it can pass params
  • headerBackground - now accepts a function returning a React element

The following navigationOptions have been added:

  • gestureEnabled
  • animationEnabled
  • headerTitleAlign
  • cardShadowEnabled
  • cardOverlayEnabled
  • cardStyle
  • headerBackgroundStyle
  • headerBackTitleVisible
  • swipeVelocityImpact
  • onTransitionStart
  • onTransitionEnd

You can find more details about these options in the documentation.

Library exports

The library now exports the following items:

  • createStackNavigator
  • StackView
  • Header
  • HeaderTitle
  • HeaderBackButton
  • CardStyleInterpolators
  • HeaderStyleInterpolators
  • TransitionSpecs
  • TransitionPresets
  • StackGestureContext
  • StackAnimationContext

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
  • layout
  • scene
  • previous
  • navigation
  • styleInterpolator

HeaderBackButton (headerLeft option)

  • disabled
  • onPress
  • pressColorAndroid
  • backImage
  • tintColor
  • label
  • truncatedLabel
  • labelVisible
  • labelStyle
  • allowFontScaling
  • onLabelLayout
  • screenLayout
  • titleLayout
  • canGoBack

Removal of Transitioner

The old Transitioner component has been removed as a result of rewrite of the animation logic. We're not going to expose the new animation logic since it's internal implementation detail and we want to be able to change it without breaking your code. If you need Transitioner in your project for some reason, you can copy the old files into your project https://github.com/react-navigation/stack/blob/1.0/src/views/Transitioner.tsx

Assets 2
Loading