0
368
ViewsAdd a link to a text within the text - React Native
I'm new to ReactNative. In the application, I want to add a link to a text within the text. As seen in the photo, the purple text the link is linked to is slightly above the normal text. No matter what I tried, I could not align this text with the text below. I want to do responsive design, so the code I'm going to write should look the same on every device. Can you help me with this?
App photo:
Codes:
import React from 'react'
import {
StyleSheet,
Text,
TouchableOpacity,
View
} from 'react-native'
import {
Dimensions
} from "react-native"
const units = {
width: Dimensions.get("window").width,
height: Dimensions.get("window").height,
}
const VideoPlayback = () => {
return ( <
View style = {
styles.container
} >
<
View style = {
styles.advertContainer
} >
<
View style = {
styles.adverPicture
} > < /View>
<
View style = {
styles.textContainer
} >
<
Text >
Everyone is watching this so they can learn math.
<
TouchableOpacity onPress = {
() => console.log('open advert')
} > { < Text style = {
styles.advertLinkText
} > It is your turn < /Text>} < /
TouchableOpacity >
<
/Text> < /
View >
<
/View> < /
View >
)
}
export default VideoPlayback
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#FFFFFF",
},
advertContainer: {
width: units.width,
height: units.height / 8.78,
backgroundColor: "#F5F5F5",
marginTop: units.height / 20,
borderTopWidth: 1,
borderBottomWidth: 1,
borderColor: '#E9E9E9',
alignItems: 'center',
flexDirection: 'row'
},
adverPicture: {
width: units.width / 3.02,
height: units.height / 11.25,
backgroundColor: 'black',
marginLeft: units.width / 45
},
textContainer: {
width: units.width / 1.69,
marginLeft: units.width / 30,
},
advertLinkText: {
color: "#957DAD",
}
})3 answers
Answer question0
You can nest a Text element inside another Text element directly, without using TouchableOpacity. The nested Text element can have an onPress function that handles the Linking as well as whatever color change you need.
<View style={styles.textContainer}>
<Text>
Everyone is watching this so they can learn math.
<Text
style={styles.advertLinkText}
onPress={() => console.log('open advert')}>
{' '}
It is your turn
</Text>
</Text>
</View>
I found this solution here, by the way. That answer goes into more detail how you can change the color once pressed, etc.
0
Add margin: "auto" propety to your advertLinkText.
Here's a working example for your reference 
I tested with 494 x 308 px device size.
0
this package will help you achieve what you are looking for:
https://www.npmjs.com/package/react-native-text-link
<TextLink
links={[
{
text: 'It is your turn',
onPress: () => console.log('do whatever you need'),
}
]}
>
Everyone is watching this so they can learn math. It is your turn
</TextLink>