Somwtimes, we want to add a 2 column layout with flexbox on React Native.

In this article, we’ll look at how to add a 2 column layout with flexbox on React Native.

How to add a 2 column layout with flexbox on React Native?

To add a 2 column layout with flexbox on React Native, we can set flexDirection to 'row' and flexWrap to 'wrap'.

For instance, we write:

import * as React from 'react';
import { Text, View } from 'react-native';
import Constants from 'expo-constants';
import { Card } from 'react-native-paper';

export default function App() {
  return (
    <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
      {Array(100)
        .fill()
        .map((_, i) => {
          return (
            <View style={{ width: '50%' }}>
              <Text>{i}</Text>
            </View>
          );
        })}
    </View>
  );
}

to set flexDirection and flexWrap so we get a horizontal flex layout and we wrap overflowing components to the next row.

Then we set each View‘s width to 50% so that they take half the width of the screen.

Conclusion

To add a 2 column layout with flexbox on React Native, we can set flexDirection to 'row' and flexWrap to 'wrap'.