CODEWITHSUNDEEP
androidiosreact-native
Mohd Shahzad
Mohd Shahzad

Reputation: 259

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.

Upvotes: 14

Views: 16380

Answers (3)

Nay
Nay

Reputation: 727

Using a Third-Party Library like react-native-hyperlink

There are third-party libraries like react-native-hyperlink that provide a more convenient way to handle clickable links within elements.

Here's an example using react-native-hyperlink:

import Hyperlink from 'react-native-hyperlink';

const MyComponent = () => (
  <Hyperlink onPress={(url) => console.log('Clicked on URL:', url)} linkStyle={{ color: 'blue' }}>
    <Text>Click me to open a website: https://example.com</Text>
  </Hyperlink>
);

Upvotes: 0

Solafah Nooruldeen
Solafah Nooruldeen

Reputation: 1

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

Upvotes: 0

Mohamed Khalil
Mohamed Khalil

Reputation: 3136

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>

Upvotes: 38

Related Questions