kashishgrover / React Native See More Inline
Show a "read more", "see more", "read less", "see less" inline with your text in React Native
Stars: ✭ 141
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to React Native See More Inline
Nlp Pretrained Model
A collection of Natural language processing pre-trained models.
Stars: ✭ 122 (-13.48%)
Mutual labels: text
Scribble
Efficient multi-effects text renderer for GameMaker Studio 2.3.1
Stars: ✭ 123 (-12.77%)
Mutual labels: text
Youtube player
A flutter plugin to play Youtube Videos without API Key in range of Quality(144p, 240p,360p,480p,720p and 1080p).
Stars: ✭ 118 (-16.31%)
Mutual labels: inline
Baffle
A tiny javascript library for obfuscating and revealing text in DOM elements. 😲
Stars: ✭ 1,721 (+1120.57%)
Mutual labels: text
Textrecognitiondatagenerator
A synthetic data generator for text recognition
Stars: ✭ 2,075 (+1371.63%)
Mutual labels: text
Fastpunct
Punctuation restoration and spell correction experiments.
Stars: ✭ 121 (-14.18%)
Mutual labels: text
Snodge
Randomly mutate JSON, XML, HTML forms, text and binary data for fuzz testing
Stars: ✭ 121 (-14.18%)
Mutual labels: text
Common Tags
🔖 Useful template literal tags for dealing with strings in ES2015+
Stars: ✭ 1,761 (+1148.94%)
Mutual labels: inline
Notepanda
📃 A simple cross-platform notepad. Based on Qt and C++.
Stars: ✭ 134 (-4.96%)
Mutual labels: text
Eyo
🦔 CLI for restoring the letter «ё» (yo) in russian texts
Stars: ✭ 119 (-15.6%)
Mutual labels: text
Assignment writer
So your teacher told you to upload written assignments? Hate writing assigments? This tool will help you convert your text to handwriting ;-; https://saiteja69.github.io/Assignment_Writer/
Stars: ✭ 143 (+1.42%)
Mutual labels: text
Peep
The CLI text viewer tool that works like less command on small pane within the terminal window.
Stars: ✭ 139 (-1.42%)
Mutual labels: text
Dynamic Toasts
Custom toasts with color and icon for Android.
Stars: ✭ 132 (-6.38%)
Mutual labels: text
react-native-see-more-inline
Show a "read more", "see more", "read less", "see less" inline with your text in React Native
My motivation of building this was that I couldn't find any library/implementation that would place the "see more" link inline with the text. All the other implementations I found would place the link under the text. This package uses text width, and using a simple binary search it (almost) accurately calculates where it should place the "see more" link.
Installing the package
- Install
react-native-text-sizev4.0.0-rc.1 -
yarn add react-native-see-more-inlineornpm install --save react-native-see-more-inline
Note: This package will not work with expo managed projects. The dependency
react-native-text-sizelinks natively. Till we have a dependency on this package to measure the text width, this limitation will remain.
Usage
import SeeMore from 'react-native-see-more-inline';
<SeeMore numberOfLines={2}>
{VERY_LARGE_TEXT}
</SeeMore>
<SeeMore numberOfLines={2} linkStyle={{ fontWeight: '500' }}>
{VERY_LARGE_TEXT}
</SeeMore>
Props
| Prop | Default Value | Required | Type |
|---|---|---|---|
| numberOfLines | - | yes | number |
| linkColor | '#2E75F0' | no | string |
| linkPressedColor | '#163772' | no | string |
| linkStyle | undefined | no | array/object |
| seeMoreText | 'see more' | no | string |
| seeLessText | 'see less' | no | string |
| style | { fontFamily: undefined, fontSize: 14, fontWeight: '300' } |
no | array/object |
Running the example
cd exampleyarn install- Terminal 1 -
yarn start - Terminal 2 -
yarn run wml - Terminal 3 -
yarn run ios/yarn run android
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].