### Running the Example Project

Source: https://github.com/fawaz-ahmed/react-native-read-more/blob/master/README.md

Instructions to clone the repository, navigate to the example directory, install dependencies, and run the example on iOS or Android.

```bash
git clone https://github.com/fawaz-ahmed/react-native-read-more.git
cd react-native-read-more/example
yarn install # or npm install

# to run on iOS
yarn ios

#to run on android
yarn android

```

--------------------------------

### Install React Native Read More with npm

Source: https://github.com/fawaz-ahmed/react-native-read-more/blob/master/README.md

Use this command to install the library using npm.

```bash
npm i @fawazahmed/react-native-read-more --save
```

--------------------------------

### Install React Native Read More with yarn

Source: https://github.com/fawaz-ahmed/react-native-read-more/blob/master/README.md

Use this command to install the library using yarn.

```bash
yarn add @fawazahmed/react-native-read-more
```

--------------------------------

### Basic Usage Example

Source: https://github.com/fawaz-ahmed/react-native-read-more/blob/master/README.md

Demonstrates how to import and use the ReadMore component in a React Native application. Configure the number of lines and text styles.

```javascript
import React from 'react';
import {SafeAreaView, StyleSheet, View} from 'react-native';
import ReadMore from '@fawazahmed/react-native-read-more';

const Home = () => {
  return (
    <SafeAreaView style={styles.safe}>
      <View style={styles.root}>
        <ReadMore numberOfLines={3} style={styles.textStyle}>
          {
            "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
          }
        </ReadMore>
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  safe: {
    flex: 1,
  },
  root: {
    flex: 1,
    padding: 16,
  },
  textStyle: {
    fontSize: 14,
  },
});

export default Home;

```

--------------------------------

### Styled Expansion Example

Source: https://github.com/fawaz-ahmed/react-native-read-more/blob/master/_autodocs/README.md

Shows how to apply custom styles to the ReadMore component and its 'see more' link. Use `style` for the text container and `seeMoreStyle` for the expansion link.

```javascript
<ReadMore
  numberOfLines={4}
  style={{ fontSize: 16, color: '#333' }}
  seeMoreStyle={{ color: '#0066cc' }}
>
  {longText}
</ReadMore>
```

--------------------------------

### Wrapper Style Prop: Responsive Example

Source: https://github.com/fawaz-ahmed/react-native-read-more/blob/master/_autodocs/api-reference/Props-Deep-Dive.md

Use an array of styles with `wrapperStyle` to apply responsive styling to the outer View container, adapting to different screen sizes.

```javascript
// Responsive wrapper
<ReadMore
  numberOfLines={3}
  wrapperStyle={[
    styles.wrapper,
    isTablet && { paddingHorizontal: 32 },
  ]}
>
  {text}
</ReadMore>
```

--------------------------------

### Basic Expansion Example

Source: https://github.com/fawaz-ahmed/react-native-read-more/blob/master/_autodocs/README.md

Demonstrates the basic usage of the ReadMore component to expand text after a certain number of lines. Use `numberOfLines` to set the initial collapsed state.

```javascript
<ReadMore numberOfLines={3}>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit...
</ReadMore>
```

--------------------------------

### Basic React Native Read More Usage

Source: https://github.com/fawaz-ahmed/react-native-read-more/blob/master/_autodocs/api-reference/ReadMore.md

Demonstrates the fundamental implementation of the ReadMore component with a specified number of lines. Ensure you have the component installed and imported.

```javascript
import React from 'react';
import { SafeAreaView, StyleSheet, View } from 'react-native';
import ReadMore from '@fawazahmed/react-native-read-more';

const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.content}>
        <ReadMore numberOfLines={3}>
          Lorem Ipsum is simply dummy text of the printing and typesetting 
          industry. Lorem Ipsum has been the industry's standard dummy text 
          ever since the 1500s, when an unknown printer took a galley of type 
          and scrambled it to make a type specimen book.
        </ReadMore>
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: { flex: 1 },
  content: { padding: 16 },
});

export default App;
```

--------------------------------

### Helper Function Integration Example

Source: https://github.com/fawaz-ahmed/react-native-read-more/blob/master/_autodocs/api-reference/Helper-Utilities.md

Demonstrates the workflow of using `getTextByChildren`, `linesToCharacters`, and `insertAt` for text truncation in a React Native component.

```javascript
// 1. Component measures full text and gets line data
const lines = [ /* from onTextLayout */ ];

// 2. Convert lines to character string
const fullText = linesToCharacters(lines);
// fullText = "Lorem Ipsum is simply dummy text..."

// 3. Determine break position (e.g., character 42)
const breakPosition = 42;

// 4. Extract children elements
const children = "Lorem Ipsum is simply dummy text...";
const extracted = getTextByChildren(children, Text);

// 5. Insert newline at break position
const modified = insertAt(extracted[0].content, '\n', breakPosition);
// modified = "Lorem Ipsum is simply dummy\n text..."

// 6. Use modified children for truncated display
```

--------------------------------

### ReadMore Component with onReady Callback

Source: https://github.com/fawaz-ahmed/react-native-read-more/blob/master/_autodocs/DOCUMENTATION-INDEX.txt

Shows how to use the `onReady` callback to get information about the initial state of the text, such as whether it can be expanded.

```javascript
import React from 'react';
import { View, Text } from 'react-native';
import ReadMore from 'react-native-read-more';

const MyComponent = () => (
  <View>
    <ReadMore
      numberOfLines={2}
      onReady={({ canExpand, expandedLinesCount }) => {
        console.log(`Can expand: ${canExpand}, Initial lines: ${expandedLinesCount}`);
      }}
    >
      This text is used to test the onReady callback. It will log whether the text can be expanded and how many lines it initially occupies to the console.
    </ReadMore>
  </View>
);
```

--------------------------------

### Example Usage of onReady Callback

Source: https://github.com/fawaz-ahmed/react-native-read-more/blob/master/_autodocs/types.md

Demonstrates how to use the onReady callback prop with the ReadMore component. It logs whether the text fits within the line limit or the total expanded line count.

```jsx
<ReadMore
  numberOfLines={3}
  onReady={({ canExpand, expandedLinesCount }) => {
    if (!canExpand) {
      console.log('Text fits within the line limit, no expansion needed');
    } else {
      console.log(`Text spans ${expandedLinesCount} lines total`);
    }
  }}>
  {textContent}
</ReadMore>
```

--------------------------------

### Integrate Analytics Tracking

Source: https://github.com/fawaz-ahmed/react-native-read-more/blob/master/_autodocs/api-reference/Advanced-Usage.md

