React Navigation: Applying separate transitions to scenes - react-native

Question

I want to apply different transitions to scenes in my StackNavigator in React Navigation, for my React Native (iOS) app.
export const AppNavigator = StackNavigator({
Home: { screen: Home },
NewChild: { screen: NewChild },
Journal: { screen: Journal }
});
I might want NewChild to load from the bottom up, like a modal. Or I might want it to slide in from right to left. It would great if this could be customised. From the documentation, it seems you can only set your StackNavigation to either card or modal for the whole thing.

Answer 1

Thanks to everyone in the thread, it worked for me.
I have many scenes managed by only one StackNavigator and I wanted to make a different animation for some of them.
First of all, I made myself a constant in my router which included every scenes I wanted to display with horizontal transition :
const horizontalTransitionScenes = [
AddContact,
];
After that, I designed my app router with StackNavigator :
const App = StackNavigator({
AddContact: {
screen: AddContact,
},
EditContact: {
screen: EditContact,
},
});
I used CardStackStyleInterpolator to modify the transitions between scenes. I can be imported like this : import CardStackStyleInterpolator from 'react-navigation/src/views/CardStack/CardStackStyleInterpolator';
We can now add transitionConfig params to our StackNavigator to display a different animation depending on our scenes :
const App = StackNavigator(
{
AddContact: {
screen: AddContact
},
EditContact: {
screen: EditContact
}
},
{
transitionConfig: (currentState: any) => {
if (
currentState.scenes[
currentState.scenes.length - 1
].route.routeName.includes(horizontalTransitionScenes)
) {
return {
screenInterpolator: CardStackStyleInterpolator.forHorizontal
};
}
return {
screenInterpolator: CardStackStyleInterpolator.forVertical
};
}
}
);
With that StackNavigator implementation, you will be able to display different kind of animations for the scenes you want.
Have a good day 🎉

Answer 2

As you already saw in the docs, it's not possible right now. You can track this issue and this issue requesting this feature. It's on the roadmap for v2, but since v1 isn't even released yet, your best bet is probably to either:
Implement your own transitionConfig that somehow handles this per screen. I'm not sure if this is possible.
Fork an implement something using the ideas from the main issue. Or simple make your fork specific to your code and maintain it until that issue is resolved.

Answer 3

I was able to accomplish this by doing some conditional logic, we're on react-navigation 3.3.2.
You have to import Easing and Animated from react-native and then you can conditionally render transitions for a specific screen by name, or also by index (below is by name).
By declaring the config outside the navigator, and toggling transitionSpec with an {} it will only trigger on that particular screen -- same with the conditional for screenInterpolator.
Screen1 to Screen2 has the animation, but none of the other screens have that animation.
const screen2Config = {
duration: 300,
easing: Easing.out(Easing.poly(4)),
timing: Animated.timing,
};
export const ScreenStack = createStackNavigator({
Screen1: {
screen: Screen1,
navigationOptions: ({ navigation }) => ({
headerTitle: 'Screen1',
headerTitleAllowFontScaling: false,
}),
},
Screen2: {
screen: Screen2,
navigationOptions: ({ navigation }) => ({
headerTitle: 'Screen2',
headerTitleAllowFontScaling: false,
tabBarVisible: false,
}),
},
Screen3: {
screen: Screen3,
navigationOptions: ({ navigation }) => ({
headerTitle: 'Screen3',
headerTitleAllowFontScaling: false,
}),
},
Screen4: {
screen: Screen4,
navigationOptions: ({ navigation }) => ({
headerTitle: 'Screen4',
headerTitleAllowFontScaling: false,
}),
},
}, {
headerMode: 'float',
mode: 'modal',
transitionConfig: sceneProps => ({
transitionSpec: sceneProps.scene.route.routeName === 'Screen2' ? screen2Config : {},
screenInterpolator: (sceneProps) => {
if (sceneProps.scene.route.routeName === 'Screen2') {
const { layout, position, scene } = sceneProps;
const { index } = scene;
const width = layout.initWidth;
const translateX = position.interpolate({
inputRange: [index - 1, index, index + 1],
outputRange: [width, 0, 0],
});
const opacity = position.interpolate({
inputRange: [index - 1, index - 0.99, index],
outputRange: [0, 1, 1],
});
return { opacity, transform: [{ translateX }] };
}
},
}),
});