CODEWITHSUNDEEP
animationreact-nativenavigation
Manspof
Manspof

Reputation: 357

react native navigation custom animated transition

I'm using react native v0.49 and I'm trying to implement custom transition when navigate to other page. what I'm trying to do is to make transition only for one scene from scene 2 to scene3. but not for all the app. this example I found it's for all web so I want to make just for one screen and for all the app because if I do that way it will effect for all the app and it's not what I'm looking for. any idea?

    class SceneOne extends Component {
    render() {
        return (
            <View>
                <Text>{'Scene One'}</Text>
            </View>
        )
    }
}
class SceneTwo extends Component {
    render() {
        return (
            <View>
                <Text>{'Scene Two'}</Text>
            </View>
        )
    }
}


let AppScenes = {
    SceneOne: {
        screen: SceneOne
    },
    SceneTwo: {
        screen: SceneTwo
    },


SceneThree: {
            screen: SceneTwo
        },
}

let MyTransition = (index, position) => {
    const inputRange = [index - 1, index, index + 1];
    const opacity = position.interpolate({
        inputRange,
        outputRange: [.8, 1, 1],
    });

    const scaleY = position.interpolate({
        inputRange,
        outputRange: ([0.8, 1, 1]),
    });

    return {
        opacity,
        transform: [
            {scaleY}
        ]
    };
};


let TransitionConfiguration = () => {
    return {
        // Define scene interpolation, eq. custom transition
        screenInterpolator: (sceneProps) => {

            const {position, scene} = sceneProps;
            const {index} = scene;

            return MyTransition(index, position);
        }
    }
};

class App extends Component {
    return (
        <View>
            <AppNavigator />
        </View>
    )
}

Upvotes: 0

Views: 17078

Answers (1)

Jason Gaare
Jason Gaare

Reputation: 1511

Here's an example of how we do it, you can add your own transitions to make it your own. Our goal was simply to expose the baked-in transition configurations to have more control over the animations. Our transition configuration: https://gist.github.com/jasongaare/db0c928673aec0fba7b4c8d1c456efb6

Then, in your StackNavigator, add that config like so:

StackNavigator(
  {
    LoginScreen: { screen: LoginScreen },
    HomeScreen: { screen: HomeScreen },
  },
  {
    stateName: 'MainStack',
    initialRouteName: 'HomeScreen',
    initialRouteParams: { transition: 'fade' },
    transitionConfig: TransitionConfig,
   }
);

Finally, when you navigate, just add your params when you navigate:

this.props.navigation.navigate('HomeScreen', { transition: 'vertical' })

Upvotes: 9

Related Questions