Integrate analytics by using the `onReady`, `onExpand`, and `onCollapse` props to track user engagement metrics. This example shows how to track expansion/collapse counts and content details.

```javascript
const [metrics, setMetrics] = useState({
  canExpand: false,
  totalLines: 0,
  expandCount: 0,
  collapseCount: 0,
});

<ReadMore
  numberOfLines={3}
  onReady={({ canExpand, expandedLinesCount }) => {
    setMetrics(prev => ({
      ...prev,
      canExpand,
      totalLines: expandedLinesCount,
    }));
  }}
  onExpand={() => {
    setMetrics(prev => ({ ...prev, expandCount: prev.expandCount + 1 }));
    analytics.track('read_more_expand', {
      totalLines: metrics.totalLines,
      contentLength: text.length,
    });
  }}
  onCollapse={() => {
    setMetrics(prev => ({ ...prev, collapseCount: prev.collapseCount + 1 }));
    analytics.track('read_more_collapse');
  }}>
  {text}
</ReadMore>
```

--------------------------------

### Collapsed State Snapshot

Source: https://github.com/fawaz-ahmed/react-native-read-more/blob/master/_autodocs/api-reference/State-Management.md

An example of the internal state when the component is in its initial collapsed state, showing measurement data, control flags, and content structure.

```javascript
{
  // Measurements
  lines: [{text: 'Lorem...', width: 300, ...}, ...],
  collapsedLines: [{text: 'Lorem...', width: 300, ...}, ...],
  textWidth: 350,
  seeMoreWidth: 80,
  truncatedLineOfImpact: 'dummy text of the',
  seeMoreRightPadding: 5,
  
  // Control
  seeMore: true,
  collapsed: true,
  afterCollapsed: true,
  isMeasured: true,
  isReady: true,
  
  // Content
  collapsedChildren: [/* modified children with \n */],
  hideEllipsis: false,
  
  // Hidden components
  mountHiddenTextOne: false,
  mountHiddenTextTwo: false,
  mountHiddenTextThree: false,
  mountHiddenTextFour: false,
  mountHiddenTextFive: false,
  mountHiddenTextSix: false,
}
```

--------------------------------

### Programmatic Control of Expansion

Source: https://github.com/fawaz-ahmed/react-native-read-more/blob/master/_autodocs/api-reference/State-Management.md

This example shows how to control the collapsed/expanded state of the ReadMore component programmatically using a parent component's state. It utilizes the `collapsed` prop and the `onExpand`/`onCollapse` callbacks to synchronize the parent's state with the ReadMore component's state.

```javascript
const MyComponent = () => {
  const [showFull, setShowFull] = useState(false);
  
  return (
    <>
      <ReadMore
        numberOfLines={3}
        collapsed={!showFull}
        onExpand={() => setShowFull(true)}
        onCollapse={() => setShowFull(false)}>
        {text}
      </ReadMore>
      <Button onPress={() => setShowFull(!showFull)}>
        Toggle
      </Button>
    </>
  );
};

```

--------------------------------

### Manage Synchronized Multiple Instances

Source: https://github.com/fawaz-ahmed/react-native-read-more/blob/master/_autodocs/api-reference/Advanced-Usage.md

For multiple ReadMore instances in a list, manage expansion state centrally using `collapsed`, `onExpand`, and `onCollapse` props. This example uses a Set to track expanded item IDs.

```javascript
const MyList = () => {
  const [expandedIds, setExpandedIds] = useState(new Set());

  const toggleExpand = (id) => {
    setExpandedIds(prev => {
      const next = new Set(prev);
      next.has(id) ? next.delete(id) : next.add(id);
      return next;
    });
  };

  return (
    <FlatList
      data={items}
      renderItem={({ item }) => (
        <ReadMore
          numberOfLines={3}
          collapsed={!expandedIds.has(item.id)}
          onExpand={() => toggleExpand(item.id)}
          onCollapse={() => toggleExpand(item.id)}>
          {item.text}
        </ReadMore>
      )}
      keyExtractor={item => item.id}
    />
  );
};
```

--------------------------------

### Expanded State Snapshot

Source: https://github.com/fawaz-ahmed/react-native-read-more/blob/master/_autodocs/api-reference/State-Management.md

An example of the internal state when the component is fully expanded. Key changes include `collapsed` and `afterCollapsed` flags, and the unmounting of hidden measurement components.

```javascript
{
  // Same measurements
  
  // Control - changed
  collapsed: false,
  afterCollapsed: false, // (during animation)
  
  // Content - full text used
  collapsedChildren: null,
  
  // Hidden components - unmounted
  mountHidden*: false (all),
}
```

--------------------------------

### Use onReady Callback to Check Truncation Status

Source: https://github.com/fawaz-ahmed/react-native-read-more/blob/master/_autodocs/api-reference/Advanced-Usage.md

Use the `onReady` callback to get information about whether the text can expand and the number of expanded lines. This helps determine if `numberOfLines` needs adjustment or if there's a bug.

```javascript
onReady={({ canExpand, expandedLinesCount }) => {
  console.log(`Lines: ${expandedLinesCount}, Can expand: ${canExpand}`);
}}
```

--------------------------------

### Implement Conditional Truncation

Source: https://github.com/fawaz-ahmed/react-native-read-more/blob/master/_autodocs/api-reference/Advanced-Usage.md

Conditionally truncate content based on its length using the `numberOfLines` prop. This example shows how to set `numberOfLines` dynamically based on whether the content exceeds a certain line count.

```javascript
const [shouldTruncate, setShouldTruncate] = useState(false);

<ReadMore
  numberOfLines={shouldTruncate ? 3 : 999} // 999 ≈ unlimited
  onReady={({ expandedLinesCount }) => {
    setShouldTruncate(expandedLinesCount > 5);
  }}>
  {text}
</ReadMore>
```

--------------------------------

### Analytics Tracking for Expansion

Source: https://github.com/fawaz-ahmed/react-native-read-more/blob/master/_autodocs/README.md

Shows how to integrate analytics tracking for component readiness and expansion events. Use `onReady` to track initial state and `onExpand` for expansion events.

```javascript
<ReadMore
  onReady={({ canExpand }) => analytics.track('text_shown', { canExpand })}
  onExpand={() => analytics.track('text_expanded')}
>
  {text}
</ReadMore>
```

--------------------------------

### Ready Callback for Initialization

Source: https://github.com/fawaz-ahmed/react-native-read-more/blob/master/_autodocs/api-reference/State-Management.md

Fires the `onReady` callback with measurement results after a short delay, signaling that the component is fully initialized and ready for user interaction.

