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.
Learn one way to render SVG icons as a React component. You’ll learn about the dynamic nature of SVG by passing props to a component that modify the icons properties such as colors and size.
You'll learn how to set up a stateless functional component, set up prop types and add a set of default props.
One benefit to building an individual icon component is that only the SVG markup needed for that icon will be rendered, instead of having to load an entire set of icons and only using one of them. Also, different attributes can be overridden using props, making theming and integration simple.
In this lesson we'll create a
PanResponder to allow us to drag a card around the screen. We'll use
Animated.event to automatically set the values of our
Animated.Value and when the card is released we'll use
Animated.decay to decelerate it to a stop.