react-native-word-wrap-text

Simple word-wrapped text component for React Native
react-native-word-wrap-text
Simple word-wrapped text component for React Native.
Features
- Support TypeScript
- Line-break using
\n
in text
Next Features
- 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