React-native-reanimated: Can't change transition sequence once initialized

[qalqi]

Hi,
I've noticed that once a Transition.view is initialized, we can't update transition to new transition style. Here is an Example code to replicate the issue

import React, { Component } from 'react';
import { Transitioning, Transition } from 'react-native-reanimated';

const transitionSlideIn = (
    <Transition.Sequence>
        <Transition.Out type="slide-left" />
        <Transition.Change interpolation="easeInOut" />
        <Transition.In type="slide-right" />
    </Transition.Sequence>
);

const transitionSlideOut = (
    <Transition.Sequence>
        <Transition.Out type="slide-right" />
        <Transition.Change interpolation="easeInOut" />
        <Transition.In type="slide-left" />
    </Transition.Sequence>
);
class Example extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isSlideIn: true
        };
        this.ref = React.createRef();
    }

    componentDidUpdate(prevProps) {
        if (this.props.isSlideIn != prevProps.isSlideIn) {
            this.setState({ isSlideIn: isSlideIn }, () => { this.ref.current.animateNextTransition(); })
        }
    }

    render() {
        return (
            <Transitioning.View
                transition={this.state.isSlideIn ? transitionSlideIn : transitionSlideOut}
                style={{ flex: 1 }}>
                {this.props.children}
            </Transitioning.View>
        )
    }
}

export default Example;

[HPieters]

@qalqi Did you find a solution or other way of solving this? I encountered the same "issue" today as I want the transition in my app to be different between "authStack" -> "appStack" and "appStack" -> "authStack".

[qalqi]

No.

[FRizzonelli]

@osdnk Is it possible to make the transition definition dynamic? (for example based on some property saved in the state). This feature would be super useful I think!

[adkenyon]

I have a proposed alternative in #606 .

The only other solution (which didn't work in my case) was to put a key property on the Transitioning.View and fully remount the component when you want to modify the transitions. This didn't work in my case as we have a number of animations and tasks that run on mount that we couldn't retrigger.

[jakub-gonet]

We discussed Transitions internally in our team. Considering that v2 makes creating animations easier and Transitions was an experimental API for a long time, we decided to leave Transitions as they are.

We won’t actively fix bugs in them, but we’ll happily merge any PR with fixes. We’re also thinking about rewriting Transitions in v2 sometime in the future.

I’m closing this issue, but if you have further questions, I will be happy to help.