### Running the Example Project for react-native-more-or-less-text

Source: https://github.com/rarenatoe/react-native-more-or-less-text/blob/main/README.md

Provides instructions to clone the project repository, install dependencies, and run the example application on both iOS and Android platforms. This is useful for testing and understanding the component's behavior.

```sh
git clone https://github.com/rarenatoe/react-native-more-or-less-text.git
cd more-or-less/example
yarn install # or npm install
# to run on iOS
yarn ios
#to run on android
yarn android

```

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

### Start Metro Server for Example App

Source: https://github.com/rarenatoe/react-native-more-or-less-text/blob/main/CONTRIBUTING.md

Starts the Metro bundler, which is essential for running the example application. Changes to the library's JavaScript code will be reflected in the app without a rebuild.

```shell
yarn example start
```

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

### Run Example App on Web

Source: https://github.com/rarenatoe/react-native-more-or-less-text/blob/main/CONTRIBUTING.md

Builds and runs the example application in a web browser. This command is used to test changes made to the library on the web platform.

```shell
yarn example web
```

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

### Run Example App on iOS

Source: https://github.com/rarenatoe/react-native-more-or-less-text/blob/main/CONTRIBUTING.md

Builds and runs the example application on an iOS simulator or device. This command is used to test changes made to the library on the iOS platform.

```shell
yarn example ios
```

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

### Run Example App on Android

Source: https://github.com/rarenatoe/react-native-more-or-less-text/blob/main/CONTRIBUTING.md

Builds and runs the example application on an Android device or emulator. This command is used to test changes made to the library on the Android platform.

```shell
yarn example android
```

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

### Install Project Dependencies with Yarn

Source: https://github.com/rarenatoe/react-native-more-or-less-text/blob/main/CONTRIBUTING.md

Installs all necessary project dependencies using Yarn. This is the first step to setting up the development environment for the project. It's recommended to use Yarn for development as the tooling is built around it.

```shell
yarn
```

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

### Install react-native-more-or-less-text using npm or yarn

Source: https://github.com/rarenatoe/react-native-more-or-less-text/blob/main/README.md

Instructions for installing the library using various package managers including npm, yarn, pnpm, and bun. This is the first step to using the component in your React Native project.

```sh
npm install react-native-more-or-less-text
```

```sh
yarn add react-native-more-or-less-text
```

```sh
pnpm add react-native-more-or-less-text
```

```sh
bun add react-native-more-or-less-text
```

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

### Bootstrap Project Dependencies and Pods

Source: https://github.com/rarenatoe/react-native-more-or-less-text/blob/main/CONTRIBUTING.md

Initializes the project by installing all dependencies and CocoaPods for iOS. This script ensures the project is set up correctly for development.

```shell
yarn bootstrap
```

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

### React Native MoreOrLess Component Props and Example

Source: https://context7.com/rarenatoe/react-native-more-or-less-text/llms.txt

Defines the TypeScript types for MoreOrLessProps and demonstrates a full configuration example for the component. This includes setting the number of lines, various styles for the container, text, and button, custom text components, custom 'more'/'less' text, animation, and ellipsize mode. It requires 'react-native-more-or-less-text' and 'react-native' as dependencies.

```tsx
import { MoreOrLess } from 'react-native-more-or-less-text';
import { Text } from 'react-native';

type MoreOrLessProps = {
  children: string;                           // Required: Text content to display
  numberOfLines: number;                      // Required: Max lines when collapsed
  containerStyle?: ViewStyle;                 // Optional: Container view styling
  textStyle?: TextStyle;                      // Optional: Base text styling
  textButtonStyle?: TextStyle;                // Optional: Button text styling
  textComponent?: ComponentType<TextProps>;   // Optional: Custom text component
  moreText?: string;                          // Optional: Default 'more'
  lessText?: string;                          // Optional: Default 'less'
  animated?: boolean;                         // Optional: Default false
  onMorePress?: () => void;                   // Optional: Custom more handler
  ellipsizeMode?: 'head' | 'middle' | 'tail' | 'clip'; // Optional: Ellipsize mode
};

// Full configuration example
<MoreOrLess
  numberOfLines={5}
  containerStyle={{ backgroundColor: '#f9f9f9', padding: 16 }}
  textStyle={{ fontSize: 16, color: '#333', lineHeight: 24 }}
  textButtonStyle={{ color: '#007AFF', fontWeight: 'bold' }}
  textComponent={Text}
  moreText="Read more"
  lessText="Show less"
  animated={true}
  ellipsizeMode="tail"
>
  Your text content here
</MoreOrLess>
```

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

### Dynamic Content Updates with MoreOrLess

Source: https://context7.com/rarenatoe/react-native-more-or-less-text/llms.txt

Shows how to handle dynamic content changes in the MoreOrLess component by managing state and using a key prop to force re-renders. This example cycles through different articles, demonstrating re-rendering with new content. It requires React, useState, Button, StyleSheet, and MoreOrLess.

