'How to make some part of text clickable and some part having different text color in react-native

I am trying to make some portion of text of different color and clickable

Here is my code:

<Text style = {styles.term_service}>By signing up, you agree to Terms of Service and Privacy Policy.</Text>

I want to make Terms of Service and Privacy Policy clickable and have different color.

Solution 1:^[1]

you can use nested text doc also Text accept onPress doc

<Text style = {styles.term_service}>By signing up, you agree to Terms of Service and <Text onPress={()=> someAction()} style = {{ color: '#fff' }}>Privacy Policy.</Text></Text>

Solution 2:^[2]

Just pass the onPress prop in the text component and use an arrow function to navigate to the terms and policy page.

Pass each one of them in a different text component and then make the style row style.

<View 
style={styles.termsContainer}>
    <Text style = {styles.term_service}>By signing up, you agree to </Text>
    
    <Text  onPress={() => navigation.navigate("TermsAndConditions")}
    style={styles.terms_text}>Terms of Service and Privacy Policy.</Text>
    
    </View>

in the styles of the view make the flexDirection:"row" now the text will be next to each other

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Mohamed Khalil
Solution 2	Solafah Nooruldeen

'How to make some part of text clickable and some part having different text color in react-native

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]