Add a link to a text within the text - React Native

Question

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",
      }
    })

width:360 , height: 592. Keep in mind that I will be doing responsive design while doing this. — SoF, Sep 13 '21 at 14:20

score 9 · Accepted Answer · answered Sep 13 '21 at 15:01

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.

Awesome with the "{' '}" - had issues finding a way to get spacing between the text and the link - thanks! — Jhnsbrst, Jan 04 '23 at 12:13

score 0 · Answer 2 · answered Sep 13 '21 at 14:16

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.

answered Sep 13 '21 at 14:16

Gunesh Shanbhag

559
5
13

Unfortunately nothing has changed. – SoF Sep 13 '21 at 14:23
Did u run the code in codesandbox, bcz its working fine for me. – Gunesh Shanbhag Sep 13 '21 at 14:31
Yes, I did. Still same. Emulator: https://imgur.com/a/fzydilJ physical phone: https://imgur.com/a/jLmLRyG – SoF Sep 13 '21 at 14:43

score 0 · Answer 3 · edited Apr 13 '22 at 12:14

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>

edited Apr 13 '22 at 12:14

Luís Mestre

1,851
1
11
29

answered Apr 09 '22 at 22:20

RamaProg

1,106
7
15

score 0 · Answer 4 · answered Aug 24 '22 at 14:18

here is my solution

const DATAMAP = DATA.map((item, index) => {
      return (
 <TouchableOpacity
              style={styles.imageDiv}
              onPress={() => {
                return Linking.openURL(item.gameLink);
              }}>
              <Image
                key={index}
                style={styles.stretch}
                source={{
                  uri: item.gameImage,
                }}
              />
            </TouchableOpacity>
     );
    });

Add a link to a text within the text - React Native

4 Answers4