React native render from props

Question

I have a very simple question but I cannot make it work. I'm making a new component and I want to pass content by props. I have the following code:

<FlatList
data={[{key: 'a'}, {key: 'b'}]}
renderItem={
({item}) => <SwiperRow item={item} 
renderMain={({item})=><View style={{height: 60}}>
<Text style={{color: 'white'}}>Item Main
</Text></View>)}
/>

And SwiperRow has it code inside

<View style={[styles.main]}>
{this.props.rederMain}
</View>

But nothing is being render. Am I doing something wrong?

Answer 1

You need to call renderMain:

<View style={[styles.main]}>
  {this.props.renderMain()}
</View>

so that it computes and returns the markup