CODEWITHSUNDEEP
reactjsreact-nativetexthyperlink
Bhaumik Surani
Bhaumik Surani

Reputation: 1833

React Native Inline style for multiple Text in single Text With Touch effect

I want to display link in some text and display output like following.

enter image description here

So i was done following code.

<View style={{flexDirection: 'row', flexWrap: 'wrap'}}>
    <Text>This is non clockable text </Text>
    <TouchableOpacity><Text style={{fontWeight:'bold'}}>this is clickable text link for fire onPress</Text></TouchableOpacity>
    <Text> again</Text>
    <Text> non clickable text</Text>
</View>

but it display output like following.

enter image description here

then after i use following code so it fullfill my output requirement but on click highlight effect not set.

<Text>
    <Text>This is non clockable text </Text>
    <Text style={{fontWeight:'bold'}} onPress={()=>{alert('alert')}}>this is clickable text link for fire onPress</Text>
    <Text> again</Text>
    <Text> non clickable text</Text>
</Text>

how to get my desired output with touch highlight effect?

Upvotes: 7

Views: 8634

Answers (4)

Sourabh Gera
Sourabh Gera

Reputation: 1006

<View style={{ flexDirection: 'row', marginVertical:10, marginLeft:-10}}>
    <CheckBox
        checked={checked}
        onPress={() => { setChecked(!checked) }}
    />
    <View style={{ flex: 1, marginLeft: -5 }}>
        
        <Text style={{ marginVertical: 20, }}>By tapping sign up to create account, first you have to agree our
            <Text style={{ color: 'blue' }}
                onPress={() => { /*your on navigate page here */
                        navigation.navigate('TermAndConditions') 
                    }}
            > Terms and Conditions</Text>
            <Text style={{ color: 'blue' }}
                onPress={() => { navigation.navigate('PrivacyPolicy') }}
                > & Privacy Policy</Text>

        </Text>
    </View>
</View>

enter image description here

Upvotes: 0

Sultan Ali
Sultan Ali

Reputation: 2589

for me it is working

<Text style={{ marginVertical: 20, }}>Your personal data will be used to process your order, support your experience
        throughout this app and other purposes describe in
        <Text style={{ color: 'blue' }}
              onPress={() => { /*your on press event here */ }}
            > privacy policy</Text>
        </Text>

Upvotes: 6

Bhaumik Surani
Bhaumik Surani

Reputation: 1833

Issue solved after create custom Component

LinkText.js

import React, {Component} from 'react';
import {Text} from 'react-native';
class LinkText extends Component {
    state = {
        opacity:1.0,
        isOnPressFire:false,
    }

    render() {
        return (
            <Text
                style={{fontWeight:'bold', color:this.state.opacity==1.0?"#000000FF":"#00000088", opacity:this.state.opacity}}
                suppressHighlighting={true}
                onResponderGrant={()=>{
                    this.setState({opacity:0.5,isOnPressFire:true});
                }}
                onResponderRelease={()=>{
                    setTimeout(()=>{
                        this.setState({opacity:1.0,isOnPressFire:false});
                    }, 350);
                }}
                onResponderTerminate={()=>{
                    this.setState({opacity:1.0,isOnPressFire:false});
                }}
                onPress={()=>{
                    if(this.state.isOnPressFire) {
                        alert('Working Ok');
                    }
                    this.setState({opacity:1.0,isOnPressFire:false});
                }}>
                {this.props.data}
            </Text>
        )
    }
}
export default LinkText;

Use:-

<Text>
    <Text>This is non clockable text </Text>
    <LinkText data={"this is clickable text link for fire onPress"}/>
    <Text> again</Text>
    <Text> non clickable text</Text>
    <LinkText data={"again Clickable text"}/>
</Text>

Upvotes: 4

Vinil Prabhu
Vinil Prabhu

Reputation: 1289

Use react-native-styled-text

this library handles almost everything

Upvotes: 1

Related Questions