tween while changing state to render.

[Chirag Jain]

I have a popup which needs to come out from bottom. popup text is dynamic and is set via state. This makes the popup height variable.

Wondering what is the right way to set the state as well as animate the popup.

Thanks for the amazing lib @chenglou 👍

[Cheng Lou]

Thanks!
I'm not too sure I see the problem if you're animating in from the bottom. That's just animating y right? Unless you mean coming from the far z axis and have its height change from 0 to the final height?

[Chirag Jain]

Sorry i was not clear in my post.

Yes, i mean just animating y, but the height is not fixed. Height is determined by the state which gives the component some height. eg: Ccomponent is made of text which is of variable height.

js <View style={styles.container}> <Text>{this.state.text}</Text> </View>
container: { position: 'absolute', left: 0, right: 0, bottom: 0, }

Initially this.state.text is empty and view is hidden.

I do this.setState: {text: 'something variable'}' I also want to tween this view to come from bottom when i set the state. I don't know the height of the component here.

Does that make sense?

[Cheng Lou]

Oh so you don't know the final value of your y because you want to vertically center it?

[Chirag Jain]

yes. final y value is not know.

Also, is it ok to be like:

this.setState({text: 'something'});
this.tweenState('bottom', {

      easing: tweenState.easingTypes.linear,
      duration: 100,
      endValue: 0
    });

[Cheng Lou]

Yes, the above is ok.

Tween-state only takes care of tweening values you provide, so how to get these values is up to you. This is by design and ensures it works on other platforms. In your case, you should probably reach into the DOM and get the box height after you've placed the text, then check window height and do the centering calculations, then pass that value as the final value to tweenState.

Does this make sense? I know it's a bit dirty, but that's the state of things for text measurement and all. You can definitely build a component on top of this to make it cleaner and declarative.

If that solves your problem, I'll close the issue.

[Chirag Jain]

yes, it does. Thanks for the help. I think i now know a way to do it.