2

My flatlist is wrapping, but I don't want it to. Is this specific to the data type?

Here is the relavant code if I use flatlist:

<View>
                                <Text style={styles.statLabel}>
                                    Habilidad(es)
                                </Text>
                                <FlatList
                                    data={ this.state.pokemonAbilities }
                                    renderItem={({item}) => <Text style={styles.statData}>{item.node}</Text>
                                    }
                                    keyExtractor={(item) => item.id}
                                />
                            </View>

When I render this code, the "Habilidades" is not under the other two stats as it should be. Instead, it wraps and ends up on the right: Render with FlatList

When I remove the flatlist and instead use placeholder text, it works:

<View>
                                <Text style={styles.statLabel}>
                                    Habilidad(es)
                                </Text>
                                <Text>
                                    Placeholder
                                </Text>
                            </View>

The above code renders the following: Code with placeholder

The styles for abilityContainer, statsLabel, and statsData are here:

statLabel: {
    color: 'white',
    fontSize: 20,
},
stateData: {
    marginBottom: 20
},
stuckNconfuzed
  • 21
  • 2

1 Answers1

1

You should add a View of the FlatList, after that you should add the style container like this:

 container: {
    flex: 1
 }, 
  item: {
    backgroundColor: '#f9c2ff',
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
   }
Elif
  • 141
  • 13