'how to move array texts to next line in react native

I have array like this

const [selectedItems,setSelectedItems] = useState(['a','b','c','d'])

I am mapping like this

<View>
 {selectedItems.map((selectedItems, index) => {
                return (
                  <View
                    key={index}
                    style={{
                      backgroundColor: "lightgrey",
                      flexDirection: "row",
                      padding: "2%",
                      marginLeft: "2%",
                    }}
                  >
                    <TouchableOpacity onPress={() => DelFun(selectedItems)}>
                      <Text style={{ color: "red" }}>Del</Text>
                    </TouchableOpacity>
                    <Text style={{ paddingLeft: "2%" }}>{selectedItems}</Text>
                  </View>
                );
              })}
</View>

but its going on and on in row I want to show UI like selected text in box box. like this

enter image description here



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source