Render Prop is the technique of passing a component to another component via a prop. That prop is often called
render, or some variation of render, like the
renderItem prop on
A render prop is especially useful when there is a wrapping component that wants to pass values to the prop component. We will use that ability to make a new component called
BounceIn that will calculate the animated height and padding for the todo item, and will pass that to the
TodoItem component via arguments to the render prop.
Once all the animation code is out of
TodoItem, we can then convert it to a stateless functional component - which is an example of how the render prop technique can be useful.
Summary of Content:
- Make a new
- Copy all the initial animation from
BounceIninstead of the todo item in the flat list renderRow method; which will animate the todo items
TodoItemto a stateless functional component, now that all the animation code and state has been removed from it