not work with react navigation stack pakage

[mnjadidi]

in the last version of react navigation createStackNavigator import from react-navigation-stack and its not match with react-navigation-transitions

[youngjuning]

same issues

[jack828]

Hello all, until either I get around to it or the maintainer does, you can use this little snippet to convert your react-navigation-stack@~1 transitionConfig to react-navigation-stack@~2 transitionSpec:

import createStackNavigator from 'react-navigation-stack'
import { fromRight } from 'react-navigation-transitions'

const transition = fromRight() // Or whichever you prefer
const config = {
  animation: 'timing',
  config: transition.transitionSpec
}
const cardStyleInterpolator = ({ current, next, index, closing, layouts }) => {
  const { progress } = closing._value ? next : current
  const { width, height } = layouts.screen
  const containerStyle = transition.screenInterpolator({
    layout: {
      initWidth: width,
      initHeight: height
    },
    position: progress,
    scene: { index: 1 }
  })
  return { containerStyle }
}

// Usage
const Nav = createStackNavigator(
  {
    Home: HomeScreen
  },
  {
    defaultNavigationOptions: {
      transitionSpec: {
        open: config,
        close: config
      },
      cardStyleInterpolator
    },
    initialRouteName: 'Home'
  }
)

Bear in mind, I've only given it a quick try with:

• fromLeft
• fromRight
• fromTop
• fromBottom
• zoomIn
• zoomOut

so YMMV.

I couldn't immediately get it working with flipX or flipY.

The new docs for the Transition API are super confusing for me so may be some time before I get around to this.

[youngjuning]

import {
  NavigationStackConfig,
  NavigationStackOptions,
  NavigationStackProp,
  TransitionPresets,
} from 'react-navigation-stack'
import { CreateNavigatorConfig, NavigationStackRouterConfig, NavigationRoute } from 'react-navigation'

const StackConfig: CreateNavigatorConfig<
  NavigationStackConfig,
  NavigationStackRouterConfig,
  NavigationStackOptions,
  NavigationStackProp<NavigationRoute, any>
> = {
  // 跨页面共享通用的navigationOptions
  defaultNavigationOptions: {
    headerStyle: {
      backgroundColor: '#ffffff',
    }, // 一个应用于 header 的最外层 View 的 样式对象
    headerTintColor: '#000000', // 返回按钮和标题都使用这个属性作为它们的颜色
    headerTitleStyle: {
      fontWeight: 'bold',
    },
    headerBackTitleVisible: false,
    headerTitleAlign: 'center',
    ...TransitionPresets.SlideFromRightIOS, // add this line
    cardStyle: {
      backgroundColor: '#f5f5f9',
    },
  },
}

export default StackConfig

[youngjuning]

so i remove this package

[jack828]

Oh fantastic! I'll give that a go and also remove this package, one less dependency!

EDIT: Worked great, thanks again!

[arcollector]

Read here: https://reactnavigation.org/docs/en/stack-navigator.html#transitionpresets

[sean-m-oleary]

But they dont have the flipY and flipX though so its not 100% replaced