```javascript
useEffect(() => {
  if (!isMeasured || isReady) return;
  
  const handle = setTimeout(() => {
    setIsReady(true);
    onReady({canExpand: seeMore, expandedLinesCount: lines.length});
  }, debounceSeeMoreCalc);
  return () => clearTimeout(handle);
}, [isMeasured, isReady]);
```

--------------------------------

### Handling Read More Component Events

Source: https://github.com/fawaz-ahmed/react-native-read-more/blob/master/_autodocs/api-reference/ReadMore.md

Illustrates how to use callback functions for expansion, collapse, and readiness events. These callbacks can be used for analytics or triggering other actions.

```javascript
<ReadMore
  numberOfLines={3}
  onExpand={() => {
    console.log('Text expanded');
    analytics.track('read_more_expanded');
  }}
  onCollapse={() => {
    console.log('Text collapsed');
    analytics.track('read_more_collapsed');
  }}
  onReady={({ canExpand, expandedLinesCount }) => {
    console.log(`Can expand: ${canExpand}, Total lines: ${expandedLinesCount}`);
  }}
>
  {textContent}
</ReadMore>
```

--------------------------------

### Minimal Configuration

Source: https://github.com/fawaz-ahmed/react-native-read-more/blob/master/_autodocs/configuration.md

This snippet shows the most basic usage of the ReadMore component, relying on all default settings.

```javascript
<ReadMore numberOfLines={3}>
  {textContent}
</ReadMore>
```

--------------------------------

### Initializing Read More Component with `onReady`

Source: https://github.com/fawaz-ahmed/react-native-read-more/blob/master/_autodocs/api-reference/Advanced-Usage.md

Utilizes the `onReady` prop to safely perform actions after the component has fully initialized and measured its content. This is the recommended way to update parent state or enable interactions based on the component's initial state.

```javascript
<ReadMore
  numberOfLines={3}
  onReady={({ canExpand, expandedLinesCount }) => {
    // Only now is the component fully initialized
    // Safe to update parent state or enable interactions
  }}>
  {text}
</ReadMore>
```

--------------------------------

### Concatenate Lines to Characters

Source: https://github.com/fawaz-ahmed/react-native-read-more/blob/master/_autodocs/api-reference/Helper-Utilities.md

Converts an array of line objects from React Native's onTextLayout event into a single concatenated string. Use this to get the total text content for truncation calculations.

```javascript
import { linesToCharacters } from './helper.js';

const lines = [
  { text: 'First line', x: 0, y: 0, width: 100, height: 20 },
  { text: 'Second line', x: 0, y: 20, width: 120, height: 20 },
  { text: 'Third line', x: 0, y: 40, width: 110, height: 20 },
];

const combined = linesToCharacters(lines);
// Returns: "First lineSecond lineThird line"
```

--------------------------------

### onReady Callback with Metrics

Source: https://github.com/fawaz-ahmed/react-native-read-more/blob/master/_autodocs/api-reference/Props-Deep-Dive.md

Use the onReady callback to log the expansion metrics, such as whether the text can expand and the total number of lines. This is useful for debugging and understanding component behavior.

```javascript
<ReadMore
  numberOfLines={3}
  onReady={({ canExpand, expandedLinesCount }) => {
    console.log(`Can expand: ${canExpand}, Lines: ${expandedLinesCount}`);
  }}>
  {text}
</ReadMore>
```

--------------------------------

### ReadMore Component with Callbacks

Source: https://github.com/fawaz-ahmed/react-native-read-more/blob/master/_autodocs/README.md

Illustrates how to use the onReady, onExpand, and onCollapse callbacks for event handling.

```javascript
<ReadMore
  numberOfLines={3}
  onReady={({ canExpand, expandedLinesCount }) => {
    console.log(`Text has ${expandedLinesCount} lines`);
  }}
  onExpand={() => analytics.track('text_expanded')}
  onCollapse={() => analytics.track('text_collapsed')}
>
  {text}
</ReadMore>
```

--------------------------------

### onExpand

Source: https://github.com/fawaz-ahmed/react-native-read-more/blob/master/_autodocs/api-reference/Props-Deep-Dive.md

Callback executed when the user taps 'See more' and the text expands. It's useful for triggering actions like analytics or scrolling.

```APIDOC
## onExpand

### Description
Callback executed when user taps "See more" and text expands.

### Type
`() => void`

### Default
`() => {}`

### When called
After animation completes (if `animate={true}`) or immediately (if `animate={false}`).

### Conditions to call:
- User must tap "See more"
- Component must be in collapsed state
- Custom `onSeeMore` handler must not be defined
- Component must not be controlled via `collapsed` prop

### Example
```javascript
<ReadMore
  numberOfLines={3}
  onExpand={() => {
    console.log('Text expanded');
  }}
>
  {text}
</ReadMore>
```
```

--------------------------------

### onReady

Source: https://github.com/fawaz-ahmed/react-native-read-more/blob/master/_autodocs/api-reference/Props-Deep-Dive.md

Callback executed after measurements complete and the component is ready to be used. It provides information about whether the text can expand and the total expanded lines count.

```APIDOC
## onReady

### Description
Callback executed after measurements complete and component is ready.

### Type
`({ canExpand: boolean, expandedLinesCount: number }) => void`

### Parameters:
- `canExpand` - boolean, true if text exceeds `numberOfLines`
- `expandedLinesCount` - number, total lines in fully expanded state

### When called:
Once per mount/prop change, after measurements complete and state settles.

### Use cases:
- Hide UI elements based on text length
- Enable/disable features
- Analytics (track if content was truncated)
- Initialize external state

### Example
```javascript
<ReadMore
  numberOfLines={3}
  onReady={({ canExpand, expandedLinesCount }) => {
    console.log(`Can expand: ${canExpand}, Lines: ${expandedLinesCount}`);
  }}
>
  {text}
</ReadMore>
```
```

--------------------------------

### Basic Usage of ReadMore Component

Source: https://github.com/fawaz-ahmed/react-native-read-more/blob/master/_autodocs/DOCUMENTATION-INDEX.txt

Demonstrates the fundamental implementation of the ReadMore component for truncating text with a 'See more'/'See less' toggle.

```javascript
import React from 'react';
import { View, Text } from 'react-native';
import ReadMore from 'react-native-read-more';

const MyComponent = () => (
  <View>
    <ReadMore
      numberOfLines={3}
      style={{ color: 'blue' }}
      seeMoreStyle={{ color: 'red' }}
    >
      This is a long text that needs to be truncated. It will show only a few lines initially, and then expand when the user taps on 'See more'. This is a long text that needs to be truncated. It will show only a few lines initially, and then expand when the user taps on 'See more'.
    </ReadMore>
  </View>
);

export default MyComponent;
```

