Sometimes, we want to add text like an HTML span with React Native.

In this article, we’ll look at how to add text like an HTML span with React Native.

How to add text like an HTML span with React Native?

To add text like an HTML span with React Native, we can nest Text components.

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>
      <Text>
        <Text>foo</Text>
        <Text>bar</Text>
      </Text>
    </View>
  );
}

to add 2 Text components beside each other in an outer Text component.

Therefore, we see ‘foobar’ on the screen since they’re displayed inline.

Conclusion

To add text like an HTML span with React Native, we can nest Text components.