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!

javascriptcssreactjsreact-nativetruncate

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.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can a variable be exported from a React component?

Is there a technique to export a variable from a React component for use in a custom hook? The code snippet is as follows:- function App() { const SignIn=()=>{ //Some code here var userId = data.info.username; //Some code h ...

javascriptreactjsreact-hooks

Tips on positioning the image to the left of your content instead of above it

Currently, I am following a tutorial on Flask and attempting to include the profile picture in each article displayed on the website. Here is the code snippet used to display an article: <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a ...

htmlcsstwitter-bootstrap

Design a recurring report using an endless JavaScript cycle

I am in the process of creating a brand new scheduled report and have encountered an issue. How can I incorporate a script that includes a loop to run a specific function every 10 seconds? Here's what I have so far: var count = 1; while(count > 0 ...

javascriptreportcognos

ngOptions compare by actual value

My webserver (node.js) serves a JSON file with a list of languages in the format: { "en" : "English", "fr" : "French" } and a separate JSON settings dictionary like this: { "currentLanguage" : "en" }. The select statement is as follows: <select ng-opti ...

javascriptjsonangularjsng-options

Adding a new column to a table that includes a span element within the td element

I am attempting to add a table column to a table row using the code below: var row2 = $("<tr class='header' />").attr("id", "SiteRow"); row2.append($("<td id='FirstRowSite'><span><img id='Plus' s ...

javascriptjqueryhtmlappend

``There seems to be a problem with the ngb time picker when using the up and

Currently, I am utilizing Bootstrap 4 and NG Bootstrap time picker for a project in Angular 10. Despite correctly adding all the code, I have encountered an issue where the up and down arrows on the time picker are not functioning as expected. Below is a s ...

javascriptangularng-bootstrap

Dynamic React animation with sliding elements

When jumping between the second and third "page" of content, I am unable to determine the reason why it is happening. The content is displayed as an absolute position. Check out the sandbox here: https://codesandbox.io/s/nostalgic-bhabha-d1dloy?file=/src ...

cssreactjscss-animationsreact-transition-group

Updating $data within a VueJS directiveIs there something else you

We have a component and a directive. The structure of our component data is as follows: { langs: [ { title: '', content: '' }, { title: '', content: ...

javascriptdirectivevuejs2vue.js

Looking to implement pyperclip functionality on Heroku platform

Is it feasible to utilize pyperclip on Heroku with a Selenium application in order to copy something to the clipboard? Since the platform utilizes a 'headless' browser and lacks a GUI, accessing the clipboard is challenging. Is there any way for ...

javascriptpythonseleniumherokupyperclip

My selection of jQuery multiselect is experiencing issues with enabling disabled options

Incorporating the chosen jQuery plugin into my project has presented me with a challenge. The issue at hand is listed below. I have implemented a dropdown menu that includes both continents and countries in the same list. The specific scenario I am encou ...

javascriptjqueryajax

Creating a reusable React component for integration into various MVC projects within Visual Studio 2017

Creating an MVC website in Visual Studio with the following technology stack: TypeScript React Components Redux C# backend I am interested in packaging and consolidating the company's <Header />, its child components (<Navbar />, etc.), ...

c#reactjsmodel-view-controllernpmnuget

Having trouble with the menu toggle button on Bootstrap 4?

When using Bootstrap 4, the breadcrumb button may not function properly when the header becomes responsive. I have ensured that Bootstrap 4 CSS and JS are included in the project. Please assist me in resolving this issue. Code: .navbar { height:100 ...

javascripthtmlcssbootstrap-4

Tips on storing the amount of time a user devotes to answering questions on my form into a database

I am facing an issue with storing the "duration" in my database. The "duration" I aim to store is the time spent by the user answering a question I created. When they click the submit button, I want to save the duration they spent in the database. Below i ...

javascriptphphtmlmysqllaravel

What could be the reason behind the ajax call not getting triggered?

Upon page load, the first alert is displaying correctly. However, the alert inside the ajax call is not triggering. It appears that the ajax call itself is not functioning as intended - it is supposed to invoke a method in the controller, but no longer s ...

javascriptjqueryajax

Contact a relaxation service periodically to pause its operation

To continuously check the status of a webservice, I need to make a REST call every x seconds (3000 ms) until the desired result is obtained or until it has been attempted 12 times. The call should also stop once the expected status is received: function m ...

javascriptangularjs

determining the dimensions of an SVG element following skew transformation using JavaScript

I have an SVG element called rect that has the following attributes: <rect x="50" y="10" width="20" height="30" style="stroke: #000000; fill:none;" /> After applying a transformation of skewX(10), the dimensions of the rectangle are altered. How c ...

javascriptsvg

"Unable to execute validateOptions as it is not a recognized function

ERROR src/pages/trade/trade-sagas/trade-sagas.unit.test.js ● Test suite failed to run Cannot locate module 'axios' from 'src/pages/trade/trade-sagas/trade-sagas.unit.test.js' 1 | import { runSaga } from "redux-saga"; &g ...

reactjsnpmjestjsenzyme

Implementing a delay in a CSS menu design while still ensuring compatibility with browsers that do not support JavaScript

I currently have a three-tiered menu that relies on :hover and is controlled by css alone. I am now looking to introduce a slight delay to the hovers, which means transitioning my css :hovers to a .hover class and incorporating jQuery. My concern is whet ...

jqueryhtmlcss

Dynamic styling based on conditions in Next.js

After a lengthy hiatus, I'm diving back in and feeling somewhat disconnected. In short, I have encountered a minor challenge. I successfully created a navigation menu pop-out that toggles classname based on the isActive condition in React. However, I& ...

javascriptnext.jsconditional-rendering

Guide on creating my inaugural HTML embeddable widget?

A client recently requested me to create a JavaScript (MooTools)/HTML/CSS/PHP based game as a deployable widget. This will be my first time developing a widget, so I am seeking advice and insights to help me navigate any potential challenges from experie ...

phpjavascripthtmlcsswidget