react-native-animated-read-more

A beautiful, animated React Native component that truncates text and provides "read more" / "read less" functionality with smooth animations.

Features

• 🎨 Smooth expand/collapse animations
• 📱 Cross-platform (iOS & Android)
• 🎯 Customizable styling
• ⚡ TypeScript support
• 🎪 Configurable number of lines
• 🎭 Custom read more/less text
• 🔧 Easy to integrate

Installation

npm install react-native-animated-read-more
# or
yarn add react-native-animated-read-more

Usage

import React from 'react';
import { View, StyleSheet } from 'react-native';
import {ReadMoreText} from 'react-native-animated-read-more';

const App = () => {
  return (
    <View style={styles.container}>
      <ReadMoreText
        numberOfLines={3}
        style={styles.text}
        readMoreText="Show more"
        readLessText="Show less"
        readMoreStyle={styles.readMoreButton}
        readLessStyle={styles.readLessButton}
        animationDuration={300}
      >
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod 
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim 
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate 
        velit esse cillum dolore eu fugiat nulla pariatur.
      </ReadMoreText>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#fff',
  },
  text: {
    fontSize: 16,
    lineHeight: 24,
    color: '#333',
  },
  readMoreButton: {
    color: '#007AFF',
    fontWeight: 'bold',
  },
  readLessButton: {
    color: '#007AFF',
    fontWeight: 'bold',
  },
});

export default App;

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | children | string | Required | The text content to display | | numberOfLines | number | 1 | Number of lines to show when collapsed | | readMoreText | string | "more" | Text for the expand button | | readLessText | string | "less" | Text for the collapse button | | style | TextStyle | {} | Style for the main text | | readMoreStyle | TextStyle | {color: "black"} | Style for the "read more" button | | readLessStyle | TextStyle | {color: "black"} | Style for the "read less" button | | animationDuration | number | 300 | Duration of expand/collapse animation in ms | | easing | string | 'ease-in-out' | Animation easing type |

Advanced Usage

Custom Animation

<ReadMoreText
  numberOfLines={2}
  animationDuration={500}
  easing="ease-out"
  readMoreStyle={{
    color: '#FF6B6B',
    fontWeight: '600',
    marginLeft: 5,
  }}
  readLessStyle={{
    color: '#4ECDC4',
    fontWeight: '600',
    marginLeft: 5,
  }}
>
  Your long text content here...
</ReadMoreText>

With Custom Styling

<ReadMoreText
  numberOfLines={4}
  style={{
    fontSize: 18,
    lineHeight: 26,
    color: '#2C3E50',
    fontFamily: 'System',
  }}
  readMoreStyle={{
    color: '#E74C3C',
    fontWeight: 'bold',
    textDecorationLine: 'underline',
  }}
  readLessStyle={{
    color: '#27AE60',
    fontWeight: 'bold',
    textDecorationLine: 'underline',
  }}
>
  Your content here...
</ReadMoreText>

Animation Types

The component supports various easing types:

• linear
• ease
• ease-in
• ease-out
• ease-in-out

Platform Compatibility

• ✅ iOS
• ✅ Android
• ✅ React Native 0.60+

TypeScript Support

This package includes TypeScript definitions. All props are fully typed for better development experience.

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

MIT License - see the LICENSE file for details.

Changelog

v1.0.0

• Initial release
• Basic read more/less functionality
• Smooth animations
• TypeScript support
• Cross-platform compatibility

Made with ❤️ for the React Native community