How does one Display a Hyperlink in React Native App

Question

How do I display a hyperlink in a React Native app    e g     lt a href  https   google com gt Google lt  a gt

User · Answer

for the React Native  there is library to open Hyperlinks in App  https   www npmjs com package react-native-hyperlink  In addition to this  i suppose you will need to check url and best approach is Regex  https   www npmjs com package url-regex

User · Answer

Just thought I d share my hacky solution with anyone who s discovering this problem now with embedded links within a string  It attempts to inline the links by rendering it dynamically with what ever string is fed into it   Please feel free to tweak it to your needs  It s working for our purposes as such   This is an example of how https   google com would appear   View it on Gist   https   gist github com Friendly-Robot b4fa8501238b1118caaa908b08eb49e2  import React from  react   import   Linking  Text   from  react-native    export default function renderHyperlinkedText string  baseStyles       linkStyles       openLink      if  typeof string      string   return null    const httpRegex    http g    const wwwRegex    www g    const comRegex     com g    const httpType   httpRegex test string     const wwwType   wwwRegex test string     const comIndices   getMatchedIndices comRegex  string     if   httpType    wwwType   amp  amp  comIndices length           Reset these regex indices because  comRegex  throws it off at its completion       httpRegex lastIndex   0      wwwRegex lastIndex   0      const httpIndices   httpType          getMatchedIndices httpRegex  string    getMatchedIndices wwwRegex  string       if  httpIndices length     comIndices length          const result             let noLinkString   string substring 0  httpIndices 0     string length         result push  lt Text key  noLinkString  style  baseStyles  gt   noLinkString   lt  Text gt          for  let i   0  i  lt  httpIndices length  i    1            const linkString   string substring httpIndices i   comIndices i    4           result push             lt Text             key  linkString              style   baseStyles  linkStyles               onPress  openLink        gt  openLink linkString         gt  Linking openURL linkString              gt                linkString              lt  Text gt                     noLinkString   string substring comIndices i    4  httpIndices i   1     string length           if  noLinkString              result push               lt Text key  noLinkString  style  baseStyles  gt                  noLinkString                lt  Text gt                                          Make sure the parent   lt View gt   container has a style of  flexWrap   wrap         return result              return  lt Text style  baseStyles  gt   string   lt  Text gt      function getMatchedIndices regex  text      const result         let match    do       match   regex exec text       if  match  result push match index       while  match     return result

User · Answer

If you want to do links and other types of rich text  a more comprehensive solution is to use React Native HTMLView

User · Answer

Import Linking the module from React Native  import   TouchableOpacity  Linking   from  react-native     Try it -   lt TouchableOpacity onPress       gt  Linking openURL  http   Facebook com    gt        lt Text gt  Facebook  lt  Text gt        lt  TouchableOpacity gt

User · Answer

Another helpful note to add to the above responses is to add some flexbox styling  This will keep the text on one line and will make sure the text doesn t overlap the screen     lt View style    display   flex   flexDirection   row   flex  1  flexWrap   wrap   margin  10    gt     lt Text gt Add your  lt  Text gt     lt TouchableOpacity gt       lt Text style    color   blue     onpress       gt  Linking openURL  https   www google com     gt           link      lt  Text gt      lt  TouchableOpacity gt      lt Text gt here      lt  Text gt    lt  View gt

User · Answer

You can use linking property  lt Text style   color   skyblue    onPress       gt  Linking openURL  http   yahoo com    gt  Yahoo

User · Answer

The selected answer refers only to iOS  For both platforms  you can use the following component   import React    Component  PropTypes   from  react   import     Linking    Text    StyleSheet   from  react-native    export default class HyperLink extends Component      constructor          super          this  goToURL   this  goToURL bind this          static propTypes         url  PropTypes string isRequired      title  PropTypes string isRequired         render          const   title    this props       return         lt Text style  styles title  onPress  this  goToURL  gt           gt    title         lt  Text gt                 goToURL         const   url     this props      Linking canOpenURL url  then supported   gt          if  supported            Linking openURL this props url           else           console log  Don  t know how to open URI      this props url                          const styles   StyleSheet create     title        color    acacac       fontWeight   bold

User · Answer

React Native documentation suggests using Linking   Reference  Here is a very basic use case   import   Linking   from  react-native    const url  https   google com    lt Text onPress       gt  Linking openURL url   gt       url   lt  Text gt    You can use either functional or class component notation  dealers choice

User · Answer

Use React Native Hyperlink  Native  lt A gt  tag    Install   npm i react-native-a   import   import A from  react-native-a    Usage     lt A gt Example com lt  A gt   lt A href  example com  gt Example lt  A gt   lt A href  https   example com  gt Example lt  A gt   lt A href  example com  style   fontWeight   bold    gt Example lt  A gt

User · Answer

To do this  I would strongly consider wrapping a Text component in a TouchableOpacity   When a TouchableOpacity is touched  it fades  becomes less opaque    This gives the user immediate feedback when touching the text and provides for an improved user experience   You can use the onPress property on the TouchableOpacity to make the link happen     lt TouchableOpacity onPress       gt  Linking openURL  http   google com    gt     lt Text style   color   blue    gt      Google    lt  Text gt   lt  TouchableOpacity gt

User · Answer

Something like this    lt Text style   color   blue          onPress       gt  Linking openURL  http   google com    gt    Google  lt  Text gt    using the Linking module that s bundled with React Native

[javascript] How does one Display a Hyperlink in React Native App?

Examples related to javascript

Examples related to react-native