rn-linked-text

React Native LinkedText Component

LinkedText component for React Native (support for Android adn iOS). Provides component to render nested, styleable and clickable links within native Text component.

Component's API

LinkedText component API is compatible with native Text API.

Prop	Type	Default	Note
linkStyle	Object		Style of the links rendered in text.
onLinkPress	Function		Callback method called whenever any of the links is pressed. Method is called with the object containing all the keys and values provided in the link data.
children	string	''	Content to render in the component.
style	Object

Usage

If you want to add link in the LinkedText component you need to provide string with following pattern:

{name=<VALUE>,<KEY1>=<VALUE>,<KEY1>=<VALUE>}

name key is mandatory as this is the text of displayed link. Any other key-value pair is optional.

Please note that if you want to pass a raw string into LinkedText component you need to wrap it in curly brackets and string quotes. Otherwise the JSX compiler will complain. It's not needed when passing a string variable.

import React, { Component } from 'react'
import { StyleSheet } from 'react-native'
import LinkedText from 'rn-linked-text'

const styles = StyleSheet.create({
  text: {
    color: '#cccccc'
  },
  link: {
    color: '#ff0000',
    fontWeight: '500'
  }
})

class PrivacyTerms extends Component {
  
  onLinkPress = (linkData) => {
    console.log(linkData)
    /**
      If you click first link in this example linkData 
      object will contain:
      {
        name: "Terms of Use",
        url: "https://example.com/termsofuse",
        something: "hello"
      }
    */
  }

  render() {
    return (<LinkedText style={styles.text} linkStyle={styles.link} onLinkPress={onLinkPress}>
            {"I have read the {name=Terms of Use,url=https://example.com/termsofuse,something=hello} and the {name=Privacy Policy,url=https://example.com/privacypolicy}. I agree with the validity of the Terms of Use."}
          </LinkedText>)
  }
}

export default PrivacyTerms