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

user_5163232 0
Viewed 10813

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.

react-native android ios
2 Answers

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>
user_71498980

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

user_139502130
Related