0

I want to make links navigate to a different screen in my messaging app. Is there a way to make TouchableOpacity inline?

Julian Porter
  • 187
  • 2
  • 13
  • Does this solve your problem? https://stackoverflow.com/questions/56597204/react-native-inline-style-for-multiple-text-in-single-text-with-touch-effect – mateonunez Oct 14 '20 at 15:13

1 Answers1

1

Here is a quick workaround, this is not highly optimized but should work in most cases

function createTextLinks(text) {
  let texts = text.split(' ');
  let comps = texts.map((link) => {
    let linking = link.match(/([^\S]|^)(((https?\:\/\/)|(www\.))(\S+))/gi);
    if(linking) return <TouchableOpacity onPress={() => Linking.openURL(linking)}>{linking}</TouchableOpacity>
    return link
  });
  //insert space again
  comps = comps.map(comp=>[comp," "]);
  return comps.flat()
}

Now you can use it like following

<Text>
{ 
  createTextLinks_(
          "If you find this interesting, email us at https://www.saachitech.com or contact us at http://stackoverflow.com and we will help you out! "
)}
</Text>

Note

React Native Text have a data detector property which convert a link to hyperlink but it’s only available on Android. Here is the link https://reactnative.dev/docs/text#datadetectortype

Sameer Kumar Jain
  • 2,074
  • 1
  • 13
  • 22