Question 88575 in React native Question posted in
The official React Native documentation can be found here.

React Native change the color of a variable within a string

I have a block of text with variables inside of it. I need to change the color of the text variable to differentiate it from the rest of the text, how would I achieve this?

<Text style={styles.text}>We'll get {recipient} to list anything you should know about the {item}</Text>

enter image description here

Tags:

2

Answers


  1. 0

    In order to change the colour of text within a text component, it is necessary to wrap the string with the different color in another text component.

    The code would be as follows:

    <Text style={styles.text}>
  `We'll get `
  <Text style={{
    color: 'aqua',
    // other styles that you want applied to the text
  }}>{recipient}</Text>
  `to list anything you should know about the ${item}`
</Text>
    Login or Signup to reply.
  2. 0 
        <Text style={styles.text}>
`We'll get`
<Text style={styles.variable}>{recipient}</Text>
`to list anything you should know about the`
<Text style={styles.variable}>{item}</Text>
    </Text>

    You can define the variable style in your styles object like this:

    const styles = StyleSheet.create({
  text: {
    fontSize: 16,
    color: 'black',
  },
  variable: {
    color: 'red',
  },
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search