rn-nested-text

A library to simplify rendering nested text for react native and react native web.

Install

npm install rn-nested-text --save

or

yarn add rn-nested-text

Demo

Test it online on Expo

Usage

import React from "react";
import { Linking, SafeAreaView, StyleSheet } from "react-native";
import NestedText from "rn-nested-text";

const text =
  "<title>Nested Text</title> can be used to render <link>clickable links</link> and <u><b>mixed</b> <i>styles</i> text</u>";

const App = () => (
  <SafeAreaView>
    <NestedText
      style={Styles.root}
      textProps={{
        title: {
          style: Styles.title,
        },
      }}
    >
      {text}
    </NestedText>
  </SafeAreaView>
);

const Styles = StyleSheet.create({
  root: {
    color: "#2F4F4F",
    margin: 20,
  },
  title: {
    color: "black",
    fontWeight: "bold",
  },
});

// to add or change text's default props
NestedText.defaultTextProps.link = {
  onPress: () => Linking.openURL("https://www.example.com"),
  style: { color: "blue" },
};

export default App;

Props

| Prop | Default | Typ | Description | | :-------- | :--------------: | :-----------------------: | :---------------------------------------- | | children | - | string | A nested text string | | textProps | DefaultTextProps | Record<string, TextProps> | Object containing nested texts properties (Optional) |

The NestedText component also supports React Native Text Props.

Default text props

The library provides the default text props below

{
  i: {
    style: {
      fontStyle: 'italic'
    }
  },

  u: {
    style: {
      textDecorationLine: 'underline'
    }
  },

  b: {
    style: {
      fontWeight: 'bold'
    }
  }
}

The static object NestedText.defaultTextProps is exposed to add or change the default props.

import NestedText from "rn-nested-text";

// to add or change text's default props
NestedText.defaultTextProps.link = {
  onPress: () => Linking.openURL("https://www.example.com"),
  style: { color: "blue" },
};