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.7 to 1.0.8

4

example/package.json

@@ -13,4 +13,4 @@ {

"dependencies": {
"react": "16.11.0",
"react-native": "0.62.2"
"react": "16.13.1",
"react-native": "0.63.2"
},

@@ -17,0 +17,0 @@ "devDependencies": {

233

example/src/ReadMore.js

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

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

@@ -19,102 +26,114 @@ 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 = 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 onTextLayout = useCallback(({ nativeEvent: { layout: { height } } }) => {
setTextHeight(height);
}, [setTextHeight]);
const onTextLayout = useCallback(
({
nativeEvent: {
layout: {height},
},
}) => {
setTextHeight(height);
},
[setTextHeight],
);
const onHiddenTextLayout = useCallback(({ nativeEvent: { layout: { height } } }) => {
setHiddenTextHeight(height);
}, [setHiddenTextHeight]);
const onHiddenTextLayout = useCallback(
({
nativeEvent: {
layout: {height},
},
}) => {
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>
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>
</TouchableOpacity>
</View>
)}
{seeMore && !collapsed && (
<TouchableOpacity onPress={toggle} style={styles.seeLessContainer}>
<Text style={seeLessStyle}>
{seeLessText}
</Text>
</TouchableOpacity>
)}
</View>
);
});
)}
</View>
);
},
);

@@ -156,18 +175,6 @@ const styles = StyleSheet.create({

ReadMore.propTypes = {
style: PropTypes.oneOfType([
PropTypes.object,
PropTypes.array,
]),
seeMoreStyle: PropTypes.oneOfType([
PropTypes.object,
PropTypes.array,
]),
seeLessStyle: PropTypes.oneOfType([
PropTypes.object,
PropTypes.array,
]),
wrapperStyle: PropTypes.oneOfType([
PropTypes.object,
PropTypes.array,
]),
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
seeMoreStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
seeLessStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
wrapperStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
children: PropTypes.any,

@@ -190,10 +197,4 @@ numberOfLines: PropTypes.number,

style: styles.defaultText,
seeMoreStyle: StyleSheet.flatten([
styles.defaultText,
styles.seeMoreText,
]),
seeLessStyle: StyleSheet.flatten([
styles.defaultText,
styles.seeLessText,
]),
seeMoreStyle: StyleSheet.flatten([styles.defaultText, styles.seeMoreText]),
seeLessStyle: StyleSheet.flatten([styles.defaultText, styles.seeLessText]),
wrapperStyle: styles.container,

@@ -200,0 +201,0 @@ text: '',

2

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

@@ -5,0 +5,0 @@ "main": "index.js",

example/yarn.lock
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