Flex row in react native not working even after my code is not wrong-CodePudding

I am trying to align those white circles row-wise and I have written the same thing in the code but these circles are getting aligned column-wise, someone can help please.

My Item component :

const Item = ({ item }) => (
        <View style={styles.citiesContainer}>
            <View>
                <Text style={styles.cities}>{item}</Text></View>
        </View>
    );

const styles = StyleSheet.create({
    citiesContainer: {
        display: 'flex',
        flexDirection: 'row',
        flexWrap: 'nowrap',
        overflow: 'hidden',
        height: 120,
        width: '100%',
        justifyContent: 'space-evenly',
        alignContent: 'center',
        backgroundColor: 'red'
    },
    cities: {
        fontSize: 10,
        flex: 1,
        color: 'black',
        width: 100,
        height: 100,
        borderRadius: 50,
        backgroundColor: '#f0f0f0'
    }
});

Where I am rendering it :

  const renderItem = ({ item }) => ( <Item title={item} /> ); 
  <FlatList
    data={cities}
    renderItem={renderItem}
    keyExtractor={item => item}
    
  />

Check the image below to see what I am explaining :

CodePudding user response：

I see in the comments that you are using a FlatList, so in order to have items on a row, you should use the horizontal={true} on the FlatList.

 <FlatList
   data={cities} 
   renderItem={renderItem}
   keyExtractor={item => item} 
   horizontal={true} 
 />

I also see in the comments that renderItem is like so :

const renderItem = ({ item }) => ( <Item title={item} /> );

So in Item component you should be getting title as part of props. And finally there are some corrections to make in the style part, like so :

const Item = ({ title }) => (
            <View style={styles.city}>
                <Text >{title}</Text>
            </View>
    );


const styles = StyleSheet.create({

     city: {
       fontSize: 10,
       color: 'black',
       width: 100,
       height: 100,
       borderRadius: 50,
       backgroundColor: '#f0f0f0'
      }
   });