question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Can't change transition sequence once initialized

See original GitHub issue

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;

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:2
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

3reactions
FRizzonellicommented, Oct 14, 2019

@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!

0reactions
jakub-gonetcommented, Jul 28, 2020

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Can't change transition sequence once initialized #328 - GitHub
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 ......
Read more >
CSS transition doesn't animate when immediately changing ...
So the solution is to simply wrap style changes nested RAF calls (tell the browser to animate when it's ready rather than after...
Read more >
Modifying and customizing transitions in Premiere Pro
Follow these step-by-step instructions to learn how to modify and customize transitions in the Premiere Pro Effect Controls panel and ...
Read more >
Working with Transitions - Mike Bostock
While only one transition can be running simultaneously on the element, multiple transitions can be scheduled. For example, you can schedule ...
Read more >
Controlling CSS Animations and Transitions with JavaScript
Transitions in CSS are applied to an element and specify that when a property changes it should do so over gradually over over...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found