--------------------------------

### Detecting Component Ready State

Source: https://github.com/fawaz-ahmed/react-native-read-more/blob/master/_autodocs/api-reference/State-Management.md

This snippet demonstrates how to use the `onReady` prop to detect when the ReadMore component has finished its initial measurements and is ready to be displayed or interacted with. It shows setting a local `isReady` state based on the `canExpand` value provided by the callback.

```javascript
const MyComponent = () => {
  const [isReady, setIsReady] = useState(false);
  
  return (
    <ReadMore
      numberOfLines={3}
      onReady={({ canExpand }) => {
        setIsReady(true);
      }}>
      {text}
    </ReadMore>
  );
};

```

--------------------------------

### Using Custom Text Components with Read More

Source: https://github.com/fawaz-ahmed/react-native-read-more/blob/master/_autodocs/api-reference/ReadMore.md

Shows how to integrate custom text rendering components, such as ParsedText, with the Read More component. This allows for rich text formatting within the expandable content.

```javascript
import { ParsedText } from 'react-native-parsed-text';

<ReadMore
  numberOfLines={3}
  customTextComponent={ParsedText}
>
  {textContent}
</ReadMore>
```

--------------------------------

### Custom Component for Expansion

Source: https://github.com/fawaz-ahmed/react-native-read-more/blob/master/_autodocs/README.md

Demonstrates using a custom component for rendering the expandable text and handling interactions like URL presses. Pass your component to `customTextComponent` and configure patterns with `parsePatterns`.

```javascript
<ReadMore
  customTextComponent={ParsedText}
  parsePatterns={[{ type: 'url', onPress: openUrl }]
}>
  {text}
</ReadMore>
```

--------------------------------

### Importing with TypeScript Types

Source: https://github.com/fawaz-ahmed/react-native-read-more/blob/master/_autodocs/README.md

Demonstrates how to import the `ReadMore` component along with its associated types for use in TypeScript projects.

```typescript
import ReadMore, { ReadMoreProps } from '@fawazahmed/react-native-read-more';
```

--------------------------------

### Analytics Integration

Source: https://github.com/fawaz-ahmed/react-native-read-more/blob/master/_autodocs/README.md

Track user interactions and component states using the 'onReady' and 'onExpand' callbacks. This allows for integration with analytics platforms.

```javascript
<ReadMore
  onReady={({ canExpand }) => {
    analytics.track('text_truncated', { canExpand });
  }}
  onExpand={() => analytics.track('text_expanded')}>  {text}
</ReadMore>
```

--------------------------------

### Accessibility-Friendly Configuration

Source: https://github.com/fawaz-ahmed/react-native-read-more/blob/master/_autodocs/configuration.md

Enhance accessibility by disabling animations, enabling font scaling, and providing clear text for 'Show full text' and 'Hide details'.

```javascript
<ReadMore
  numberOfLines={3}
  animate={false}
  allowFontScaling={true}
  seeMoreText="Show full text"
  seeLessText="Hide details">
  {textContent}
</ReadMore>
```

--------------------------------

### Step 1: Initial Full Text Measurement

Source: https://github.com/fawaz-ahmed/react-native-read-more/blob/master/_autodocs/api-reference/Measurement-Algorithm.md

Measures the total number of lines in the full, untruncated text. This step is triggered on component mount or when text-related props change. It collects line data including text, position, width, and height.

```javascript
mountHiddenTextOne && (
  <TextComponent
    {...commonHiddenComponentProps}
    onTextLayout={onTextLayoutOne}
  >
    {children}
  </TextComponent>
)
```

--------------------------------

### ReadMore Component with Callback Integration

Source: https://github.com/fawaz-ahmed/react-native-read-more/blob/master/_autodocs/DOCUMENTATION-INDEX.txt

Illustrates how to use the `onExpand` and `onCollapse` callbacks to perform actions when the text state changes.

```javascript
import React from 'react';
import { View, Text, Alert } from 'react-native';
import ReadMore from 'react-native-read-more';

const MyComponent = () => (
  <View>
    <ReadMore
      numberOfLines={3}
      onExpand={() => Alert.alert('Text expanded!')}
      onCollapse={() => Alert.alert('Text collapsed!')}
    >
      This text demonstrates the use of callbacks. When you expand or collapse this text, an alert will be shown to confirm the action. This allows for integrating custom logic based on the expansion state.
    </ReadMore>
  </View>
);
```

--------------------------------

### Custom Expand/Collapse Handlers

Source: https://github.com/fawaz-ahmed/react-native-read-more/blob/master/_autodocs/api-reference/ReadMore.md

Provides custom functions to handle 'See more' and 'See less' actions, enabling alternative behaviors like opening modals instead of just expanding text.

```javascript
<ReadMore
  numberOfLines={3}
  onSeeMore={() => {
    // Open modal instead of expanding
    showDetailModal(textContent);
  }}
  onSeeLess={() => {
    closeDetailModal();
  }}
>
  {textContent}
</ReadMore>
```

--------------------------------

### onSeeMore for Analytics Only

Source: https://github.com/fawaz-ahmed/react-native-read-more/blob/master/_autodocs/api-reference/Props-Deep-Dive.md

Log an analytics event when 'See more' is tapped, but allow the default expansion behavior to proceed. This tracks user interaction without altering the UI flow.

```javascript
<ReadMore
  numberOfLines={3}
  onSeeMore={() => {
    analytics.logEvent('see_more_tapped');
    // Don't call anything; default behavior continues
  }}>
  {text}
</ReadMore>
```

--------------------------------

### onSeeMore

Source: https://github.com/fawaz-ahmed/react-native-read-more/blob/master/_autodocs/api-reference/Props-Deep-Dive.md

Custom callback that replaces the default 'See more' behavior. Use this to implement custom expansion logic, such as opening a modal or navigating to a new page.

```APIDOC
## onSeeMore

### Description
Custom callback replaces default "See more" behavior.

### Type
`() => void`

### Default
undefined (use default expand behavior)

### Behavior when defined:
- When user taps "See more", this callback is called instead of default expand
- Default expand behavior is completely disabled
- Must manually update state if you want to expand programmatically

**Note:** This disables inline expansion entirely. If you want to expand and also perform an action, you need to manually handle the expand state.

### Example
```javascript
// Modal instead of inline expansion
<ReadMore
  numberOfLines={3}
  onSeeMore={() => {
    showDetailModal(fullText);
  }}
>
  {preview}
</ReadMore>
```
```

--------------------------------

### With Analytics Tracking

