React native textDecorationLine-CodePudding

Hi I want to get underline for only 2 letters but getting for full text how to get underline only for first 2 letters, Below is the code i have used to get underline for text.

<Text
                style={{
                  textDecorationLine: "underline",
                  textDecorationColor: "#F88022",
                  textDecorationStyle: "solid",
                  marginTop: SCREENHEIGHT * 0.08,
                  fontFamily: "Outfit-Regular",
                  fontSize: SCREENHEIGHT * 0.023,
                  color: "#0C0C0C",
                }}
              >
                Contract Details
              </Text>

CodePudding user response：

use Text component inside Text component

<Text>
your rest of the text
    <Text
        style={{
         textDecorationLine: "underline",
         textDecorationColor: "#F88022",
         textDecorationStyle: "solid",
         marginTop: SCREENHEIGHT * 0.08,
         fontFamily: "Outfit-Regular",
         fontSize: SCREENHEIGHT * 0.023,
         color: "#0C0C0C",
       }}>
          your underline text
      </Text>

</Text>

CodePudding user response：

Use this code:

<View style={{flexDirection: 'row'}}>
  <Text>The Other Text </Text>
    <Text
      style={{
        textDecorationLine: "underline",
        textDecorationColor: "#F88022",
        textDecorationStyle: "solid",
        marginTop: SCREENHEIGHT * 0.08,
        fontFamily: "Outfit-Regular",
        fontSize: SCREENHEIGHT * 0.023,
        color: "#0C0C0C",
      }}
    >
      Contract Details
    </Text>
  <Text>The Other Text </Text>
</View>