Why my React Native flex wrap is not working?

Question

I'm trying to flex wrap up some tags but pretty much nothing is working, I have tried everything and it still does not wrap is it possible that React Native has issues with wrapping?

I have my tags output which is just wrapped in a view and it has all the right settings.

My current outcome

Here is my code:

 <View
style={{
    width: responsiveWidth(18),
    height: responsiveHeight(3.5),
    borderRadius: 10,
    backgroundColor: "#ffe8e8",
    alignItems: "center",
    justifyContent: "center",
    marginLeft: responsiveWidth(8)
}}
>
<Text
    style={{
        color: "#000",
        fontSize: responsiveFontSize(1.5),
        fontFamily: "Iransans"
    }}
>
    8:00 AM
</Text>
</View>;

for (var i = 1; i < times.length / 4; i++) {
//i shomarandeye radif
for (var j = 1; j % 4 == 0; j++) {
    //j shomarandeye sheyaaye darune radif
}
}

const isEmptyPhotoTags = _.isEmpty(photoTags);
let renderTags = [];
if (!isEmptyPhotoTags) {
photoTags[0].forEach(function(tag, i) {
    renderTags.push(
        <View
            key={i}
            style={{
                flex: 1,
                flexDirection: "row",
                flexWrap: "wrap",
                alignItems: "flex-start",
                justifyContent: "space-between",
                alignContent: "space-between",
                paddingLeft: 15
            }}
        >
            <View style={{ height: 52, width: 146, padding: 5 }}>
                <TouchableHighlight style={styles.buttonTag}>
                    <Text style={styles.buttonTagText}>{tag}</Text>
                </TouchableHighlight>
            </View>
        </View>
    );
});
}

<View style={styles.tagSection}>
<View
    style={{
        flex: 1,
        flexDirection: "row",
        flexWrap: "wrap",
        alignItems: "flex-start",
        justifyContent: "flex-start"
    }}
>
    <Icon
        name="tag"
        size={29}
        type={"font-awesome"}
        color={"#58595B"}
        style={{ paddingLeft: 20, paddingRight: 10 }}
    />
    <Text style={styles.tagSectionHeaderText}>Tags</Text>
</View>
<View
    style={{
        flex: 1,
        flexDirection: "row",
        flexWrap: "wrap",
        alignItems: "flex-start",
        justifyContent: "space-between",
        alignContent: "space-between"
    }}
>
    {!isEmptyPhotoTags ? (
        <View
            style={{
                flex: 1,
                flexDirection: "row",
                flexWrap: "wrap",
                alignItems: "flex-start",
                alignContent: "space-between",
                justifyContent: "space-between"
            }}
        >
            {renderTags}
        </View>
    ) : (
        <Text style={styles.tagSectionNoTags}>No Tags</Text>
    )}
</View>
</View>;

tagSection: {
    flex: 1,
    flexDirection: 'column',
    backgroundColor:'#F7F8F9',
    paddingTop:10,
    flexWrap:'wrap',
    alignItems: 'flex-start',
    justifyContent: 'flex-start'
},
tagSectionHeaderText:{
    fontSize: 21,
    lineHeight: 22,
    color: '#58595b',
    fontWeight: '600',
    paddingRight:10,
},
tagSectionNoTags:{
    fontSize: 18,
    lineHeight: 22,
    color: '#58595b',
    fontWeight: '400',
    fontStyle:'italic',
    paddingLeft:10,
},
buttonTag: {
    borderTopLeftRadius: 10,
    borderTopRightRadius: 10,
    borderBottomRightRadius: 10,
    borderBottomLeftRadius: 10,
    backgroundColor: '#6575BE',
    flex:1,
    justifyContent: 'center',
    alignItems: 'center',
},
buttonTagText: {
    textAlign: 'center',
    fontSize: 20,
    lineHeight: 22,
    color: '#fff',
    fontWeight: '600',

}

Update code:

 const isEmptyPhotoTags = _.isEmpty(photoTags);
 let renderTags = [];
 if (!isEmptyPhotoTags) {
 photoTags[0].forEach(function(tag, i) {
    renderTags.push(
        <View key={i} style={[styles.wrapTags, { paddingLeft: 15 }]}>
            <View style={{ height: 52, width: 146, padding: 5 }}>
                <TouchableHighlight style={styles.buttonTag}>
                    <Text style={styles.buttonTagText}>{tag}</Text>
                </TouchableHighlight>
            </View>
        </View>
    );
});
}

<View style={styles.tagSection}>
  <View
    style={{
        flex: 1,
        flexDirection: "row",
        flexWrap: "wrap",
        alignItems: "flex-start",
        justifyContent: "flex-start"
    }}
>
    <Icon
        name="tag"
        size={29}
        type={"font-awesome"}
        color={"#58595B"}
        style={{ paddingLeft: 20, paddingRight: 10 }}
    />
    <Text style={styles.tagSectionHeaderText}>Tags</Text>
</View>
<View style={styles.wrapTags}>
    {!isEmptyPhotoTags ? (
        <View
            style={{
                flexDirection: "row",
                flexWrap: "wrap",
                alignItems: "flex-start",
                alignContent: "space-between",
                justifyContent: "space-between",
                paddingBottom: 10
            }}
        >
            {renderTags}
        </View>
    ) : (
        <Text style={styles.tagSectionNoTags}>No Tags</Text>
    )}
</View>
</View>;

 tagSection: {
    //flex: 1,
    flexDirection: 'column',
    backgroundColor:'#F7F8F9',
    paddingTop:10,
    flexWrap:'wrap',
    alignItems: 'flex-start',
    justifyContent: 'flex-start'
},
tagSectionHeaderText:{
    fontSize: 21,
    lineHeight: 22,
    color: '#58595b',
    fontWeight: '600',
    paddingRight:10,
},
tagSectionNoTags:{
    fontSize: 18,
    lineHeight: 22,
    color: '#58595b',
    fontWeight: '400',
    fontStyle:'italic',
    paddingLeft:10,
},
wrapTags:{
    flex:1,
    flexDirection:'row',
    flexWrap:'wrap',
    alignItems: 'flex-start',
    justifyContent: 'flex-start'
},
buttonTag: {
    borderTopLeftRadius: 10,
    borderTopRightRadius: 10,
    borderBottomRightRadius: 10,
    borderBottomLeftRadius: 10,
    backgroundColor: '#6575BE',
    flex:1,
    justifyContent: 'center',
    alignItems: 'center',
},
buttonTagText: {
    textAlign: 'center',
    fontSize: 20,
    lineHeight: 22,
    color: '#fff',
    fontWeight: '600',

},

Answer 1

You should remove the flex: 1 to fix the problem.