Source: https://github.com/fawaz-ahmed/react-native-read-more/blob/master/_autodocs/configuration.md

Integrate analytics tracking for user interactions with the ReadMore component. Track expansion, collapse, and readiness events.

```javascript
<ReadMore
  numberOfLines={3}
  onExpand={() => analytics.track('user_expanded_text')}
  onCollapse={() => analytics.track('user_collapsed_text')}
  onReady={({ canExpand }) => {
    if (canExpand) analytics.track('text_was_truncated');
  }}>
  {textContent}
</ReadMore>
```

--------------------------------

### Basic onExpand Callback

Source: https://github.com/fawaz-ahmed/react-native-read-more/blob/master/_autodocs/api-reference/Props-Deep-Dive.md

Use the onExpand callback to log a message when the text expands. This is useful for simple event tracking.

```javascript
<ReadMore
  numberOfLines={3}
  onExpand={() => {
    console.log('Text expanded');
  }}>
  {text}
</ReadMore>
```

--------------------------------

### onExpand for Analytics Integration

Source: https://github.com/fawaz-ahmed/react-native-read-more/blob/master/_autodocs/api-reference/Props-Deep-Dive.md

Integrate analytics by logging an event with content details when the text expands. This helps track user engagement with truncated content.

```javascript
<ReadMore
  numberOfLines={3}
  onExpand={() => {
    analytics.logEvent('read_more_expanded', {
      contentId: item.id,
      contentLength: text.length,
    });
  }}>
  {text}
</ReadMore>
```

--------------------------------

### OnReadyCallback

Source: https://github.com/fawaz-ahmed/react-native-read-more/blob/master/_autodocs/types.md

Callback function signature for the `onReady` prop, providing information about text expansion capabilities and line counts.

```APIDOC
## OnReadyCallback

### Description
Callback function signature for the `onReady` prop.

### Parameters
| Parameter | Type | Description |
|-----------|------|-------------|
| `info.canExpand` | `boolean` | Whether the text content exceeds `numberOfLines` and can be expanded. |
| `info.expandedLinesCount` | `number` | Total number of lines when text is in fully expanded state. |

### Example
```typescript
<ReadMore
  numberOfLines={3}
  onReady={({ canExpand, expandedLinesCount }) => {
    if (!canExpand) {
      console.log('Text fits within the line limit, no expansion needed');
    } else {
      console.log(`Text spans ${expandedLinesCount} lines total`);
    }
  }}>
  {textContent}
</ReadMore>
```
```

--------------------------------

### Implement Modal-Based Expansion

Source: https://github.com/fawaz-ahmed/react-native-read-more/blob/master/_autodocs/api-reference/Advanced-Usage.md

Expand content in a modal instead of inline by using the `onSeeMore` prop to trigger modal visibility. This is useful for displaying full content in a separate view.

```javascript
const [showDetailModal, setShowDetailModal] = useState(false);

return (
  <>
    <ReadMore
      numberOfLines={2}
      onSeeMore={() => setShowDetailModal(true)}>
      {summary}
    </ReadMore>

    <Modal visible={showDetailModal} animationType="slide">
      <SafeAreaView>
        <Text>{fullText}</Text>
        <Button title="Close" onPress={() => setShowDetailModal(false)} />
      </SafeAreaView>
    </Modal>
  </>
);
```

--------------------------------

### Animation and State Sync on Collapse Change

Source: https://github.com/fawaz-ahmed/react-native-read-more/blob/master/_autodocs/api-reference/State-Management.md

Manages the animation and callback execution when the `collapsed` state changes. It supports both animated and non-animated transitions and updates an internal state to track the post-animation state.

```javascript
useEffect(() => {
  if (collapsed === afterCollapsed) return;
  
  const callback = collapsed ? onCollapse : onExpand;
  if (animate) {
    LayoutAnimation.configureNext(readmoreAnimation, callback);
  } else {
    callback();
  }
  setAfterCollapsed(collapsed);
}, [collapsed]);
```

--------------------------------

### Modal-Based Expansion

Source: https://github.com/fawaz-ahmed/react-native-read-more/blob/master/_autodocs/README.md

Trigger a modal to display full content when the 'See more' action is pressed. This is useful for lengthy text previews.

```javascript
<ReadMore
  numberOfLines={2}
  onSeeMore={() => showDetailModal(text)}>
  {preview}
</ReadMore>
```

--------------------------------

### Children Prop: String Content

Source: https://github.com/fawaz-ahmed/react-native-read-more/blob/master/_autodocs/api-reference/Props-Deep-Dive.md

Use the `children` prop to provide simple string content for the Read More component. This is the most basic way to display text.

```javascript
// String
<ReadMore numberOfLines={3}>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</ReadMore>
```

--------------------------------

### User Interaction: Expand Text

Source: https://github.com/fawaz-ahmed/react-native-read-more/blob/master/_autodocs/api-reference/State-Management.md

Handles the user's tap on the 'See more' button. It includes checks for double-taps, custom handlers, and controlled component behavior before updating the collapsed state.

```javascript
const onPressSeeMore = useCallback(() => {
  if (!collapsed) return;
  
  if (onSeeMoreBlocked) {
    return onSeeMoreBlocked(); // Custom handler
  }
  
  const isExternalCollapsedDefined = typeof externalCollapsed === 'boolean';
  if (isExternalCollapsedDefined) {
    return; // Controlled component, let parent handle
  }
  
  setCollapsed(false);
}, [collapsed, setCollapsed, onSeeMoreBlocked, externalCollapsed]);
```

--------------------------------

### ReadMore Component with Custom Styling

Source: https://github.com/fawaz-ahmed/react-native-read-more/blob/master/_autodocs/DOCUMENTATION-INDEX.txt

Shows how to apply custom styles to the ReadMore component and its toggle links using the `style` and `seeMoreStyle` props.

```javascript
import React from 'react';
import { View, Text } from 'react-native';
import ReadMore from 'react-native-read-more';

const MyComponent = () => (
  <View>
    <ReadMore
      numberOfLines={3}
      style={{ fontSize: 16, lineHeight: 24, color: '#333' }}
      seeMoreStyle={{ fontSize: 16, fontWeight: 'bold', color: 'green' }}
    >
      This is a long text with custom styling applied. The main text has a specific font size, line height, and color, while the 'See more' link is styled to be bold and green.
    </ReadMore>
  </View>
);
```

--------------------------------

### Performance Optimization Settings

Source: https://github.com/fawaz-ahmed/react-native-read-more/blob/master/_autodocs/api-reference/Props-Deep-Dive.md

Optimize performance by disabling animation and increasing the debounce interval for see more calculations.