```tsx
import React, { useState } from 'react';
import { View, Button, StyleSheet } from 'react-native';
import { MoreOrLess } from 'react-native-more-or-less-text';

const articles = [
  'First article content with multiple paragraphs...',
  'Second article with different length and content...',
  'Third article that might be shorter or longer...'
];

export default function DynamicContent() {
  const [currentIndex, setCurrentIndex] = useState(0);

  const nextArticle = () => {
    setCurrentIndex((prev) => (prev + 1) % articles.length);
  };

  return (
    <View style={styles.container}>
      <MoreOrLess
        key={currentIndex} // Force remount on content change
        numberOfLines={4}
        textButtonStyle={{ color: '#FF6B6B' }}
        textStyle={{ fontSize: 16 }}
        animated
      >
        {articles[currentIndex]}
      </MoreOrLess>

      <Button title="Next Article" onPress={nextArticle} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 20,
    backgroundColor: '#f5f5f5'
  }
});
```

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

### Custom onPress Handler for Modal Display with MoreOrLess in React Native

Source: https://context7.com/rarenatoe/react-native-more-or-less-text/llms.txt

Illustrates how to implement a custom 'onMorePress' handler to trigger a modal, providing a way to display the full text content without direct inline expansion. This pattern is useful for detailed views or when the full content needs to be presented in a separate interface. The example shows toggling modal visibility and displaying the complete article within it.

```tsx
import React, { useState } from 'react';
import { View, Modal, Button, StyleSheet, ScrollView } from 'react-native';
import { MoreOrLess } from 'react-native-more-or-less-text';

export default function ArticleWithModal() {
  const [modalVisible, setModalVisible] = useState(false);

  const article = `Very long article content that you want to show in a modal...
    Multiple paragraphs of text that would be too long to display inline...`;

  return (
    <View style={styles.container}>
      <MoreOrLess
        numberOfLines={4}
        moreText="Read full article"
        onMorePress={() => setModalVisible(true)}
        textButtonStyle={{ color: '#007AFF', fontWeight: '600' }}
        textStyle={{ fontSize: 16, lineHeight: 24 }}
      >
        {article}
      </MoreOrLess>

      <Modal
        visible={modalVisible}
        animationType="slide"
        onRequestClose={() => setModalVisible(false)}
      >
        <ScrollView style={styles.modalContent}>
          <MoreOrLess numberOfLines={999}>
            {article}
          </MoreOrLess>
          <Button title="Close" onPress={() => setModalVisible(false)} />
        </ScrollView>
      </Modal>
    </View>
  );
}

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

```

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

### usePrevious Custom Hook for Tracking Value Changes

Source: https://context7.com/rarenatoe/react-native-more-or-less-text/llms.txt

Explains the `usePrevious` custom hook from react-native-more-or-less-text, which allows tracking the previous value of a state or prop across renders. This is useful for detecting changes and performing actions based on the previous state, as shown in the example with console logging.

```tsx
import { usePrevious } from 'react-native-more-or-less-text/src/hooks';
import React from 'react';
import { Text } from 'react-native'; // Assuming Text is imported

export default function TrackedComponent({ value }: { value: number }) {
  const previousValue = usePrevious(value);

  React.useEffect(() => {
    if (previousValue !== undefined && previousValue !== value) {
      console.log(`Value changed from ${previousValue} to ${value}`);
    }
  }, [value, previousValue]);

  return <Text>Current: {value}, Previous: {previousValue}</Text>;
}
```

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

### Run Unit Tests with Jest

Source: https://github.com/rarenatoe/react-native-more-or-less-text/blob/main/CONTRIBUTING.md

Executes the unit tests for the project using Jest. Adding tests for your changes is highly recommended to ensure functionality and prevent regressions.

```shell
yarn test
```

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

### Animated Expansion and Collapse with MoreOrLess

Source: https://context7.com/rarenatoe/react-native-more-or-less-text/llms.txt

Demonstrates how to use the MoreOrLess component to create a text view that expands and collapses with smooth spring animations. It takes a description string as input and renders it with 'Show more' and 'Show less' buttons. Dependencies include React, react-native, and the MoreOrLess component.

```tsx
import React from 'react';
import { View, StyleSheet } from 'react-native';
import { MoreOrLess } from 'react-native-more-or-less-text';

export default function AnimatedTextCard({ description }: { description: string }) {
  return (
    <View style={styles.card}>
      <MoreOrLess
        numberOfLines={3}
        animated={true}
        moreText="+ Show more"
        lessText="- Show less"
        textButtonStyle={styles.button}
        textStyle={styles.text}
        containerStyle={styles.textContainer}
      >
        {description}
      </MoreOrLess>
    </View>
  );
}

const styles = StyleSheet.create({
  card: {
    backgroundColor: 'white',
    borderRadius: 12,
    padding: 16,
    marginVertical: 8,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3
  },
  textContainer: {
    marginBottom: 8
  },
  text: {
    fontSize: 15,
    lineHeight: 22,
    color: '#333'
  },
  button: {
    color: '#007AFF',
    fontWeight: '600',
    fontSize: 15
  }
});
```

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

