CODEWITHSUNDEEP
react-nativereact-native-sectionlist
elaineee
elaineee

Reputation: 93

Custom section style in sectionList REACT NATIVE

do you know how can I make horizontal section (specific) in sectionList component React-native? I want to make second section horizontal, I tried modify item style in renderItem with flex:1 and flexDirection: 'row' but doesn't works. Anyone has idea how can I set custom style on section or make horizontal section? (in red circle) 

        <View>
        <SectionList
          renderItem={({item, index, section}) => <CellMainNews isFirst={index===0 ? true: false} data={ item } onPress = {item.onPress } />}
          renderSectionHeader={({section: {title}}) => (
            <Text style={{fontWeight: 'bold'}}>{title}</Text>
          )}
          sections={[
            {title: 'Top post', data: this.props.featured.top, renderItem: overrideRenderItem },
            // this section
            {title: 'Featured posts', data: this.props.featured.secundary, renderItem: overrideRenderItemTwo },
            {title: 'Stories', data: this.props.stories},
          ]}
          keyExtractor={(item, index) => item + index}
            />

            {this.props.loading &&
                <View>
                    <ActivityIndicator size={100} color="red" animating={this.props.loading} />
                </View>
            }
        </View>

enter image description here

Regards.

Upvotes: 5

Views: 12062

Answers (1)

user4914734
user4914734

Reputation:

It´s a little hard since SectionList doesn't put a container view on it's sections, but you can achieve it by passing a single element array containing all the items on said element.

And you can use the component of your preference to render all the items on the section the way you wanted.

I would suggest using a FlatList

<View>
  <SectionList
    renderItem={({ item, index, section }) => (
      <CellMainNews
        isFirst={index === 0 ? true : false}
        data={item}
        onPress={item.onPress}
      />
    )}
    renderSectionHeader={({ section: { title } }) => (
      <Text style={{ fontWeight: "bold" }}>{title}</Text>
    )}
    sections={[
      {
        title: "Top post",
        data: this.props.featured.top,
        renderItem: overrideRenderItem,
      },
      // Passing here the single element array
      {
        title: "Featured posts",
        data: [this.props.featured.secondary],
        renderItem: overrideRenderItemTwo,
      },
      { title: "Stories", data: this.props.stories },
    ]}
    keyExtractor={(item, index) => String(index)}
  />

  {this.props.loading && (
    <View>
      <ActivityIndicator
        size={100}
        color="red"
        animating={this.props.loading}
      />
    </View>
  )}
</View>

And your overrideRenderItemTwo

const overrideRenderItemTwo = ({ item, index, section: { title, data } }) => {
  return (
    <FlatList
      showsHorizontalScrollIndicator={false}
      pagingEnabled={true}
      horizontal={true}
      data={item}
      keyExtractor={(item, index) => String(index)}
      renderItem={({ item }) => (
        <CellMainNews
          isSecundary={true}
          isFirst={index === 0 ? true : false}
          data={item}
          onPress={item.onPress}
        />
      )}
    />
  )
}

The advantage of this is that you can use the style you want for the container view of the specific section

Upvotes: 10

Related Questions