How to make items display inline in React Native?

Sometimes, we want to make items display inline in React Native.

In this article, we’ll look at how to make items display inline in React Native.

How to make items display inline in React Native?

To make items display inline in React Native, we can use set flexDirection to 'row'.

For instance, we write:

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

export default function App() {
  return (
    <View
      style={{
        flexWrap: 'wrap',
        alignItems: 'flex-start',
        flexDirection: 'row',
      }}>
      <Text style={{ width: 100 }}>foo</Text>
      <Text style={{ width: 100 }}>bar</Text>
    </View>
  );
}

to set the outer view’s style to have flexDirection set to 'row' and flexWrap set to 'wrap' to make the Text components display side by side and wrap them to the next row if they overflow the width of the screen.

alignItems is set to 'flex-start' to make the align the Text components on the left on the screen.

Conclusion

To make items display inline in React Native, we can use set flexDirection to 'row'.