```javascript
animate={false} // Disable animation
debounceSeeMoreCalc={500} // Increase debounce
```

--------------------------------

### See More Text Prop: Localization

Source: https://github.com/fawaz-ahmed/react-native-read-more/blob/master/_autodocs/api-reference/Props-Deep-Dive.md

Provide localized text for the expand button by passing a dynamic string to the `seeMoreText` prop, such as from a translation object.

```javascript
// Localization example
const lang = 'es';
const translations = {
  en: 'See more',
  es: 'Ver más',
  fr: 'Plus',
};

<ReadMore numberOfLines={3} seeMoreText={translations[lang]}>
  {text}
</ReadMore>
```

--------------------------------

### Efficiently Rendering Read More in Lists with `FlatList`

Source: https://github.com/fawaz-ahmed/react-native-read-more/blob/master/_autodocs/api-reference/Advanced-Usage.md

Optimizes rendering of `ReadMore` components within lists by using `FlatList` with a proper `keyExtractor`. This ensures efficient item management and rendering, crucial for long lists.

```javascript
<FlatList
  data={items}
  keyExtractor={item => item.id}
  renderItem={({ item }) => <ReadMore>{item.text}</ReadMore>}
/>
```

--------------------------------

### See More Text Prop: Basic Usage

Source: https://github.com/fawaz-ahmed/react-native-read-more/blob/master/_autodocs/api-reference/Props-Deep-Dive.md

Customize the text displayed in the expand button using the `seeMoreText` prop. This allows for custom labels like 'Read more'.

```javascript
<ReadMore numberOfLines={3} seeMoreText="Read more">
  {text}
</ReadMore>
```

--------------------------------

### onReady Callback to Set Metrics State

Source: https://github.com/fawaz-ahmed/react-native-read-more/blob/master/_autodocs/api-reference/Props-Deep-Dive.md

Use the onReady callback to directly set the component's metrics (like expansion capability and line count) into a state variable. This state can then be used to render related UI components.

```javascript
const [metrics, setMetrics] = useState(null);

<ReadMore
  numberOfLines={3}
  onReady={setMetrics}>
  {text}
</ReadMore>

{metrics && <ExpandedMetrics {...metrics} />}
```

--------------------------------

### onSeeMore for Navigation

Source: https://github.com/fawaz-ahmed/react-native-read-more/blob/master/_autodocs/api-reference/Props-Deep-Dive.md

Use the onSeeMore callback to navigate to a detail screen when the user attempts to expand the text. This is useful for linking to more comprehensive content.

```javascript
<ReadMore
  numberOfLines={3}
  onSeeMore={() => {
    navigation.navigate('Detail', { contentId: item.id });
  }}>
  {text}
</ReadMore>
```

--------------------------------

### Customizing Read More Component Appearance

Source: https://github.com/fawaz-ahmed/react-native-read-more/blob/master/_autodocs/api-reference/ReadMore.md

Shows how to customize the text, styles, and ellipsis for the 'See more' and 'Read less' actions. This allows for branding and improved user experience.

```javascript
<ReadMore
  numberOfLines={4}
  style={{ fontSize: 16, lineHeight: 24 }}
  seeMoreText="Read more"
  seeMoreStyle={{ color: '#0066cc', fontWeight: 'bold' }}
  seeLessText="Read less"
  seeLessStyle={{ color: '#0066cc', fontWeight: 'bold' }}
  ellipsis="…"
>
  {longTextContent}
</ReadMore>
```

--------------------------------

### Performance Optimized Configuration

Source: https://github.com/fawaz-ahmed/react-native-read-more/blob/master/_autodocs/configuration.md

Optimize the ReadMore component's performance by disabling animations and aggressively debouncing measurement calculations. This is useful for reducing overhead.

```javascript
<ReadMore
  numberOfLines={3}
  animate={false}
  debounceSeeMoreCalc={500}
  seeMoreOverlapCount={3}>
  {textContent}
</ReadMore>
```

--------------------------------

### Controlled State Configuration

Source: https://github.com/fawaz-ahmed/react-native-read-more/blob/master/_autodocs/api-reference/Props-Deep-Dive.md

Use this configuration for controlled state management. Ensure onExpand and onCollapse callbacks are provided and avoid onSeeMore/onSeeLess when using controlled state.

```javascript
collapsed={value} requires:
  - onExpand={callback}
  - onCollapse={callback}
  - Should not use onSeeMore/onSeeLess
```

--------------------------------

### seeMoreStyle

Source: https://github.com/fawaz-ahmed/react-native-read-more/blob/master/_autodocs/api-reference/Props-Deep-Dive.md

Styles applied specifically to the 'See more' text. This prop allows customization of the appearance of the text that appears when the content is collapsed.

```APIDOC
## seeMoreStyle

Style applied specifically to the "See more" text.

**Type:** `StyleProp<TextStyle>`

**Default:** `{ color: 'red', fontWeight: 'bold' }`

**Applied to:**
- The "See more" text (not the ellipsis)
- Only visible in collapsed state

**Note:** Does not include the ellipsis. To style the ellipsis, use `style` prop.

**Change impact:** Triggers re-measurement (HiddenTwo includes this style).
```

--------------------------------

### Style Prop: StyleSheet for Optimization

Source: https://github.com/fawaz-ahmed/react-native-read-more/blob/master/_autodocs/api-reference/Props-Deep-Dive.md

Import `StyleSheet` from 'react-native' and use a style object from it with the `style` prop for optimized styling of the main text content.

```javascript
// From StyleSheet for optimization
import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  text: { fontSize: 16, lineHeight: 24 },
});

<ReadMore numberOfLines={3} style={styles.text}>
  {text}
</ReadMore>
```

--------------------------------

### onCollapse

Source: https://github.com/fawaz-ahmed/react-native-read-more/blob/master/_autodocs/api-reference/Props-Deep-Dive.md

Callback executed when the user taps 'See less' and the text collapses. This is useful for symmetric tracking with `onExpand`.

```APIDOC
## onCollapse

### Description
Callback executed when user taps "See less" and text collapses.

### Type
`() => void`

### Default
`() => {}`

### Conditions:
Similar to `onExpand`, but when collapsing.

### Use case:
Pair with `onExpand` for symmetric tracking (e.g., analytics).

### Example
```javascript
<ReadMore
  numberOfLines={3}
  onCollapse={() => {
    console.log('Text collapsed');
  }}
>
  {text}
</ReadMore>
```
```

--------------------------------

### onReady Callback for Conditional Rendering

Source: https://github.com/fawaz-ahmed/react-native-read-more/blob/master/_autodocs/api-reference/Props-Deep-Dive.md

