rarenatoe / more-or-less Goto Github PK

A Fast & Efficient React Native Wrapper that renders text with more/less buttons.

License: MIT License

Shell 0.57% JavaScript 9.81% Java 30.46% TypeScript 44.60% Swift 0.26% C 0.43% Objective-C 2.05% Ruby 8.64% Objective-C++ 3.17%

more-less react-native text component typescript

more-or-less's Introduction

@rntext/more-or-less

A React Native component that renders text with more/less buttons in just 2 renders.

What does this library do better than others ?

Fully coded in typescript.
Does everything in 2 renders.
Can add custom Text Component.
Can provide custom onPress method, disabling toggle behavior. Useful for using modals and the such.
Optional animated behavior.

Installation

npm install @rntext/more-or-less

yarn add @rntext/more-or-less

Usage

import { MoreOrLess } from "@rntext/more-or-less";

// ...

export default function App() {
  return (
    <MoreOrLess
      numberOfLines={3}
      textComponent={CustomText}
      textButtonStyle={{ color: 'lightblue' }}
      animated
    >
      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. It has survived not only
      five centuries, but also the leap into electronic typesetting, remaining essentially
      unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
      Lorem Ipsum passages, and more recently with desktop publishing software like Aldus
      PageMaker including versions of Lorem.
    </MoreOrLess>
  );
}

Props

Prop	Type	Required	Default	Note
children	string	yes	-	Text to be capped and formatted
numberOfLines	number	yes	-	Number of lines at which it will cap the paragraph
moreText	string	no	'more'	Text for the more button
lessText	string	no	'less'	Text for the less button
animated	boolean	no	false	Whether to animate the expanding/shrinking or not
textButtonStyle	TextStyle	no	undefined	Style for the Text Button
containerStyle	ViewStyle	no	undefined	Style for the container View
onMorePress	() => void	no	expandText	Function used for the more button
textComponent	ComponentType<TextProps>	no	Text	Text component to use in all text
textStyle	TextStyle	no	undefined	Style for the Text component

Note on: Font weight

MoreOrLess will apply the following styles on top of the previous, into the style prop of textComponent:

Apply textStyle.
Then if it is a button:
1. Apply the default button styling: { fontWeight: 'bold' }.
2. Apply textButtonStyle.

If you seek to give the button font a different weight, then you must specify it in the textButtonStyle, otherwise it'll override whatever is in textComponent.

Run example

git clone https://github.com/rarenatoe/more-or-less.git
cd more-or-less/example
yarn install # or npm install
# to run on iOS
yarn ios
#to run on android
yarn android

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

more-or-less's People

Contributors

Stargazers

Watchers

more-or-less's Issues

Spece between more text and the actual text

Hi, thanks for the package. It works really nice.

I think I found a bug. In case of a new line applied into a text, more-or-less component behavior is ('more' text is not aligning to the text)

Another bug would be with (...) Sometimes (when there is no free space available) the component doesn't add extra space between '...' and the 'more text'

animated={true} causing white screen on android.

I was having animated property enabled and it is working fine on iOS but when I checked on android, If I move to that screen it remains white and empty.
Strange enough, All the buttons and everything are there but just not visible. I can press any button on that screen as I know where should be that buttons and everything starts showing up fine.
I started looking into what can cause the problem by commenting out components one by one and then if I comment out this component then it starts working normally.
So I tried looking at all properties that I am using with this component and I found that if I remove the animated property it fixes the issue so right now I enabled animated only for iOS.

Dynamically changing the children doesn't change what is shown in the less

lines is not updated when the children change so when you swap out the text, the full text isn't laid out again so it keeps the old text. When you press "more" it expands to the correct, new text.

It isn't clear to me how to easily invalidate a whole bunch of these on a screen at once. If I come up with a solution/patch I will post back here.

Also, thanks for the cool & efficient component!

(feature request) Allow us to change "more" and "less" text

Can textButtonStyle accept a color conditional?

THANK YOU FOR A HANDY PACKAGE --
I am writing a React Native/Expo app that has Light/Dark mode triggered by an icon onPress.

Can textButtonStyle accept a conditional?
When clicking onPress action button on the page, the MoreOrLess section resets to initial state (collapsed).

Case: User Bio TEXT on screen is black when in Light mode and the "MORE" text is the color I set -- Blue.
Pushing the onPress Light/Dark Mode icon --
MoreOrLess section resets back to collapsed
User Bio TEXT is black (expected white)
"MORE" text is white (expected white)
Pressing "MORE" --
Text section expands -- text is black (expected white)
"LESS" text is white (expected white)

Here is the code -- I only included specific sections of the code:

`
import { MoreOrLess } from "@rntext/more-or-less";
import CustomText from "./CustomText"; {/* From your example */}
import {useColorScheme} from "nativewind";
import {MaterialCommunityIcons} from '@expo/vector-icons';

const ProfilePage = () => {

const {colorScheme, toggleColorScheme} = useColorScheme();

return (

<MaterialCommunityIcons name="theme-light-dark" size={36} color="white"
onPress={() => toggleColorScheme(colorScheme === "light" ? "dark" : "light")}/>

<MoreOrLess
numberOfLines={1}
textComponent={CustomText}
textButtonStyle={{ color: colorScheme === 'dark' ? 'white' : 'black' }}
animated
>
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

);

};

export default ProfilePage

Any help would be appreciated.
Thanks