Release 2.0.0-alpha.9

2.0.0-alpha.9 (2019-08-22)

Bug Fixes

• add left offset in header only if a left button is rendered (e481a33)
• set correct pointer events when active prop changes (980e3f4)

Features

• add 'vertical-inverted' as gesture direction (#184) (6c789bf)

Release 2.0.0-alpha.8

2.0.0-alpha.8 (2019-08-16)

Features

• add memoization of spring nodes (40a415b)

Release 2.0.0-alpha.7

2.0.0-alpha.7 (2019-08-01)

Bug Fixes

• change single param to props object in onTransition callba… (#171) (ee241aa)
• don't ignore headerLeft if specified. fixes #164 (1695290)
• reduce card gesture velocity impact (#161) (2ddf3a4)
• use a shadow instead of a border for header on iOS (04421cd), closes #97
• use MaskedView from @react-native-community/masked-view (8a4d44e)

Features

• add a canGoBack prop to header back button (3ed1b28)
• inform whether screen is opening/closing in onTransition callbacks (#169) (2d8274f)

Release 2.0.0-alpha.6

2.0.0-alpha.6 (2019-07-15)

BREAKING CHANGES

• The following options in navigationOptions have been renamed:
  • direction is now gestureDirection
  • gesturesEnabled is now gestureEnabled
• TransitionPresets.WipeFromBottomAndroid is renamed to TransitionPresets.RevealFromBottomAndroid

Bug fixes

• fix types for stack config (e22fa09)
• support a function for headerTitle (3c54291)

Release 2.0.0-alpha.5

2.0.0-alpha.5 (2019-07-08)

Bug Fixes

• don't enable screens for modal stacks (f04b9bf)
• tweak transition spec to prevent jumping effect (3f5b903)

Release 2.0.0-alpha.4

2.0.0-alpha.4 (2019-07-07)

Bug Fixes

• properly handle floating header height (68bd0f4)

Release 2.0.0-alpha.3

2.0.0-alpha.3 (2019-07-07)

BREAKING CHANGES

The following options have been moved to navigationOptions:

• direction
• transitionSpec
• cardStyleInterpolator
• headerStyleInterpolator

This allows us to specify transitions per screen instead of the whole navigator.

To preserve the old behaviour, move these properties to defaultNavigationOptions:

const MyStack = createStackNavigator(
  {
    // Screens
  },
  {
    defaultNavigationOptions: {
      ...TransitionPresets.FadeFromBottomAndroid,
	  transitionSpec: {
        timing: 'timing',
        config: {
          duration: 350,
          easing: Easing.out(Easing.poly(5)),
        },
      },
      cardOverlayEnabled: true,
      gesturesEnabled: true,
    },
  }
);

Bug Fixes

• disable react-native-screens on iOS (f43800b)
• fix back button not working in header (9d17440)
• fix border radius of modal presentation (7cecfcf)
• fix broken shadows on card (8fb0da5)
• fix typo preventing the screen from being cleaned up (f173a16)
• hide background for unfocused header in fade (1f6fc61)
• hide overflow in wipe preset (a6335bd)
• use opacity in headerStyle (ca741b6)

Features

• add on transition end callback (#153) (a32e43a)
• allow specifying style interpolators in navigationOptions (#155) (16823e3)

Release 2.0.0-alpha.2

2.0.0-alpha.2 (2019-06-21)

Bug Fixes

• don't enable overlay on iOS by default (572ab5c)
• fix header tint color not applied (6252b36)
• make sure components update when descriptor changes (70e5a40)
• support specifying header background color in headerStyle (f0244dd)
• whitelist supported styles instead of blacklist (e84d62f)

Features

• add cardX options in navigationOptions (60fc324)
• add headerBackgroundStyle option (f4031be)
• add headerBackTitleVisible option to navigation options (3c4b0eb)
• add headerTransparent option (5cf9e7e)
• add iOS modal presentation style (243839d)

Release 2.0.0-alpha.1

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

Bug Fixes

• fix header tint color not applied (6252b36)

Features

• add cardX options in navigationOptions (60fc324)
• add headerBackgroundStyle option (f4031be)
• add headerBackTitleVisible option to navigation options (3c4b0eb)

Release 2.0.0-alpha.0

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