CODEWITHSUNDEEP
javascriptcssreactjsreact-native
Rahul Aadam
Rahul Aadam

Reputation: 195

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;

Upvotes: 2

Views: 1837

Answers (2)

Bernardo Benini Fantin
Bernardo Benini Fantin

Reputation: 103

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

Upvotes: 0

Michael Bahl
Michael Bahl

Reputation: 3649

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

Upvotes: 4

Related Questions