Tabs & Custom Transition

[ev3nst]

is it possible to implement custom transition for tabs other than swipe. for example Fade In or Zoom In

Example

// Fade In Transition
export function fadeIn(layout, position, scene) {
    const {
        index
    } = scene;
    const opacity = position.interpolate({
        inputRange: [index - 1, index],
        outputRange: [0, 1],
    });
    return {
        opacity
    };
}

// This only works when Actions is called between other tabs
<Scene
    key="root"
    hideNavBar
    transitionConfig={() => ({
        screenInterpolator: (props) =>
            { return this.determineTransition(props) }
    })}

    <Tabs
        key="main"
        transition="fadeIn"

Version

Tell us which versions you are using:

• react-native-router-flux v4
• react-native v0.55.4

[ibraheeamm]

Custom transition can be achieved by writing your own or using Animations defined in
CardStackStyleInterpolator from react-navigation library as used in the Sample Project.
Refer to these issues to know how to write custom animations:
#2628
This one is in react-navigation repo but it has really good example for writing custom animation
react-navigation-issue1490
also you must use transitionConfig in all scenes to apply the transition

[aksonov]

@ibraheamkh Great answer, thanks! Closing this ticket