How to change particular word color in React Native Text-CodePudding

Please check the image- how can I do that in my react native app

import React, { useContext, useState } from 'react';
import { View, Button, Text, StyleSheet, Switch} from 'react-native';

const Testing = ({ navigation }) => {
return (
   <View>
     <Text> My mother has blue eyes and my father has dark green eyes.</Text>
</View>
  );

}

export default Testing;

CodePudding user response：

Text elements have to be nested:

const Testing = ({ navigation }) => {
return (
   <View>
     <Text> My mother has <Text style={{color: '#0000fff'}}>blue<Text> eyes and my father has dark green eyes.</Text>
</View>
  );

}

Example: https://reactnative.dev/docs/text#nested-text

CodePudding user response：

I put a simple js code and you can convert to react:

    document.getElementById('mother').style.color = document.getElementById('mother').innerHTML;
document.getElementById('father').style.color = document.getElementById('father').innerHTML;

    <View>
      <Text> My mother has <span id="mother">blue</span> eyes and my father has <span id="father">darkgreen</span> eyes.</Text>
    </View>

CodePudding user response：

You can add a <Text> inside another <Text> and add a style for each text. Like the code bellow:

<Text style={styles.text}> text text text text text 
    <Text onPress={() => goToScreen('Premiações')} style={styles.blue_text}> 
        differently styled text 
    </Text> 
text text.
</Text>

Perceive my inner <Text> has a style different from the outter <Text>, and also perceive my inner <Text> has even a onPress, which will be applied only to this inner <Text> when pressed (it's a link inside the body of a text).