Is it possible for section items to be in a row?

Question

I'm using SectionList in React Native to display some JSON data fetched from a URL.

<SectionList
            sections = {this.state.dataSource}
            renderSectionHeader = {({section}) => <Text style={styles.TopicNameContainer}>{section.title}</Text>}
            renderItem = {({item}) => 
                <ScrollView style={{height: 50}} horizontal={true}>
                    <ImageBackground style={{width: '100%', height: '100%', justifyContent: 'flex-end'}} source={{ uri: 'http://localhost:1337' + item.ChapterImage.url }}>
                        <Text style={[styles.ChapterNameContainer, {backgroundColor: 'rgba(255, 255, 255, 0.5)', }]}>{item.ChapterName}</Text>
                    </ImageBackground>
                </ScrollView>}
            keyExtractor = {({id}, index) => id.toString()}
/>

With the above code, it appears as such;

Section Title 1

Section Item 1.1
Section Item 1.2

Section Title 2

Section Item 2.1

However, I want it to appear as the below;

Section Title 1

Section Item 1.1 | Section Item 1.2

Section Title 2

Section Item 2.1

Where the section items above have horizontal scrolling.

I've already tried setting the ScrollList to horizontal={true} but what that does is make the whole thing into horizontal scrolling but, I don't want the Section Header to be horizonta scrolling.

Update: After some more researching, people suggested using FlatList inside the SectionList. I tried it but it's still appearing vertically.

renderItem={({ item }) => (
  <FlatList
    style={{height: 50}} 
    horizontal={true}
    data={Array(item)}
    renderItem={({ item }) => 
    <View>
      <ImageBackground style={{width: '100%', height: '100%', justifyContent: 'flex-end'}} source={{ uri: 'http://localhost:1337' + item.ChapterImage.url }}>
         <Text style={[styles.ChapterNameContainer, {backgroundColor: 'rgba(255, 255, 255, 0.5)', }]}>{item.ChapterName}</Text>
      </ImageBackground>
    </View>
    }
    keyExtractor = {({id}, index) => id.toString()}
/>)}

score 0 · Answer 1 · answered Jul 24 '19 at 02:14

You should try the flexdirection of View.

            renderItem = {({item}) => 
                <View style={{ flexDirection: "row" }}>
                <ScrollView style={{height: 50, width: '50%' }} >
                    <ImageBackground style={{width: '100%', height: '100%', justifyContent: 'flex-end'}} source={{ uri: 'http://localhost:1337' + item.ChapterImage.url }}>
                        <Text style={[styles.ChapterNameContainer, {backgroundColor: 'rgba(255, 255, 255, 0.5)', }]}>{item.ChapterName}</Text>
                    </ImageBackground>
                </ScrollView> 
                <View>}

I actually did try it prior to posting this question. It doesn't work. I believe the problem is that renderItem will render the items separately. Meaning, each item will have it's own View or ScrollView, thus the reason why the items are not in a row even though it's already ScrollView `horizontal = {true}` or View `flexDirection: 'row'`. — Roflnator, Jul 24 '19 at 02:25

Is it possible for section items to be in a row?

1 Answers1