How to Create a Read More/Less Button in React Native?

Aug 24, 2022 . Admin



Now, let's see article of react native create a show more/less button. I explained simply about add read more button to string html react native. In this article, we will implement a how to create a read more/less button in react native. you will learn react native show more text example. So, let's follow few step to create example of react native read more less example.

In this example,We will long text add to show more and less button in react native.you can easy to add show more and less button in react native.we will create to ExpandableText component.This component two props children and descriptionLength. The complete example below shows you how to do that.

Step 1: Download Project

In the first step run the following command to create a project.

expo init ExampleApp
Step 2: App.js

In this step, You will open the App.js file and put the code.

App.js
import { useState } from 'react';
import './App.css';

// Createa reusable Read More/Less component
const ExpandableText = ({ children, descriptionLength }) => {
  const fullText = children;

  // Set the initial state of the text to be collapsed
  const [isExpanded, setIsExpanded] = useState(false);

  // This function is called when the read more/less button is clicked
  const toggleText = () => {
    setIsExpanded(!isExpanded);
  };

  return (
    

{isExpanded ? fullText : `${fullText.slice(0, descriptionLength)}...`} {isExpanded ? 'Show less' : 'Show more'}

); }; // Main App function App() { return ( <> <div className='container'> <div className='card'> <h1 className='title'>Welcome To Mywebtuts.com</h1> <p> {/* Show 200 characters in the beginning */} <ExpandableText descriptionLength={200}> Aliquam maximus, purus vel tempus luctus, libero ipsum consectetur purus, eu efficitur mi nunc sed purus. Etiam tristique sit amet nisi vel rhoncus. Vestibulum porta, metus sit amet tincidunt malesuada, dui sapien egestas magna, quis viverra turpis sapien a dolor. Fusce ultrices eros eget tincidunt viverra. Ut a dapibus erat, vel cursus odio. Phasellus erat enim, volutpat vel lacus eu, aliquam sodales turpis. Fusce ipsum ex, vehicula tempor accumsan nec, gravida at eros. In aliquam, metus id mollis interdum, nunc sem dignissim quam, non iaculis tortor erat nec eros. Nunc sollicitudin ac dolor eget lobortis. Aenean suscipit rutrum dolor in euismod. Curabitur quis dapibus lectus. Mauris enim leo, condimentum ac elit sit amet, iaculis vulputate sem. </ExpandableText> </p> </div> </div> </> ); } export default App;
Step 3: App.css

In this step, You will open the App.css file and put the code.

App.css
.container {
  width: 100%;
  margin: 50px auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.card {
  width: 60%;
  padding: 15px 20px;
  background: #fffde7;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}

.text {
  width: 100%;
}

/* Style the read more/less button */
.toggle-button {
  margin-left: 7px;
  color: blue;
  cursor: pointer;
}

.toggle-button:hover {
  color: red;
  text-decoration: underline;
}
Step 4: Run Project

In the last step run your project using the below command.

expo start

You can QR code scan in Expo Go Application on mobile.

Output:

It will help you...

react native create a show more/less button, add read more button to string html react native, how to create a read more/less button in react native, react native show more text example, react native read more less example
#React Native