How to create italics text in React native? Code Example

Just like we created the bold text, we can also convert the text into italics. All we need to do is to use fontStyle: italic css on Text component. This works in both Android and iOS phones.

Code Example

import React, { useState } from "react";
import { Text, StyleSheet } from "react-native";

const TextInANest = () => {

  return (
    <Text style={styles.baseText}>
      This is a{' '}
      <Text style={styles.titleText}>
        italic
      </Text>
      {' '}text
    </Text>
  );
};

const styles = StyleSheet.create({
  baseText: {
    fontFamily: "Cochin",
    marginTop: 60,
  },
  titleText: {
    fontSize: 20,
    fontStyle: "italic"
  }
});

export default TextInANest;

Output –

From the above image, you can see how italic text looks like on iOS (left) and Android (right) phones. A single css style can generate codes for both the mobile operating systems.

In the code we are setting the italic text block in line number 9. We are using the css style fontStyle: italic in line 24.

Conclusion

To create italic text, use fontStyle css property and set it to italic. It is supported by both Android and iOS phones. React Native makes it easy to create such styles without any need to write platform specific codes.