rn-rich-text

Installation

yarn add rn-rich-text

Usage

import RichText from 'rn-rich-text';

Basic Usage

<RichText
  values={{
    link: {
      text: 'click here',
      onPress: () => {},
      style: { color: 'blue' },
    },
  }}
>
  Hello! [[link]] for more info.
</RichText>

Realistic Examples

// Terms and conditions
<RichText
  values={{
    terms: {
      text: 'Terms of Service',
      onPress: () => Linking.openURL('https://example.com/terms'),
      style: { color: '#0066CC', textDecorationLine: 'underline' },
    },
    privacy: {
      text: 'Privacy Policy',
      onPress: () => Linking.openURL('https://example.com/privacy'),
      style: { color: '#0066CC', textDecorationLine: 'underline' },
    },
  }}
>
  By continuing, you agree to our [[terms]] and [[privacy]].
</RichText>

// User mention
<RichText
  values={{
    user: {
      text: '@john_doe',
      onPress: () => goToProfile('john_doe'),
      style: { color: '#1DA1F2', fontWeight: '500' },
    },
  }}
>
  [[user]] liked your post.
</RichText>

// Price with discount
<RichText
  values={{
    original: {
      text: '$99.99',
      style: { textDecorationLine: 'line-through', color: '#999' },
    },
    sale: {
      text: '$49.99',
      style: { color: '#E53935', fontWeight: 'bold' },
    },
  }}
>
  Limited offer: [[original]] [[sale]]
</RichText>

// Error message
<RichText
  values={{
    error: {
      text: 'Payment failed',
      style: { color: '#E53935', fontWeight: 'bold' },
    },
    help: {
      text: 'Get help',
      onPress: () => openSupport(),
      style: { color: '#0066CC' },
    },
  }}
>
  [[error]]. Please try again. [[help]]
</RichText>

API

| Prop | Type | Description | |------|------|-------------| | children | string | Template string with [[placeholder]] format | | values | object | Placeholder values { name: { text, style, onPress } } | | style | object | Container Text style |

Value Object

{
  text: string,      // Text to display
  style: object,     // Text style (optional)
  onPress: function, // Press handler (optional)
}

Demo

import { RichTextExample } from 'rn-rich-text';

<RichTextExample />

License

MIT