FlatList-Collapsible, When FlatList data is sorted, doesn't seen content of collapsible.

[seckinbrke]

renderAccordionView = () => { return ( <View style={styles.container}> <View style={{ flex: 1 }}> <ScrollView keyboardShouldPersistTaps="always" style={{height:'100%'}}> <FlatList data={this.state.dataSet} extraData={this.state} keyExtractor={(item, index) => String(index)} renderItem={this.renderDetay} /> </ScrollView> </View> <View style={styles.footerContainer}> <Footer onPressGorunum={this.handleOnPressGorunum} onPressSirala={this.handleOnPressSirala} /> </View> </View> ); };

[iRoachie]

Can you create an example on https://snack.expo.io that reproduces this?

[kishanbharda]

Any Solution ?

[FrancoisDeBellescize]

Same problem here:

                  <Collapsible collapsed={aisle.collapsed}>
                    <FlatList
                      extraData={this.state}
                      data={aisle.ingredients}
                      keyExtractor={item => item.name}
                      renderItem={({ item: ingredient, index: ingredientIndex }) =>
                        <TouchableOpacity
                          onPress={() => this.toggleIngredient(aisleIndex, ingredientIndex)}
                        >
                          <View>
                            <View>
                              <Text style={[ingredient.done ? styles.ingredientDone : styles.ingredient]}>
                                {ingredient.value}{ingredient.ingredient.default_unit.symbol} {ingredient.ingredient.name}
                              </Text>
                            </View>
                          </View>
                        </TouchableOpacity>
                      }
                    />
                  </Collapsible>

When i touch an item in the Flatlist it toggle the attribute done and change the style but after touching an element, the element disappear since i add the Collapsible

[syedamirali14]

any solution? same is happening with me

[syedamirali14]

i have fixed this issue use map loop instead of flatlist it will work fine

[RazaShehryar]

use alignItems: 'flex-end' property on contentContainerStyle. It worked out for me