View Code? Open in Web Editor NEW

Simplify Nested Text rendering for React Native and React Native Web

License: MIT License

TypeScript 27.71% JavaScript 3.09% Yacc 12.05% Shell 0.24% Starlark 2.82% Java 29.18% Ruby 3.77% Objective-C 21.13%

rn-nested-text's Introduction

rn-nested-text

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

Install

npm install rn-nested-text --save

yarn add rn-nested-text

Demo

Test it online on Expo

Usage

import React from "react";
import { Linking, SafeAreaView } from "react-native";
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" },
};

const App = () => (
  <SafeAreaView>
    <NestedText
      style={{ color: "#2F4F4F", margin: 20 }}
      textProps={{
        nt: { style: { color: "black", fontWeight: 'bold' } },
      }}
    >
      {
        "<nt>Nested Text</nt> can be used to render <link>clickable links</link> and <u><b>mixed</b> <i>styles</i> text</u>"
      }
    </NestedText>
  </SafeAreaView>
);

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" },
};

Recommend Projects