react-native - セクション項目を連続させることはできますか?

Question

React Native で SectionList を使用して、URL から取得した JSON データを表示しています。

<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()}
/>

上記のコードでは、そのように見えます。

セクション タイトル 1

• セクション項目 1.1
• セクション項目 1.2

セクション タイトル 2

• セクション項目 2.1

ただし、以下のように表示したいです。

セクション タイトル 1

セクション項目 1.1 | セクション項目 1.2

セクション タイトル 2

セクション項目 2.1

上記のセクション項目に水平スクロールがある場所。

私はすでに ScrollList をに設定しようとしましたhorizontal={true}が、それは全体を水平スクロールにすることですが、セクションヘッダーを水平スクロールにしたくありません。

更新:さらに調査した結果、SectionList 内で FlatList を使用することが提案されました。試してみましたが、まだ縦に表示されています。

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()}
/>)}