How to align array items in a row React Native

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',
  },
});

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.