CODEWITHSUNDEEP
react-nativereact-native-flatlist
Rigorous implementation
Rigorous implementation

Reputation: 470

Custom flat list items in react native

I am trying to create a flatlist with list items. I managed to build one using one of the samples from https://facebook.github.io/react-native/docs/flatlist.html.

I am trying to extend this by creating something more complicated but I am stuck. I am trying to create a flatlist with list items like below. Ofcourse I can achive this by using one of those react native libraries but I am trying to avoid using libraries instead I want to construct a flatlist component with multiple renders because this approach would give me more control of the component. Would appreciate any help with this.

enter image description here

Upvotes: 1

Views: 6145

Answers (1)

Alexander Vitanov
Alexander Vitanov

Reputation: 4141

The easiest way to achieve it is to have a Row component and based on props you determine how to render it. Example:

class Row extends React.PureComponent {

   render(){
      const { item } = this.props
      if(item.break){
         return <Text>Break</Text>
      }
      return (
         <View><Text>Normal item goes here</Text></View>
      )
   }
}

Upvotes: 1

Related Questions