Categories
JavaScript Answers React Native Answers

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

Spread the love

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.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *