In this lesson we'll create a notify button that expands from the middle to show a TextInput
with a send button and once sent will hide the TextInput
and show a thank you message. We'll use the helper method StyleSheet.absoluteFill
to position our input inside of our wrapping View
. This allows us to animate our TextInput
and our messages in and out without effecting layout of each other.
When pressed to show the TextInput
and when we show the thank you message a combination of animating the width and justifyContent: "center"
to make it appear as if we're animating the view from the center. We'll use Animated.timing
and a success
boolean on state to control what is rendered, and what is animating. interpolate
will be used heavily to scale in and out views when they are needed.
Thank you for these nice tutorials. I've learned a lot how to use animation in many ways. In this tutorial, it shows the animation great when I click "notify me" but when I click the send button it gives me an error with "Style property 'width' is not supported by native animated module" I thought the problem is in handleSend function so I changed onPress function of send button to console log. However, it gives me a same error again. Would you mind if you let me know the reason?