CODEWITHSUNDEEP
react-native
silviajoy
silviajoy

Reputation: 42

React Native styling SectionList: header and item in same row

I am new to React and React Native and I am exploring its Components.

Is it possible to style SectionList so that you have the section title and the content on the same row?

Example

I tried styling the SectionList with flexDirection: row, but it seems useless: https://snack.expo.io/H1ZiFXDJM

Thanks!

Upvotes: 1

Views: 3837

Answers (2)

aLIEz
aLIEz

Reputation: 1196

Yes you can, but there is a warning using SectionList with flexwarp.

https://github.com/facebook/react-native/issues/15772

Code: 

<SectionList
  contentContainerStyle={styles.listContainer}
  renderItem={({item}) => <Text style={styles.itemSquare}> {item.key} </Text>}
  renderSectionHeader={({section}) => <Text> {section.title} </Text>}
  sections={[
    {title: "A", key:"A", data:[{key:"Sana"}, {key:"Dahyun"}]},
    {title: "B", key:"B", data:[{key:"Nayeon"}, {key:"Momo"}, {key:"Tzuyu"}]},
    {title: "C", key:"C", data:[{key:"Chaeyoung"}, {key:"Jihyo"}]},
    {title: "D", key:"D", data:[{key:"Jeongyeon"}, {key:"Mina"}]},
  ]}
/>

const styles = StyleSheet.create({
  listContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  itemSquare: {
    textAlignVertical: "center",
    backgroundColor: '#CCC',
    margin: 5,
    height: 50
  }
});

Result:

enter image description here

Upvotes: 3

Ilario
Ilario

Reputation: 6079

I don't think this is the proper functioning of the SectionList.

I think you could achieve this with a FlatList and pass it an object like this:

<View style={{ flexDirection: 'row' }}>
   <View>
     <Text>Section Header</Text>
   </View>
   <View>
     <Text>Section Item</Text>
   </View>
</View>

Obviously the array must be united and not split as in the SectionList

Upvotes: 0

Related Questions