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

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

• javascript
• reactjs
• react-native

• can u tel me the screen size px – Gunesh Shanbhag Commented Sep 13, 2021 at 14:07
• width:360 , height: 592. Keep in mind that I will be doing responsive design while doing this. – SoF Commented Sep 13, 2021 at 14:20

4 Answers 4

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.

Add margin: "auto" propety to your advertLinkText.

Here's a working example for your reference

I tested with 494 x 308 px device size.

this package will help you achieve what you are looking for:

https://www.npmjs./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>

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>
     );
    });