Animatable.Text wraps vertically at edge of display

[oblador]

Animatable.Text wraps vertically at edge of display

[oblador]

Do you mean that it line wraps? Can you post a gif of the effect with the image and the code you are failing with?

[ackdav]

ah lol yes the correct way of saying that would be it line wraps.. English is not my first language 😄

something like:

<Animatable.Text
             transition={['marginTop', 'marginLeft']}
             duration={500}
             style={this.state.target}> Activate your app </Animatable.Text>

this.state={
      target: {
                 marginTop: windowSize.height/2.5,
                 marginLeft: windowSize.width*2,
             }

const animationSequence = [
         {
             func: () => this.setState({target: {marginTop: windowSize.height/2.5 }}),
             duration: 500
         },
...

executeAnimationSequence(animationSequence) {
      let duration = 0;

      animationSequence.map((animation) => {
          duration += (animation.duration + (animation.delay || 0));
          this.timeouts.push(setTimeout(animation.func, duration - animation.duration));
    });
    }

code is basically copied from here

[oblador]

Hi, you should use translateX instead if you just want to move something. Alternatively you can use the predefined animation slideInRight.

[ackdav]

@oblador thanks! if I use slideInRight line wrapping doesn't occur. But then my previous "issue" appears again: how can I do multiple animations after another with the same object?

[oblador]

You should translate the view, not change margins as margins will change the width of the view. Try using translateX like I wrote before.

[ackdav]

somehow can't get it to work.. same if I translate the view. I can get a transition to work when the style is coupled to a state change or similar. I want a text to slideInRight into the middle, wait a few milliseconds, translateY up and then display a few other things.

[ackdav]

Not really solved it but good enough for the moment - designed it now differently than intended here