CODEWITHSUNDEEP
reactjsreact-nativereact-native-iosreact-native-flatlist
Tanveerbyn
Tanveerbyn

Reputation: 784

Show only first two item of array in Section list

Hey guys Im using Section list of react native in that Im rendering fruits with its details. I want to show only two section for first time when it Render and im using initialNumToRender={1} but that isn't help me how can I do it

this is my data array

    var A = ['Apple', 'Apricot', 'Avocado'] ;
    var B = ['A banana is an edible fruit – botanically a berry.The fruit is variable in size, color, and firmness, but is usually elongated and curved, with soft flesh rich in starch covered with a rind, which may be green, yellow, red, purple, or brown when ripe. The fruits grow in clusters hanging from the top of the plant. Almost all modern edible seedless (parthenocarp) bananas come from two wild species – Musa acuminata and Musa balbisiana. The scientific names of most cultivated bananas are Musa acuminata, Musa balbisiana, and Musa × paradisiaca for the hybrid Musa acuminata × M. balbisiana, depending on their genomic constitution. The old scientific name Musa sapientum is no longer used. ', 'Blackberry', 'Blackcurrant', 'Blueberry', 'Boysenberry'] ;
    var C = ['Cherry', 'Coconut'] ;

this is my section list:=>

<SectionList
        sections={[
          { title: 'Fruits Name From A', data: A },
          { title: 'Fruits Name From b', data: B },
          { title: 'Fruits Name From c', data: B },
        ]}
        initialNumToRender={1}
        renderSectionHeader={ ({section}) => <Text style=                                {styles.SectionHeaderStyle}>
    { section.title } </Text> }
        renderItem={ ({item}) =>
        <View>
       <TouchableOpacity onPress={this.showtext}><Text style={styles.SectionListItemStyle}  //onPress={this.GetSectionListItem.bind(this, item)}

       numberOfLines={this.state.showtext ? 4 : 0}
       >
       { item }

      </Text>
    </TouchableOpacity>
     </View>
     }

        keyExtractor={ (item, index) => index }

      />

Upvotes: 0

Views: 1247

Answers (1)

Murmeltier
Murmeltier

Reputation: 613

You could set sections as an array and then call slice() during the render method to limit the array to the number you need. It could look like this: 

constructor(props){
    //...
    this.state = { sliceNumber : 1};
}

Then in SectionList set sections as an array which you defined somewhere else. sections = {sectionsArray.slice(0, this.state.sliceNumber)}. When you want to have more sections you set state to a bigger number with this.setState({sliceNumber : 2}); and the ui will render with different number of sections.

Upvotes: 1

Related Questions