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

Question

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

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.

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?

Please do not put images. Setup a codepen or jsfiddle instead — Fakebounce, Jun 14 '19 at 11:30
Check this link if you're wondering about react https://stackoverflow.com/questions/52168451/how-to-include-touchableopacity-within-text-reactnative. Or you can use css with flex or float:left to set up your text — Fakebounce, Jun 14 '19 at 11:35
Text is inline when wrapping them with another Text component, You can use the onPress event on child Text component with custom styling to have hyperlink behavior. — Harsh kurra, Jun 14 '19 at 11:46
how to set hyperlink behavior. i try above comment link ans but it work only single link but in my case dynamically number of link grenerate. — Bhaumik Surani, Jun 14 '19 at 11:48

score 5 · Answer 1 · answered Oct 09 '20 at 08:47

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>

score 4 · Answer 2 · answered Jun 15 '19 at 08:20

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>

score 1 · Answer 3 · answered Jun 14 '19 at 12:30

1

Use react-native-styled-text

this library handles almost everything

answered Jun 14 '19 at 12:30

Vinil Prabhu

1,279
1
10
22

score 0 · Answer 4 · answered Jul 10 '23 at 08:26

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

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

4 Answers4

Linked