react-native-word-wrap-text

Einere
esm
react-native-word-wrap-text JS library on GitHub react-native-word-wrap-text JS library on npm Download react-native-word-wrap-text JS library

Simple word-wrapped text component for React Native

Version 0.5.1 License MIT
react-native-word-wrap-text has no homepage
react-native-word-wrap-text JS library on GitHub
react-native-word-wrap-text JS library on npm
Download react-native-word-wrap-text JS library
Keywords
react-nativeiosandroidreactnativetextwordwrap

react-native-word-wrap-text

sample image

Simple word-wrapped text component for React Native.

Features

  1. Support TypeScript
  2. Line-break using \n in text

Next Features

  1. Remove unnecessary empty TextRenderer

Requirements

🚨 This module using lookbehind regular expression, you must enable hermes. Hermes makes you using ESnext features.

Enable hermes like below.

// /android/app.build.gradle

project.ext.react = [
    enableHermes: true,  // modify to true
]

and clean gradle by run command in /android

./gradlew clean

Installation

npm install react-native-word-wrap-text

or

yarn add react-native-word-wrap-text

Usage

import {Text, View} from 'react-native';
import {
  TextAndRendererList,
  TextRenderer,
  WordWrapText,
} from 'react-native-word-wrap-text';

const renderPlainText: TextRenderer = (token, index) => {
  return (
    // it's important to assign key props to root component
    <Text key={index} style={textStyle.plainText}>
      {token}
    </Text>
  );
};
const renderPrimaryText: TextRenderer = (token, index) => {
  return (
    <Text key={index} style={textStyle.primaryText}>
      {token}
    </Text>
  );
};
const renderBoldText: TextRenderer = (token, index) => {
  return (
    <Text key={index} style={textStyle.boldText}>
      {token}
    </Text>
  );
};

// if use same renderer, merge to one string
const textAndRendererList: TextAndRendererList = [
  ['This library is easily customizable. ', renderPlainText],
  ['Now, it supports ', renderPrimaryText],
  ['\\n ', renderBoldText],
  ['for line-break. ', renderPrimaryText],
  ['thank for\nusing this library.', renderPlainText],
];

function SomeComponent (props) {
  // ...

  return (
    <View>
      <WordWrapText
        textAndRenderList={textAndRendererList}
        containerStyle={containerStyle.text}
      />
    </View>
  );
}

🚨 You have to assign key prop to root component at TextRenderer

Props and Types

Props

| Props | type | note | | ------------------ | ----------------------- | ----------------------------------------------------------------- | | textAndRenderList | TextAndRendererList | | | containerStyle | StyleProp<ViewStyle> | View Style Props |

Types

| Types | value | note | |--------------------- |--------------------------------------------- |------------------------------- | | TextRenderer | (token: string, index: number) => ReactNode | Similar to function component | | TextAndRenderer | [string, TextRenderer] | string and TextRenderer tuple | | TextAndRendererList | TextAndRenderer[] | 2D array |

Contributing

See the contributing guide to learn how to contribute to the repository.

License

MIT