Create an Expanding Notify Input with Success Message in React Native

InstructorJason Brown

Share this video with your friends

Send Tweet

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.

hj.park
~ 4 years ago

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?