'React Native Inline Text Link

I need to link up a selection text from within a Text component to point to an external URL.

I have included a TouchableOpacity and specified a width and height as required, however the TouchableOpacity now seems to overlap the adjacent text.

Example:

<Text>
Lorem ipsum dolor sit amet, 
  <TouchableOpacity 
        onPress={() => {Linking.openURL('http://www.example.com/')}} 
        style={{width: 108, height: 11}}>
     <Text>
           consectetur adipiscing
     </Text>
  </TouchableOpacity> 
    elit. Fusce congue malesuada euismod.
</Text>

What's the best way to keep TouchableOpacitys inline within Text components?

react-native

Solution 1:^[1]

What about like this?

import { Text, Linking } from 'react-native';

<Text>Hey guys I wanted to share this awesome thing just press
  <Text
    style={{color: 'red'}}
    onPress={() => {Linking.openURL('http://www.example.com/')}}
  >
    here
  </Text>
  to see it in your browser
</Text>

Solution 2:^[2]

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

https://www.npmjs.com/package/react-native-text-link

<TextLink 
    links = {[
        {
          text: 'consectetur adipiscing',
          onPress: () => Linking.openURL('http://www.example.com/'),
        }
    ]}
>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce congue malesuada euismod.
</TextLink>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	abrahamcalf
Solution 2

'React Native Inline Text Link

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]