Use the onReady callback to set a state variable, enabling conditional rendering of UI elements only after the component is ready and its metrics are calculated.

```javascript
const [isReady, setIsReady] = useState(false);

<ReadMore
  numberOfLines={3}
  onReady={() => setIsReady(true)}>
  {text}
</ReadMore>
```

--------------------------------

### Conditional Rendering Based on Expand State

Source: https://github.com/fawaz-ahmed/react-native-read-more/blob/master/_autodocs/api-reference/State-Management.md

This snippet demonstrates how to conditionally render content or perform actions based on whether the text can expand and the number of lines it occupies. It utilizes the `onReady` callback to access this state information.

```javascript
<ReadMore
  numberOfLines={3}
  onReady={({ canExpand, expandedLinesCount }) => {
    if (canExpand) {
      console.log(`This content spans ${expandedLinesCount} lines`);
    }
  }}
>
  {text}
</ReadMore>
```

--------------------------------

### Collapse/Expand State Variables

Source: https://github.com/fawaz-ahmed/react-native-read-more/blob/master/_autodocs/api-reference/State-Management.md

Manages the expand/collapse state of the text and determines rendering logic. 'seeMore' indicates if truncation is needed, 'collapsed' tracks the current state, and 'afterCollapsed' reflects the state post-animation.

```javascript
const [seeMore, setSeeMore] = useState(false);
const [collapsed, setCollapsed] = useState(true);
const [afterCollapsed, setAfterCollapsed] = useState(true);
```

--------------------------------

### Importing Default ReadMore Component

Source: https://github.com/fawaz-ahmed/react-native-read-more/blob/master/_autodocs/README.md

This snippet shows the standard way to import the main `ReadMore` component for use in your React Native application.

```javascript
import ReadMore from '@fawazahmed/react-native-read-more';
```

--------------------------------

### Helper Function: insertAt

Source: https://github.com/fawaz-ahmed/react-native-read-more/blob/master/_autodocs/DOCUMENTATION-INDEX.txt

Shows the `insertAt` utility function, which inserts a string into another string at a specified index.

```javascript
import { insertAt } from 'react-native-read-more/src/helpers';

const originalString = 'HelloWorld';
const stringToInsert = ' ';
const index = 5;

const result = insertAt(originalString, stringToInsert, index);
console.log(result); // Output: "Hello World"
```

--------------------------------

### onSeeMore for Modal Presentation

Source: https://github.com/fawaz-ahmed/react-native-read-more/blob/master/_autodocs/api-reference/Props-Deep-Dive.md

Implement a custom onSeeMore callback to display the full text in a modal instead of expanding inline. This provides a different user experience for viewing detailed content.

```javascript
<ReadMore
  numberOfLines={3}
  onSeeMore={() => {
    showDetailModal(fullText);
  }}>
  {preview}
</ReadMore>
```

--------------------------------

### Helper Utilities

Source: https://github.com/fawaz-ahmed/react-native-read-more/blob/master/_autodocs/DOCUMENTATION-INDEX.txt

Internal utility functions exposed for potential use or understanding of the component's logic.

```APIDOC
## Helper Utilities

### Description
This section documents the utility functions that are part of the `react-native-read-more` library. These functions can be useful for understanding the internal workings or for custom implementations.

### Exported Symbols
- **getTextByChildren**: A utility function for processing children nodes.
- **linesToCharacters**: Converts a number of lines to a character count based on font metrics.
- **insertAt**: A utility function for inserting content at a specific position.

### Documentation
Detailed signatures, parameters, return types, usage context, and integration information are available in `api-reference/Helper-Utilities.md`.
```

--------------------------------

### Step 3: Collapsed Measurement

Source: https://github.com/fawaz-ahmed/react-native-read-more/blob/master/_autodocs/api-reference/Measurement-Algorithm.md

Measures the text when truncated to the specified numberOfLines using ellipsizeMode={'clip'}. This provides a baseline for comparison with subsequent measurements, particularly for the reconciled collapsed state.

```javascript
mountHiddenThree && (
  <TextComponent
    {...commonHiddenComponentProps}
    numberOfLines={numberOfLines}
    ellipsizeMode={'clip'}
    onLayout={onLayoutHiddenTextThree}
    onTextLayout={onTextLayoutHiddenTextThree}
  >
    {children}
  </TextComponent>
)
```

--------------------------------

### Custom onSeeLess Callback

Source: https://github.com/fawaz-ahmed/react-native-read-more/blob/master/_autodocs/api-reference/Props-Deep-Dive.md

Define a custom onSeeLess callback to execute specific logic when the user taps 'See less'. This replaces the default collapse behavior.

```javascript
<ReadMore
  numberOfLines={3}
  onSeeLess={() => {
    console.log('User wants to collapse');
    // Custom logic here
  }}>
  {text}
</ReadMore>
```

--------------------------------

### Modal-Opening Variant

Source: https://github.com/fawaz-ahmed/react-native-read-more/blob/master/_autodocs/configuration.md

Configure the ReadMore component to trigger a modal instead of expanding inline. This is useful for displaying detailed content in a separate view.

```javascript
const [showDetail, setShowDetail] = useState(false);

<ReadMore
  numberOfLines={2}
  onSeeMore={() => setShowDetail(true)}>
  {textContent}
</ReadMore>
```

--------------------------------

### ReadMore Component with Controlled State

Source: https://github.com/fawaz-ahmed/react-native-read-more/blob/master/_autodocs/DOCUMENTATION-INDEX.txt

Illustrates how to manage the expansion state of the ReadMore component externally using the `expanded` and `onToggle` props.

```javascript
import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';
import ReadMore from 'react-native-read-more';

const MyComponent = () => {
  const [expanded, setExpanded] = useState(false);

  return (
    <View>
      <ReadMore
        numberOfLines={2}
        expanded={expanded}
        onToggle={setExpanded}
      >
        This text's expansion state is controlled externally. You can use the button below to toggle it. This allows for more complex UI interactions where the expansion is driven by other components or logic.
      </ReadMore>
      <Button
        title={expanded ? 'Collapse' : 'Expand'}
        onPress={() => setExpanded(!expanded)}
      />
    </View>
  );
};

export default MyComponent;
```

--------------------------------

### Style Prop: Array of Styles

Source: https://github.com/fawaz-ahmed/react-native-read-more/blob/master/_autodocs/api-reference/Props-Deep-Dive.md

Use an array of style objects with the `style` prop to merge multiple styles for the main text content. Styles are applied in order.

