Search code examples
cssreact-nativereact-native-stylesheetitemcontainerstyle

React Native Container Styling

This is the container that I create looks:

enter image description here

This is the style I want.

enter image description here

How can I do this. The code is:

<View>
      {
        usersInfo.map((item) =>
        <View key={item.id} style={{}}>
        {Object.entries(item.intrest).map(([interestName, interestValue]) => (
        <View key={interestName} style={{ backgroundColor: interestValue === 'Games Online' ? '#6B7AED' : interestValue === 'Music' ? '#EE544A' : interestValue === 'Concert' ? '#FF8D5D' : interestValue === 'Movie' ? '#29D697' : '#6B7AED', borderRadius: 18,}}>
        <Text style={{ color: '#FFF', fontSize: 14, fontWeight: '500', paddingHorizontal: 15,paddingVertical: 7 }}>{interestValue}</Text>
        </View>
        ))}
        </View>
        )
        }
</View>

I want to style my containers like the sample given.

Solution

  • You can try to styling the View parent like this:

    <View style={{flexDirection: 'row', flexWrap: 'wrap', width: '100%'}}>
   {usersInfo.map((item) => (
      ....
   )}
</View>