React Native: renderItem component to Custom FlatList as a prop? (like Vue slots)

Question

I want to have a reusable FlatList component, basically a wrapper I can pass a custom component as an item to render, and I want to pass this component as props, this is easily done in vue..js with scoped/slots.

Is there a way to do this in react native?

<View style={{ flex:1 }}>
        <FlatList  style={{ width:'100%'}}  data={props.data} keyExtractor={item => item.id.toString()}
            renderItem={({ item, index }) => 
            <PropComponent item={item}></PropComponent>}
        />
    </View>

In example above PropComponent would be passed to CustomFlatList like this:

<CustomFlatList>
     <PropComponent></PropComponent>
</CustomFlatList>
```

Answer 1

Use this way

// CustomFlatList.js

const { ...rest } = props;

<View style={{ flex:1 }}>
        <FlatList  
           style={{ width:'100%'}}  
           data={props.data} 
           keyExtractor={item => item.id.toString()}
           {...rest}
        />
</View>

Usage like

itemView = ({ item, index }) => {
 return <PropComponent item={item} />
}

<CustomFlatList renderItem={itemView} />