```javascript
// Array of styles (merged)
<ReadMore
  numberOfLines={3}
  style={[baseTextStyle, { color: 'blue' }]
>
  {text}
</ReadMore>
```

--------------------------------

### Step 2: Text with 'See Less' Measurement

Source: https://github.com/fawaz-ahmed/react-native-read-more/blob/master/_autodocs/api-reference/Measurement-Algorithm.md

Measures how many lines the text occupies when 'See less' is appended. This helps determine if 'See less' fits on the last line or forces an additional line, indicating potential overflow in the expanded state.

```javascript
mountHiddenTextTwo && (
  <TextComponent
    {...commonHiddenComponentProps}
    onTextLayout={onTextLayoutTwo}
  >
    {children}
    {`   ${seeLessText}`}
  </TextComponent>
)
```

--------------------------------

### Preventing Overlap Strategies

Source: https://github.com/fawaz-ahmed/react-native-read-more/blob/master/_autodocs/api-reference/Props-Deep-Dive.md

Implement these strategies to prevent UI overlap. Prioritize seeMoreOverlapCount and allowFontScaling, using seeMoreContainerStyleSecondary as a last resort.

```javascript
// Best approach:
seeMoreOverlapCount={X} // Increase if needed
allowFontScaling={false} // On Android
seeMoreContainerStyleSecondary={...} // Last resort
```

--------------------------------

### Use seeMoreContainerStyleSecondary for Stacking Order

Source: https://github.com/fawaz-ahmed/react-native-read-more/blob/master/_autodocs/api-reference/Advanced-Usage.md

To resolve 'See more' text overlap issues, use `seeMoreContainerStyleSecondary` with `position: 'relative'` or `zIndex: 1` to adjust the stacking order.

```javascript
<ReadMore
  numberOfLines={3}
  seeMoreContainerStyleSecondary={{ position: 'relative' }}
>
  {text}
</ReadMore>
```

--------------------------------

### Expand-Only Mode for Read More

Source: https://github.com/fawaz-ahmed/react-native-read-more/blob/master/_autodocs/api-reference/ReadMore.md

Configures the ReadMore component to only allow expansion, similar to LinkedIn's 'Show more' behavior. This mode does not provide a 'Read less' option.

```javascript
<ReadMore
  numberOfLines={3}
  expandOnly={true}
  seeMoreText="Show more"
>
  {textContent}
</ReadMore>
```

--------------------------------

### ReadMore Component with Custom Text

Source: https://github.com/fawaz-ahmed/react-native-read-more/blob/master/_autodocs/DOCUMENTATION-INDEX.txt

Shows how to customize the 'See more' and 'See less' text using the `seeMoreText` and `seeLessText` props.

```javascript
import React from 'react';
import { View, Text } from 'react-native';
import ReadMore from 'react-native-read-more';

const MyComponent = () => (
  <View>
    <ReadMore
      numberOfLines={2}
      seeMoreText={'Read on'}
      seeLessText={'Show less'}
    >
      This is another long text example, this time with custom labels for expanding and collapsing the content. The default labels will be replaced by 'Read on' and 'Show less'.
    </ReadMore>
  </View>
);
```

--------------------------------

### Render Nested Text Components

Source: https://github.com/fawaz-ahmed/react-native-read-more/blob/master/_autodocs/api-reference/Advanced-Usage.md

The library supports nesting Text components within ReadMore. Line breaks are inserted appropriately, and component hierarchy is preserved.

```javascript
<ReadMore numberOfLines={3}>
  <Text>
    This is <Text style={{ fontWeight: 'bold' }}>bold</Text> text.
  </Text>
</ReadMore>
```

--------------------------------

### Using custom text components

Source: https://github.com/fawaz-ahmed/react-native-read-more/blob/master/_autodocs/api-reference/Props-Deep-Dive.md

Substitute the default Text component with a custom one, such as ParsedText for link detection or a custom StyledText component, via the customTextComponent prop.

```javascript
// Using ParsedText for link detection
import { ParsedText } from 'react-native-parsed-text';

<ReadMore
  numberOfLines={3}
  customTextComponent={ParsedText}
  parsePatterns={[
    {
      type: 'url',
      style: { color: 'blue', textDecorationLine: 'underline' },
      onPress: (url) => Linking.openURL(url),
    },
  ]}>
  Check out https://example.com for more info
</ReadMore>

// Using StyledText (custom component)
<ReadMore
  numberOfLines={3}
  customTextComponent={StyledText}
  enableEmoji={true}>
  {text}
</ReadMore>
```

--------------------------------

### seeMoreContainerStyleSecondary

Source: https://github.com/fawaz-ahmed/react-native-read-more/blob/master/_autodocs/api-reference/Props-Deep-Dive.md

Provides additional styling to the 'See more' container View. This is useful for fixing overlap issues or adjusting the positioning of the 'See more' button, especially when dealing with specific layout requirements or device-dependent overlaps.

```APIDOC
## seeMoreContainerStyleSecondary

### Description
Additional style applied to the "See more" container View. This prop allows for custom styling to resolve layout issues like overlaps or to fine-tune the positioning of the "See more" element.

### Type
`StyleProp<ViewStyle>`

### Default
`{}`

### Use case
When the default "See more" positioning causes overlaps or layout issues, this allows you to tweak the positioning without modifying core styles. It's particularly useful for fixing overlaps on specific devices or screen sizes.

### Example Usage
```javascript
// Fix overlap with position: relative
<ReadMore
  numberOfLines={3}
  seeMoreContainerStyleSecondary={{ position: 'relative' }}
>
  {text}
</ReadMore>

// Adjust z-index
<ReadMore
  numberOfLines={3}
  seeMoreContainerStyleSecondary={{ zIndex: 10 }}
>
  {text}
</ReadMore>

// Adjust positioning
<ReadMore
  numberOfLines={3}
  seeMoreContainerStyleSecondary={{ paddingRight: 4 }}
>
  {text}
</ReadMore>
```
```

--------------------------------

### Styling 'See more' text

Source: https://github.com/fawaz-ahmed/react-native-read-more/blob/master/_autodocs/api-reference/Props-Deep-Dive.md

Apply custom styles to the 'See more' text using the seeMoreStyle prop. This can be a single style object or an array for style composition.

```javascript
<ReadMore
  numberOfLines={3}
  seeMoreStyle={{
    color: '#0066cc',
    fontWeight: '600',
    textDecorationLine: 'underline',
  }}>
  {text}
</ReadMore>

// Using array for style composition
<ReadMore
  numberOfLines={3}
  seeMoreStyle={[ 
    styles.baseInteractiveText,
    { color: theme.colors.primary },
  ]}>
  {text}
</ReadMore>
```