Before render props where used to stitch stateful and non-stateful components together, they were used in React Native for rendering lists.

This pattern borrows from the iOS notion of delegation. And remember, “render prop” == “React-branded delegation”. Here’s what that looks like to in React Native:

<FlatList data={someArray} renderItem={(item) => <Text>{item}</Text>} />

This component takes data as a prop and a iterator callback to map over it with. A simplified implementation looks like this:

function FlatList({ data, renderItem }) {
  return <>{data.map(renderItem)}</>;
}

By giving the component consumer control of both the input and output, we’ve made this List component generic and reusable.

Take it home

In this CodeSandbox you’ll find a PokemonList component that fetches a list of Pokemon and exposes them via render prop. Extract the rendered list into a generic List component. Remember, that component should take both data and the iterator callback needed to transform it.