Shorten Text - React Native

Question

Shorten Text - React Native

I currently have a React Native application with a FlatList component.

The logic I initially implemented was to display an Expand/Collapse arrow whenever the content at the 100th position in the list is not empty. However, I now realize that this approach is flawed. Changing the font size of my app or using different characters like Chinese text renders this logic ineffective. Therefore, it should not be solely based on character count.

{  alert.charAt(100) !== "" ?
                arrowClicked === true ? 
                <Icon type='materialicons' name='arrow-drop-up' onPress={()=>{this.setFullLength()}}  />
                : 
                <Icon type='materialicons' name='arrow-drop-down' onPress={()=>{this.setFullLength()}}  />
                : null
            }

I need a solution to detect when the text is long and being truncated instead. How can I go about implementing this? Your assistance is greatly appreciated!

javascript css reactjs react-native truncate

Answer 1

Answer №1

Utilize the onTextLayout function to determine line length as shown below.

function CustomText(props) {
  const [showMore, setShowMore] = React.useState(false);
  const [lines, setLines] = React.useState(props.numberOfLines);

  const onTextLayout = (e) => {
    setShowMore(
      e.nativeEvent.lines.length > props.numberOfLines && lines !== 0
    );
  };

  return (
    <View>
      <Text numberOfLines={lines} onTextLayout={onTextLayout}>
        {props.children}
      </Text>
      {showMore && (
        <Button title="Show More"
          onPress={() => {
            setLines(0);
            setShowMore(false);
          }}
        />
      )}
      {!showMore && (
        <Button title="Hide More"
          onPress={() => {
            setLines(props.numberOfLines);
          }}
        />
      )}
    </View>
  );
}

How to Use

  const text =
    'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to mak';

 <CustomText numberOfLines={2}>{text}</CustomText>

You can also pass other properties like styles.

Answer 2

Utilize the onTextLayout function to determine line length as shown below.

function CustomText(props) {
  const [showMore, setShowMore] = React.useState(false);
  const [lines, setLines] = React.useState(props.numberOfLines);

  const onTextLayout = (e) => {
    setShowMore(
      e.nativeEvent.lines.length > props.numberOfLines && lines !== 0
    );
  };

  return (
    <View>
      <Text numberOfLines={lines} onTextLayout={onTextLayout}>
        {props.children}
      </Text>
      {showMore && (
        <Button title="Show More"
          onPress={() => {
            setLines(0);
            setShowMore(false);
          }}
        />
      )}
      {!showMore && (
        <Button title="Hide More"
          onPress={() => {
            setLines(props.numberOfLines);
          }}
        />
      )}
    </View>
  );
}

How to Use

  const text =
    'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to mak';

 <CustomText numberOfLines={2}>{text}</CustomText>

You can also pass other properties like styles.

Shorten Text - React Native

Answer №1

Similar questions

Adding a class to the following DIV and smoothly transitioning the current one out can be achieved using a dynamic number of items in multiple instances

Exploring the process of uploading images to MongoDB buffers using React on the client side

I am having trouble getting my getColor() method to correctly change colors based on the data provided

Utilize context.isPointInPath(x, y) in HTML5 Canvas for intricate shapes that contain multiple paths

How is it possible that I am able to retrieve an image from the public folder but unable to access a

Unable to locate the value property of a null object

Issues have been reported regarding compatibility between iOS7, jquery.touchSwipe, on click and webkit-touch-callout

What is the process of integrating hegel.js with a React application created using create-react-app?

Issue with Flex display not being applied within Material UI Grid Item

Customize the antd theme in a create-react-app project without the need to eject webpack

Exploring table iteration in Angular 7

Having trouble with resolving 'react-transition-group' in MUI IconButton?

HTML/CSS - Enhances user experience by zooming in on select tag when tapped on mobile devices

What is the best way to apply focus to a list element using Javascript?

Choosing one item from an array to showcase in a view [Angular]

What is the process of integrating data from the OpenWeatherMap API into the WindowInfo feature of Google Maps?

Tips for incorporating animated features into a bar graph using jQuery

Rendering based on conditions with a pair of values

Looking to update the location of an element within a canvas using Vue and socket.io?

Is it feasible to update just one key within an exported type using setState in TypeScript?