React Native Inline Text Link

Question

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?

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