React Native add bold or italics to single words in < Text > field

In React Native, applying bold or italic styles to individual words within the <Text> component is relatively straightforward. The <Text> component supports nesting, meaning you can embed another <Text> component inside it and apply specific styles to the nested component.

For instance, if you want to emphasize a word within a text segment by making it bold or italic, you can implement it as follows:

javascript
import React from 'react';
import { Text, StyleSheet } from 'react-native';

const App = () => {
  return (
    <Text style={styles.baseText}>
      This is regular text, but the word within `<Text style={styles.boldText}>` will appear bold,
      and the word within `<Text style={styles.italicText}>` will appear italic.
    </Text>
  );
};

const styles = StyleSheet.create({
  baseText: {
    fontSize: 16,
    color: 'black',
  },
  boldText: {
    fontWeight: 'bold',
  },
  italicText: {
    fontStyle: 'italic',
  },
});

export default App;

In this example:

• We have a base <Text> component containing regular text and two nested <Text> components.
• The first nested <Text> component displays the word "word" in bold using the fontWeight: 'bold' style.
• The second nested <Text> component displays another "word" in italic using the fontStyle: 'italic' style.

This approach offers highly flexible control over text styling while maintaining code readability and maintainability.