### Basic Usage of MoreOrLess Component in React Native

Source: https://github.com/rarenatoe/react-native-more-or-less-text/blob/main/README.md

Demonstrates how to import and use the MoreOrLess component in a React Native application. It shows how to pass children text and configure basic props like numberOfLines and animation.

```tsx
import { MoreOrLess } from "react-native-more-or-less-text";

// ...

export default function App() {
  return (
    <MoreOrLess
      numberOfLines={3}
      textComponent={CustomText}
      textButtonStyle={{ color: 'lightblue' }}
      animated
    >
      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.
    </MoreOrLess>
  );
}

```

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

### Publish New Versions with Release-it

Source: https://github.com/rarenatoe/react-native-more-or-less-text/blob/main/CONTRIBUTING.md

Publishes new versions of the package to npm using the release-it tool. This command automates tasks like version bumping, tag creation, and release generation.

```shell
yarn release
```

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

### Verify Code with TypeScript and ESLint

Source: https://github.com/rarenatoe/react-native-more-or-less-text/blob/main/CONTRIBUTING.md

Runs TypeScript for type checking and ESLint for code linting to ensure code quality and consistency. These checks are crucial before committing code.

```shell
yarn typescript
yarn lint
```

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

### Basic Text Truncation with More/Less Buttons in React Native

Source: https://context7.com/rarenatoe/react-native-more-or-less-text/llms.txt

Demonstrates the basic usage of the MoreOrLess component to truncate text after a specified number of lines, showing 'more' and 'less' buttons for expanding and collapsing content. It supports custom styles for text and buttons, and enables animated transitions.

```tsx
import React from 'react';
import { StyleSheet, SafeAreaView, Text } from 'react-native';
import { MoreOrLess } from 'react-native-more-or-less-text';

export default function App() {
  const longText = `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.`;

  return (
    <SafeAreaView style={styles.container}>
      <MoreOrLess
        numberOfLines={3}
        textButtonStyle={{ color: 'blue' }}
        textStyle={{ fontSize: 16, color: '#333' }}
        containerStyle={{ padding: 20 }}
        moreText="Read more"
        lessText="Show less"
        animated
      >
        {longText}
      </MoreOrLess>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: '#fff' }
});

```

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

### Fix Code Formatting Errors

Source: https://github.com/rarenatoe/react-native-more-or-less-text/blob/main/CONTRIBUTING.md

Automatically fixes code formatting errors detected by ESLint and Prettier. This command helps maintain consistent code style across the project.

```shell
yarn lint --fix
```

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

### useToggle Custom Hook for Boolean State Management

Source: https://context7.com/rarenatoe/react-native-more-or-less-text/llms.txt

Illustrates the usage of the `useToggle` custom hook, which is part of the react-native-more-or-less-text library. This hook simplifies managing boolean states by providing toggle, setTrue, and setFalse functions. It's useful for controlling UI element visibility.

```tsx
import { useToggle } from 'react-native-more-or-less-text/src/hooks';
import { View, Button, Text } from 'react-native'; // Assuming Text and Button are imported

export default function CustomComponent() {
  const { value: isVisible, toggle, setTrue, setFalse } = useToggle(false);

  return (
    <View>
      <Button title="Toggle" onPress={toggle} />
      <Button title="Show" onPress={setTrue} />
      <Button title="Hide" onPress={setFalse} />
      {isVisible && <Text>Content is visible</Text>}
    </View>
  );
}
```

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

### React Native Custom Text Component Integration with MoreOrLess

Source: https://context7.com/rarenatoe/react-native-more-or-less-text/llms.txt

Shows how to integrate a custom text component, like one with custom fonts, into the MoreOrLess component. This allows for advanced styling and font usage while retaining the text truncation and expand/collapse functionality. The `textComponent` prop is used to specify the custom component.

```tsx
import React from 'react';
import { Text, TextProps, StyleSheet, Platform } from 'react-native';
import { MoreOrLess } from 'react-native-more-or-less-text';

// Custom text component with custom font
const CustomText = React.forwardRef<Text, TextProps>((props, ref) => (
  <Text
    ref={ref}
    style={[
              styles.customFont,
              props.onPress && styles.pressable,
              props.style
            ]}
    {...props}
  />
));

const styles = StyleSheet.create({
  customFont: {
    fontFamily: Platform.select({ ios: 'Menlo', android: 'monospace' })
  },
  pressable: {
    fontWeight: 'bold',
    textDecorationLine: 'underline'
  }
});

// Usage in component
export default function ArticleView({ content }: { content: string }) {
  return (
    <MoreOrLess
      numberOfLines={5}
      textComponent={CustomText}
      textStyle={{ fontSize: 18, color: 'mediumslateblue' }}
      textButtonStyle={{ color: 'darkviolet' }}
      animated
    >
      {content}
    </MoreOrLess>
  );
}

```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.