There could be a scenario where you’d want to display the elements in your array in a row spaced evenly.

I’ve imported the following object from another file that contains my Array:

export const keyArrays = {
    myArray : ["A", "B", "C", "D", "E", "F", "G"],
    ....
}

The following code snippet shows how the return method in the main App.js component uses a view. The rowContainer class used in the code below will align the array items in a row inside the view and will wrap the items if going out of View’s width.

The following is the stylesheet snippet used in the App.js component:

const styles = StyleSheet.create({
  rowContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    height: 30,
    paddingTop: 5,
  },
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 20,
    fontWeight: '600',
    fontFamily: 'AvenirNextCyr-Regular',
    color: Colors.white,
    backgroundColor: '#32879d',
  },
});