React native library to show text in a brief way and expand it when needed. It is a lightweight inline read more text component. It is written in Typescript and supports both TS/JS. It can be used with react native cli and expo both.
npm i @amuizz/read-more-text --save
or with yarn
yarn add @amuizz/read-more-text
import React from 'react';
import { View } from 'react-native';
import ReadMoreText from '@amuizz/read-more-text';
const Test = () => {
return (
<View>
<ReadMoreText numberOfLines={1} readMoreText={"read more"} readLessText={"read less"} readMoreStyle={{color: "#CACACA"}} readLessStyle={{color: "#000"}} >
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book</ReadMoreText>
</View>
);
};
export default Test;
Prop | Type | Required | Note |
---|---|---|---|
style |
object or array |
no | text style |
seeMoreText |
string |
no | defaults to more |
seeMoreStyle |
object or array |
no | text style for more text |
seeLessText |
string |
no | defaults to less |
seeLessStyle |
object or array |
no | text style for less text |
numberOfLines |
number |
no | defaults to 1 |
Any additional props can be passed down to underlying Text
component.