Created
June 1, 2018 02:23
-
-
Save sergioutama/eb98079f017c69230b2dc4f539a90433 to your computer and use it in GitHub Desktop.
Multi section with horizontal FlatList
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export default class Screen extends React.Component { | |
renderItem({ item }) { | |
return <Row stall={item} didSelectRow={this.didSelectRow} />; | |
} | |
renderHorizontalSection = ({ item }) => { | |
return ( | |
<FlatList | |
data={["horizontaol_item1","horizontal_item2"]} | |
renderItem={this.renderItem} | |
horizontal={true} | |
/> | |
); | |
}; | |
render(){ | |
return ( | |
return ( | |
<SectionList | |
sections={[ | |
{ | |
data: [""], // this is just a dumy data to display 1 item | |
renderItem: this.renderHorizontalSection, | |
keyExtractor: this.keyExtractor, | |
key: "Horizontal Section", | |
}, | |
{ | |
data: ["vertical item1","vertical item2"], | |
keyExtractor: this.keyExtractor, | |
renderItem: this.renderItem, | |
key: "Vertical section" | |
} | |
]} | |
automaticallyAdjustContentInsets={true} | |
/> | |
); | |
) | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thanks .