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

How to change particular word color in React Native Text

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

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;
Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    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).

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search