Custom Transitions in React Navigation

Daniel Merrill
Dec 7, 2017 · 10 min read
routes: [
{ index: 0, ...route0Data },
{ index: 1, ...route1Data },
{ index: 2, ...route2Data } // <-- currently viewing
]

App Setup

const App = StackNavigator({
Go: { screen: GoScreen },
}, {
initialRouteName: 'Go',
transitionConfig,
})

Setting up transitionConfig

Creating custom transition animations

Interpolation

animatedValue.interpolate({
inputRange: [0, 1],
outputRange: [0, 100]
})
animatedValue.interpolate({
inputRange: [0, 0.5, 1],
outputRange: [0, 10, 100]
})
We can fine-tune our animations by creating custom interpolations.

Interpolating the value of ‘position’

const opacity = position.interpolate({        
inputRange: [thisSceneIndex - 1, thisSceneIndex],
outputRange: [0, 1],
})
Note that screenInterpolator doesn’t apply to the header

An over-the-top example


A more practical example

Navigating forward/back by single screens animates from right like usual, but going back multiple screens drops current screen downward to reveal screen navigated to.

Final thoughts

Async

Async Technology Blog

Daniel Merrill

Written by

Software Developer at asy.nc

Async

Async

Async Technology Blog