How to use FlatList to render heterogenous data in react-native?

Question

I have two types of data one is a list of Transactions and the other are some details of the User. Since these are different types of data. How do I render them inside the same FlatList?

Sample transactionData = [{amount: 200, date: '2020-08=02', desc: 'bill'}, {amount: 200, date: '2020-08=02', desc: 'bill'}]

Sample userData = {name: 'John Doe', gender: 'Male'}

Answer 1

write render item function to deal with it

const renderItem = ({item})=>{
  if(//checkIfType1){
    return(<Type1Component data={item} />)
  }
  return(<Type2Component data={item}/>)
}

and use that function in renderItem attribute

renderItem={renderItem}