Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@fawazahmed/react-native-read-more

Package Overview
Dependencies
Maintainers
1
Versions
38
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@fawazahmed/react-native-read-more - npm Package Compare versions

Comparing version 1.0.8 to 1.0.9

6

example/App.js
import React from 'react';
import { SafeAreaView, StyleSheet, View } from 'react-native';
import {SafeAreaView, StyleSheet, View} from 'react-native';
import ReadMore from './src/ReadMore';

@@ -10,3 +10,5 @@

<ReadMore>
{`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 Ipsum.`}
{
"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 Ipsum."
}
</ReadMore>

@@ -13,0 +15,0 @@ </View>

219

example/src/ReadMore.js

@@ -1,9 +0,2 @@

import React, {
memo,
useState,
useEffect,
useCallback,
Component,
PureComponent,
} from 'react';
import React, {memo, useState, useEffect, useCallback} from 'react';
import PropTypes from 'prop-types';

@@ -26,114 +19,112 @@ import {

const ReadMore = memo(
({
numberOfLines,
style,
wrapperStyle,
children,
seeMoreStyle,
seeMoreText,
seeLessStyle,
seeLessText,
animate,
backgroundColor,
customTextComponent: TextComponent,
...restProps
}) => {
const [textHeight, setTextHeight] = useState(0);
const [hiddenTextHeight, setHiddenTextHeight] = useState(0);
const [seeMore, setSeeMore] = useState(false);
const [collapsed, setCollapsed] = useState(true);
const [afterCollapsed, setAfterCollapsed] = useState(true);
const ReadMore = ({
numberOfLines,
style,
wrapperStyle,
children,
seeMoreStyle,
seeMoreText,
seeLessStyle,
seeLessText,
animate,
backgroundColor,
customTextComponent: TextComponent,
...restProps
}) => {
const [textHeight, setTextHeight] = useState(0);
const [hiddenTextHeight, setHiddenTextHeight] = useState(0);
const [seeMore, setSeeMore] = useState(false);
const [collapsed, setCollapsed] = useState(true);
const [afterCollapsed, setAfterCollapsed] = useState(true);
const onTextLayout = useCallback(
({
nativeEvent: {
layout: {height},
},
}) => {
setTextHeight(height);
const onTextLayout = useCallback(
({
nativeEvent: {
layout: {height},
},
[setTextHeight],
);
}) => {
setTextHeight(height);
},
[setTextHeight],
);
const onHiddenTextLayout = useCallback(
({
nativeEvent: {
layout: {height},
},
}) => {
setHiddenTextHeight(height);
const onHiddenTextLayout = useCallback(
({
nativeEvent: {
layout: {height},
},
[setHiddenTextHeight],
);
}) => {
setHiddenTextHeight(height);
},
[setHiddenTextHeight],
);
const toggle = useCallback(() => {
setCollapsed((prev) => !prev);
if (animate) {
LayoutAnimation.configureNext(
LayoutAnimation.create(
300,
LayoutAnimation.Types.linear,
LayoutAnimation.Properties.opacity,
),
);
}
}, [setCollapsed, animate]);
const toggle = useCallback(() => {
setCollapsed((prev) => !prev);
if (animate) {
LayoutAnimation.configureNext(
LayoutAnimation.create(
300,
LayoutAnimation.Types.linear,
LayoutAnimation.Properties.opacity,
),
);
}
}, [setCollapsed, animate]);
useEffect(() => {
if (!hiddenTextHeight || !textHeight) {
return;
}
useEffect(() => {
if (!hiddenTextHeight || !textHeight) {
return;
}
setSeeMore(hiddenTextHeight > textHeight);
}, [textHeight, hiddenTextHeight]);
setSeeMore(hiddenTextHeight > textHeight);
}, [textHeight, hiddenTextHeight]);
useEffect(() => {
setAfterCollapsed(collapsed);
}, [collapsed]);
useEffect(() => {
setAfterCollapsed(collapsed);
}, [collapsed]);
const textProps = collapsed
? {
onLayout: onTextLayout,
numberOfLines,
ellipsizeMode: 'tail',
}
: {};
const textProps = collapsed
? {
onLayout: onTextLayout,
numberOfLines,
ellipsizeMode: 'tail',
}
: {};
return (
<View style={wrapperStyle}>
<TextComponent
style={StyleSheet.flatten([
Array.isArray(style) ? StyleSheet.flatten(style) : style,
styles.hiddenText,
])}
numberOfLines={numberOfLines + 1}
ellipsizeMode={'clip'}
onLayout={onHiddenTextLayout}>
{children || ''}
</TextComponent>
<TextComponent {...restProps} style={style} {...textProps}>
{children || ''}
</TextComponent>
{seeMore && collapsed && afterCollapsed && (
<View style={styles.seeMoreContainer}>
<TouchableOpacity
onPress={toggle}
style={[styles.seeMoreButton, {backgroundColor}]}>
<TextComponent {...restProps} style={style}>
{'... '}
</TextComponent>
<Text style={seeMoreStyle}>{seeMoreText}</Text>
</TouchableOpacity>
</View>
)}
{seeMore && !collapsed && (
<TouchableOpacity onPress={toggle} style={styles.seeLessContainer}>
<Text style={seeLessStyle}>{seeLessText}</Text>
return (
<View style={wrapperStyle}>
<TextComponent
style={StyleSheet.flatten([
Array.isArray(style) ? StyleSheet.flatten(style) : style,
styles.hiddenText,
])}
numberOfLines={numberOfLines + 1}
ellipsizeMode={'clip'}
onLayout={onHiddenTextLayout}>
{children || ''}
</TextComponent>
<TextComponent {...restProps} style={style} {...textProps}>
{children || ''}
</TextComponent>
{seeMore && collapsed && afterCollapsed && (
<View style={styles.seeMoreContainer}>
<TouchableOpacity
onPress={toggle}
style={[styles.seeMoreButton, {backgroundColor}]}>
<TextComponent {...restProps} style={style}>
{'... '}
</TextComponent>
<Text style={seeMoreStyle}>{seeMoreText}</Text>
</TouchableOpacity>
)}
</View>
);
},
);
</View>
)}
{seeMore && !collapsed && (
<TouchableOpacity onPress={toggle} style={styles.seeLessContainer}>
<Text style={seeLessStyle}>{seeLessText}</Text>
</TouchableOpacity>
)}
</View>
);
};

@@ -186,7 +177,5 @@ const styles = StyleSheet.create({

customTextComponent: PropTypes.oneOfType([
Component,
PureComponent,
memo,
PropTypes.func,
Text,
PropTypes.node,
PropTypes.element,
PropTypes.elementType,
]),

@@ -209,2 +198,2 @@ };

export default ReadMore;
export default memo(ReadMore);

10

package.json
{
"name": "@fawazahmed/react-native-read-more",
"version": "1.0.8",
"version": "1.0.9",
"description": "A simple react native library to show large blocks of text in a condensed manner with the ability to collapse and expand.",

@@ -28,3 +28,6 @@ "main": "index.js",

],
"author": "Fawaz Ahmed",
"author": {
"name": "Fawaz Ahmed",
"email": "fawaz_ahmed@live.com"
},
"license": "MIT",

@@ -37,3 +40,6 @@ "bugs": {

"prop-types": "^15.7.2"
},
"publishConfig": {
"registry": "https://registry.npmjs.org/"
}
}
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc