Sign in Go Pro

Advanced React Native

Encapsulating Functionality with a Render Prop

This lesson is for PRO members.

Upgrade today to get access to all the PRO lessons.

Unlock this lesson

Up next



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 FlatList.

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 BounceIn React component
  • Copy all the initial animation from TodoItem into BounceIn
  • Use BounceIn instead of the todo item in the flat list renderRow method; which will animate the todo items
  • Convert TodoItem to a stateless functional component, now that all the animation code and state has been removed from it





There are no comments on this lesson, start the conversation below ...

You need to go PRO to post comments.

Lessons in Advanced React Native