azir-view-more-text v1.0.3

Azir Framwork : https://azir.io/docs

Azir View More Text

A super lightweight plugin to expand/collapse text in React-Native. Truncated text is ended with ... .

Installation

to install the latest version of azir-view-more-text you only need to run:

npm install azir-view-more-text --save

or

yarn add azir-view-more-text

Examples

Basic

import ViewMore from "azir-view-more-text";
---
<ViewMore selectable textStyle={ { width: 300 } } numberOfLines={1}>
  React Native lets you create truly native apps and doesn't compromise on your users' experience. It provides a core set of platform agnostic native components like View,
  Text, and Image that map directly to the platform’s native UI building blocks.
</ViewMore>

Advance

import ViewMore from "azir-view-more-text";
---
<ViewMore viewLessStyle={ {color:"blue"} } viewMoreStyle={ {color:"#ff9900"} }
viewLessText="مشاهدة القليل" viewMoreText="مشاهدة المزيد"
textStyle={ { width: 300, fontSize: 20, textAlign: "right" ,color:"green" } } numberOfLines={3}>
  تتميز اللغة العربية بأصالة ماضيها؛ فهي من أقدم اللغات في العالم، فهي لغة الرسول محمد صلى الله عليه وسلم، كما أنها اللغة التي نزل بها كلام الله تعالى في القرآن الكريم؛ أي
  قبل 1400 عام، ومازالت من اللغات المستخدمة بين العرب حتى يومنا هذا
</ViewMore>

Custom Footer

import ViewMore from "azir-view-more-text";
---
 <ViewMore
  renderRevealedFooter={onPress => {
    return <Text onPress={onPress}>View Less</Text>;
  }}
  renderTruncatedFooter={onPress => {
    return <Text onPress={onPress}>View More</Text>;
  }}
>
  تتميز اللغة العربية بأصالة ماضيها؛ فهي من أقدم اللغات في العالم، فهي لغة الرسول محمد صلى الله عليه وسلم، كما أنها اللغة التي نزل بها كلام الله تعالى في القرآن الكريم؛ أي
  قبل 1400 عام، ومازالت من اللغات المستخدمة بين العرب حتى يومنا هذا
</ViewMore>

Props

• numberOfLines
• viewMoreText
• viewLessText
• textStyle
• viewMoreStyle
• viewLessStyle
• renderTruncatedFooter
• renderRevealedFooter

you can also add any react native text props

Reference

numberOfLines

Number of Text lines to be displayed.

viewMoreText

override view more text.

viewLessText

override view more text.

textStyle

override main content string style for example if you want to change color,size ....

viewMoreStyle

override view more text style for example if you want to change color,size ....

viewLessStyle

override view Less text style for example if you want to change color,size ....

renderTruncatedFooter

Display View more footer when truncated text rendered ....

renderRevealedFooter

Display View Less footer when all text rendered ....