How to give a different color to a State Value than the rest of the Text in React Native?-CodePudding

I want the state value { province } to be a different color that is set in style = {[ styles.text ]}. Can anybody give me any ideas on how to do this?

<Text style = {[ styles.text ]}>
    Province - { province } 
</Text>

CodePudding user response：

You have to put province in its own text tag to achieve that. Example :

<Text style = {[ styles.text ]}>
    Province - <Text style={styles.YourStyle}>{province}</Text> 
</Text>

CodePudding user response：

Instead of wrapping all the text in the same , use a View and put both elements, each with different styling classes:

<View style={{flexDirection:'row'}}>
  <Text style={styles.text}>Province - </Text>
  <Text style={styles.otherText}>{province}</Text>
</View>

CodePudding user response：

React Native supports nested Text components. You can do that like:

<Text style = {[ styles.text ]}>
    Province - 
    <Text style={{color: /ANY COLOR/}} >
        { province } 
    </Text>
</Text>

Hope this works for you.