### Start Metro Packager for Example App

Source: https://github.com/skipperlla/rn-swiper-list/blob/main/CONTRIBUTING.md

Use this command to start the Metro bundler, which serves the JavaScript bundle for the example application. This is necessary before running the app on a device or simulator.

```sh
yarn example start
```

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

### Run Example App on Web

Source: https://github.com/skipperlla/rn-swiper-list/blob/main/CONTRIBUTING.md

This command launches the example application in a web browser, allowing for testing of the web version of the application.

```sh
yarn example web
```

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

### Install Project Dependencies with Yarn

Source: https://github.com/skipperlla/rn-swiper-list/blob/main/CONTRIBUTING.md

This command initializes the monorepo by installing all required dependencies for each package within the Yarn workspaces setup. It's the first step to get the project ready for development.

```sh
yarn
```

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

### Run Example App on Android

Source: https://github.com/skipperlla/rn-swiper-list/blob/main/CONTRIBUTING.md

This command builds and deploys the example application to a connected Android device or emulator. It allows developers to test changes on the Android platform.

```sh
yarn example android
```

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

### Run Example App on iOS

Source: https://github.com/skipperlla/rn-swiper-list/blob/main/CONTRIBUTING.md

This command builds and deploys the example application to an iOS simulator or a connected iOS device. It's used for testing changes on the iOS platform.

```sh
yarn example ios
```

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

### Install rn-swiper-list and Required Dependencies

Source: https://github.com/skipperlla/rn-swiper-list/blob/main/README.md

Instructions to install the `rn-swiper-list` package and its essential peer dependencies, `react-native-reanimated` and `react-native-gesture-handler`, using the Yarn package manager. These dependencies are crucial for the swiper's animation and gesture functionalities.

```sh
yarn add rn-swiper-list
```

```sh
yarn add react-native-reanimated react-native-gesture-handler
```

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

### Reference for Project Development Scripts

Source: https://github.com/skipperlla/rn-swiper-list/blob/main/CONTRIBUTING.md

This section documents the various scripts available in the project's `package.json` file, providing a quick reference for common development tasks and their corresponding Yarn commands.

```APIDOC
yarn: setup project by installing dependencies.
yarn typecheck: type-check files with TypeScript.
yarn lint: lint files with ESLint.
yarn test: run unit tests with Jest.
yarn example start: start the Metro server for the example app.
yarn example android: run the example app on Android.
yarn example ios: run the example app on iOS.
```

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

### Publish New Package Version to npm

Source: https://github.com/skipperlla/rn-swiper-list/blob/main/CONTRIBUTING.md

This command initiates the release process for publishing a new version of the package to npm using 'release-it'. It handles tasks like version bumping, creating tags, and generating releases.

```sh
yarn release
```

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

### Verify Code Quality with Type Checking and Linting

Source: https://github.com/skipperlla/rn-swiper-list/blob/main/CONTRIBUTING.md

These commands ensure code quality by running TypeScript for type checking and ESLint for static code analysis. It's crucial to pass these checks before submitting contributions.

```sh
yarn typecheck
yarn lint
```

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

### Execute Project Unit Tests

Source: https://github.com/skipperlla/rn-swiper-list/blob/main/CONTRIBUTING.md

This command runs the project's unit tests using Jest. It's important to add and run tests for any new features or bug fixes to ensure code correctness and prevent regressions.

```sh
yarn test
```

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

### Automatically Fix Code Formatting and Linting Issues

Source: https://github.com/skipperlla/rn-swiper-list/blob/main/CONTRIBUTING.md

This command attempts to automatically fix common formatting and linting errors identified by ESLint. It helps maintain consistent code style across the project.

```sh
yarn lint --fix
```

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

### React Native Component Structure and Styling

Source: https://github.com/skipperlla/rn-swiper-list/blob/main/README.md

This snippet illustrates the basic structure of a React Native `App` component, demonstrating how to use `ActionButton` within a `GestureHandlerRootView` and defining various styles using `StyleSheet.create` for layout, buttons, and card elements. It shows common React Native styling patterns for flexbox, dimensions, colors, and shadows.

```javascript
          style={styles.button}
          onTap={() => {
            ref.current?.swipeRight();
          }}
        >
          <AntDesign name="heart" size={ICON_SIZE} color="white" />
        </ActionButton>
      </View>
    </GestureHandlerRootView>
  );
};

export default App;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  buttonsContainer: {
    flexDirection: 'row',
    bottom: 34,
    alignItems: 'center',
    justifyContent: 'center',
    gap: 24,
  },
  button: {
    height: 50,
    borderRadius: 40,
    aspectRatio: 1,
    backgroundColor: '#3A3D45',
    elevation: 4,
    justifyContent: 'center',
    alignItems: 'center',
    shadowColor: 'black',
    shadowOpacity: 0.1,
    shadowOffset: {
      width: 0,
      height: 4,
    },
  },
  renderCardContainer: {
    borderRadius: 15,
    width: '100%',
    height: '100%',
  },
  renderFlippedCardContainer: {
    borderRadius: 15,
    backgroundColor: '#baeee5',
    width: '100%',
    height: '100%',
    alignItems: 'center',
    justifyContent: 'center',
  },
  buttonText: {
    fontSize: 20,
    fontWeight: 'bold',
  },
  cardStyle: {
    width: '90%',
    height: '90%',
    borderRadius: 15,
    justifyContent: 'center',
    alignItems: 'center',
  },
  renderCardImage: {
    height: '100%',
    width: '100%',
    borderRadius: 15,
  },
  subContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  overlayLabelContainer: {
    borderRadius: 15,
    height: '90%',
    width: '90%',
  },
  text: {
    color: '#001a72',
  },
  overlayLabelContainerStyle: {
    alignItems: 'center',
    justifyContent: 'center',
  }
});
```

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

### Spring Configuration Parameters for Swipe Animations

Source: https://github.com/skipperlla/rn-swiper-list/blob/main/README.md

Defines the set of parameters used to control the animation behavior of swipe actions in the rn-swiper-list component. These parameters allow fine-tuning of the spring's physical properties to achieve desired animation characteristics, such as speed, rigidity, and bounce.

```APIDOC
SpringConfig:
  damping: number
    Description: Controls the amount of damping in the spring. Higher values result in more damping, causing the animation to slow down more quickly.
  stiffness: number
    Description: Controls the stiffness of the spring. Higher values result in a stiffer spring, causing the animation to be more rigid and faster.
  mass: number
    Description: Controls the mass of the object being animated. Higher values result in a heavier object, causing the animation to be slower.
  overshootClamping: boolean
    Description: If true, the spring animation will not overshoot its target value. This means the animation will stop exactly at the target value without bouncing.
  restDisplacementThreshold: number
    Description: The threshold for the displacement of the spring below which the spring is considered to be at rest. Lower values result in a more precise stopping point.
  restSpeedThreshold: number
    Description: The threshold for the speed of the spring below which the spring is considered to be at rest. Lower values result in a more precise stopping point.
```

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

### rn-swiper-list Card Props API Reference

Source: https://github.com/skipperlla/rn-swiper-list/blob/main/README.md

Detailed API documentation for the `Card Props` of the `rn-swiper-list` component. This section outlines all available properties that can be passed to customize card rendering, behavior, and styling, including their data types, descriptions, whether they are required, and their default values.

```APIDOC
Card Props:
  data: array
    description: Array of data objects used to render the cards.
    required: Yes
  renderCard: func(cardData, cardIndex)
    description: Function that renders a card based on the provided data and index.
    required: Yes
  prerenderItems: number
    description: Number of cards to prerender ahead of the active card for better performance.
    required: No
    default: data.length - 1
  cardStyle: object
    description: CSS style properties applied to each card. These can be applied inline.
  flippedCardStyle: object
    description: CSS style properties for the back of the card.
  regularCardStyle: object
    description: CSS style properties for the front of the card.
  overlayLabelContainerStyle: object
    description: CSS style properties for the overlay label container.
  keyExtractor: func
    description: Function that returns a unique key for each card based on the provided data.
    required: No
  children: React.ReactNode
    description: Child components to be displayed inside the component. Used typically for composition.
  FlippedContent: func(item, index)
    description: Function that renders the content for the back of the card.
    required: No
  loop: bool
    description: If true, the swiper will loop back to the first card after the last card is swiped.
    required: No
    default: false
```

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

### React Native Swiper List Component Implementation

Source: https://github.com/skipperlla/rn-swiper-list/blob/main/README.md

This TypeScript code demonstrates a complete React Native component (`App`) that utilizes the `rn-swiper-list` library. It includes defining image data, custom render functions for both the front and flipped states of cards, overlay labels for different swipe directions, and action buttons to programmatically control card swiping and flipping using a `useRef` hook.

```typescript
import React, { useCallback, useRef } from 'react';
import {
  Image,
  StyleSheet,
  Text,
  View,
  type ImageSourcePropType,
} from 'react-native';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { AntDesign } from '@expo/vector-icons';
import { Swiper, type SwiperCardRefType } from 'rn-swiper-list';

import { ActionButton } from '../components';

const IMAGES: ImageSourcePropType[] = [
  require('../assets/images/1.jpg'),
  require('../assets/images/2.jpg'),
  require('../assets/images/3.jpg'),
  require('../assets/images/4.jpg'),
  require('../assets/images/5.jpg'),
  require('../assets/images/6.jpg'),
];

const ICON_SIZE = 24;

const App = () => {
  const ref = useRef<SwiperCardRefType>();

  const renderCard = useCallback((image: ImageSourcePropType) => {
    return (
      <View style={styles.renderCardContainer}>
        <Image
          source={image}
          style={styles.renderCardImage}
          resizeMode="cover"
        />
      </View>
    );
  }, []);
  const renderFlippedCard = useCallback(
    (_: ImageSourcePropType, index: number) => {
      return (
        <View style={styles.renderFlippedCardContainer}>
          <Text style={styles.text}>Flipped content 🚀 {index}</Text>
        </View>
      );
    },
    []
  );
  const OverlayLabelRight = useCallback(() => {
    return (
      <View
        style={[
          styles.overlayLabelContainer,
          {
            backgroundColor: 'green',
          },
        ]}
      />
    );
  }, []);
  const OverlayLabelLeft = useCallback(() => {
    return (
      <View
        style={[
          styles.overlayLabelContainer,
          {
            backgroundColor: 'red',
          },
        ]}
      />
    );
  }, []);
  const OverlayLabelTop = useCallback(() => {
    return (
      <View
        style={[
          styles.overlayLabelContainer,
          {
            backgroundColor: 'blue',
          },
        ]}
      />
    );
  }, []);
  const OverlayLabelBottom = useCallback(() => {
    return (
      <View
        style={[
          styles.overlayLabelContainer,
          {
            backgroundColor: 'orange',
          },
        ]}
      />
    );
  }, []);

  return (
    <GestureHandlerRootView style={styles.container}>
      <View style={styles.subContainer}>
        <Swiper
          ref={ref}
          data={IMAGES}
          cardStyle={styles.cardStyle}
          overlayLabelContainerStyle={styles.overlayLabelContainerStyle}
          renderCard={renderCard}
          onIndexChange={(index) => {
            console.log('Current Active index', index);
          }}
          onSwipeRight={(cardIndex) => {
            console.log('cardIndex', cardIndex);
          }}
          onPress={() => {
            console.log('onPress');
          }}
          onSwipedAll={() => {
            console.log('onSwipedAll');
          }}
          FlippedContent={renderFlippedCard}
          onSwipeLeft={(cardIndex) => {
            console.log('onSwipeLeft', cardIndex);
          }}
          onSwipeTop={(cardIndex) => {
            console.log('onSwipeTop', cardIndex);
          }}
          onSwipeBottom={(cardIndex) => {
            console.log('onSwipeBottom', cardIndex);
          }}
          OverlayLabelRight={OverlayLabelRight}
          OverlayLabelLeft={OverlayLabelLeft}
          OverlayLabelTop={OverlayLabelTop}
          OverlayLabelBottom={OverlayLabelBottom}
          onSwipeActive={() => {
            console.log('onSwipeActive');
          }}
          onSwipeStart={() => {
            console.log('onSwipeStart');
          }}
          onSwipeEnd={() => {
            console.log('onSwipeEnd');
          }}
        />
      </View>

      <View style={styles.buttonsContainer}>
        <ActionButton
          style={styles.button}
          onTap={() => {
            ref.current?.flipCard();
          }}
        >
          <AntDesign name="sync" size={ICON_SIZE} color="white" />
        </ActionButton>
        <ActionButton
          style={styles.button}
          onTap={() => {
            ref.current?.swipeBack();
          }}
        >
          <AntDesign name="reload1" size={ICON_SIZE} color="white" />
        </ActionButton>
        <ActionButton
          style={styles.button}
          onTap={() => {
            ref.current?.swipeLeft();
          }}
        >
          <AntDesign name="close" size={ICON_SIZE} color="white" />
        </ActionButton>
        <ActionButton
          style={styles.button}
          onTap={() => {
            ref.current?.swipeBottom();
          }}
        >
          <AntDesign name="arrowdown" size={ICON_SIZE} color="white" />
        </ActionButton>
        <ActionButton
          style={styles.button}
          onTap={() => {
            ref.current?.swipeTop();
          }}
        >
          <AntDesign name="arrowup" size={ICON_SIZE} color="white" />
        </ActionButton>
```

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

### TypeScript Type Definitions for Swiper Component Options and Ref

Source: https://github.com/skipperlla/rn-swiper-list/blob/main/README.md

This section defines the TypeScript types used by the `rn-swiper-list` library. `SwiperCardRefType` specifies the methods available for programmatic control of card swiping and flipping. `SwiperOptions<T>` details all configurable properties for the component, including data handling, rendering functions, various callback events for swipe actions, animation properties (rotation, overlay labels, flip), and spring configurations for swipe animations.

```typescript
type SwiperCardRefType =
  | {
      swipeRight: () => void;
      swipeLeft: () => void;
      swipeBack: () => void;
      swipeTop: () => void;
      swipeBottom: () => void;
      flipCard: () => void;
    }
  | undefined;

type SwiperOptions<T> = {
  /*
   * Card data and render function
   */
  data: T[];
  renderCard: (item: T, index: number) => JSX.Element;
  prerenderItems?: number;
  cardStyle?: StyleProp<ViewStyle>;
  flippedCardStyle?: StyleProp<ViewStyle>;
  regularCardStyle?: StyleProp<ViewStyle>;
  overlayLabelContainerStyle?: StyleProp<ViewStyle>;
  keyExtractor?: (item: T, index: number) => string | number;
  FlippedContent?: (item: T, index: number) => JSX.Element;
  loop?: boolean;
  keyExtractor?: (item: T, index: number) => string | number;
  /*
   * Children components
   */
  onSwipeLeft?: (cardIndex: number) => void;
  onSwipeRight?: (cardIndex: number) => void;
  onSwipeTop?: (cardIndex: number) => void;
  onSwipeBottom?: (cardIndex: number) => void;
  onSwipedAll?: () => void;
  onSwipeStart?: () => void;
  onSwipeEnd?: () => void;
  onSwipeActive?: () => void;
  onPress?: () => void;
  onIndexChange?: (index: number) => void;
  /*
   * Swipe methods
   */
  disableRightSwipe?: boolean;
  disableLeftSwipe?: boolean;
  disableTopSwipe?: boolean;
  disableBottomSwipe?: boolean;
  /*
   * Rotation Animation Props
   */
  translateXRange?: number[];
  translateYRange?: number[];
  rotateInputRange?: number[];
  rotateOutputRange?: number[];
  /*
   * Overlay Labels Animation Props
   */
  inputOverlayLabelRightOpacityRange?: number[];
  outputOverlayLabelRightOpacityRange?: number[];
  inputOverlayLabelLeftOpacityRange?: number[];
  outputOverlayLabelLeftOpacityRange?: number[];
  inputOverlayLabelTopOpacityRange?: number[];
  outputOverlayLabelTopOpacityRange?: number[];
  inputOverlayLabelBottomOpacityRange?: number[];
  outputOverlayLabelBottomOpacityRange?: number[];
  OverlayLabelRight?: () => JSX.Element;
  OverlayLabelLeft?: () => JSX.Element;
  OverlayLabelTop?: () => JSX.Element;
  OverlayLabelBottom?: () => JSX.Element;
  /*
   * Flip Animation Props
   */
  direction?: 'x' | 'y';
  flipDuration?: number;
  /*
   * Swipe Animation Spring Configs (Animation Speed)
   */
  swipeBackXSpringConfig?: SpringConfig;
  swipeBackYSpringConfig?: SpringConfig;
  swipeRightSpringConfig?: SpringConfig;
  swipeLeftSpringConfig?: SpringConfig;
  swipeTopSpringConfig?: SpringConfig;
  swipeBottomSpringConfig?: SpringConfig;
  /*
   * Swipe Velocity Threshold
   */
  swipeVelocityThreshold?: number;
};
```

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

### Swipe Animation Spring Configs (Animation Speed)

Source: https://github.com/skipperlla/rn-swiper-list/blob/main/README.md

Details the SpringConfig properties used to customize the animation speed and physics for various swipe back and fling animations, providing fine-grained control over the animation feel.

```APIDOC
SwipeAnimationSpringConfigs:
  swipeBackXSpringConfig: SpringConfig
    Description: Spring configuration for swipe back animation on the X-axis.
  swipeBackYSpringConfig: SpringConfig
    Description: Spring configuration for swipe back animation on the Y-axis.
  swipeRightSpringConfig: SpringConfig
    Description: Spring configuration for swipe right animation on the X-axis.
  swipeLeftSpringConfig: SpringConfig
    Description: Spring configuration for swipe left animation on the X-axis.
  swipeTopSpringConfig: SpringConfig
    Description: Spring configuration for swipe top animation on the Y-axis.
  swipeBottomSpringConfig: SpringConfig
    Description: Spring configuration for swipe bottom animation on the Y-axis.
```

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

### Swipe methods

Source: https://github.com/skipperlla/rn-swiper-list/blob/main/README.md

Lists methods available for programmatically controlling card swipe and flip actions, allowing for resetting card position or initiating specific swipe animations.

```APIDOC
SwipeMethods:
  swipeBack: callback
    Description: Resets the card position after a swipe event.
  swipeRight: callback
    Description: Animates the card to fling to the right and calls onSwipeRight.
  swipeLeft: callback
    Description: Animates the card to fling to the left and calls onSwipeLeft.
  swipeTop: callback
    Description: Animates the card to fling to the top and calls onSwipeTop.
  swipeBottom: callback
    Description: Animates the card to fling to the bottom and calls onSwipeBottom.
  flipCard: callback
    Description: Flips the card to show the back content.
```

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

### Overlay Labels Animation Props

Source: https://github.com/skipperlla/rn-swiper-list/blob/main/README.md

Defines properties for controlling the animation of overlay labels during swipe gestures, including opacity ranges and custom components to be rendered as labels.

```APIDOC
OverlayLabelsAnimationProps:
  inputOverlayLabelRightOpacityRange: array (default: [0, windowWidth / 3])
    Description: Array defining the input range for animating the opacity of the right overlay label.
  outputOverlayLabelRightOpacityRange: array (default: [0, 1])
    Description: Array defining the output opacity values for the right overlay label, corresponding to the input range.
  inputOverlayLabelLeftOpacityRange: array (default: [0, -(windowWidth / 3)])
    Description: Array defining the input range for animating the opacity of the left overlay label.
  outputOverlayLabelLeftOpacityRange: array (default: [0, 1])
    Description: Array defining the output opacity values for the left overlay label, corresponding to the input range.
  OverlayLabelRight: () => JSX.Element
    Description: Component rendered as an overlay label for right swipes.
  OverlayLabelLeft: () => JSX.Element
    Description: Component rendered as an overlay label for left swipes.
  OverlayLabelTop: () => JSX.Element
    Description: Component rendered as an overlay label for top swipes.
  OverlayLabelBottom: () => JSX.Element
    Description: Component rendered as an overlay label for bottom swipes.
```

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

### Flip Animation Props

Source: https://github.com/skipperlla/rn-swiper-list/blob/main/README.md

Specifies properties for configuring the card flip animation, such as the direction of the flip and its duration in milliseconds.

```APIDOC
FlipAnimationProps:
  direction: 'x' | 'y' (default: 'y')
    Description: The direction of the flip animation.
  flipDuration: number (default: 500)
    Description: The duration of the flip animation in ms.
```

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

### Rotation Animation Properties for rn-swiper-list

Source: https://github.com/skipperlla/rn-swiper-list/blob/main/README.md

Defines parameters for the card rotation animation, including ranges for horizontal and vertical translation, input ranges for rotation mapping, and output ranges for rotation values and overlay label opacities. These properties enable customization of the visual feedback during card swipes.

```APIDOC
Rotation Animation Props:
  translateXRange (array): Translates the card horizontally. Default: [-windowWidth / 3, 0, windowWidth / 3]
  translateYRange (array): Translates the card vertically. Default: [-windowHeight / 3, 0, windowHeight / 3]
  rotateInputRange (array): Array specifying the range of x values for rotation mapping. Default: [-windowWidth / 3, 0, windowWidth / 3]
  outputRotationRange (array): Array of rotation values corresponding to rotateInputRange. Default: [-Math.PI / 20, 0, Math.PI / 20]
  inputOverlayLabelTopOpacityRange (array): Array defining the input range for animating the opacity of the top overlay label. Default: [0, -(windowHeight / 3)]
  outputOverlayLabelTopOpacityRange (array): Array defining the output opacity values for the top overlay label, corresponding to the input range. Default: [0, 1]
  inputOverlayLabelBottomOpacityRange (array): Array defining the input range for animating the opacity of the bottom overlay label. Default: [0, windowHeight / 3]
  outputOverlayLabelBottomOpacityRange (array): Array defining the output opacity values for the bottom overlay label, corresponding to the input range. Default: [0, 1]
```

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

### Event Callbacks for rn-swiper-list

Source: https://github.com/skipperlla/rn-swiper-list/blob/main/README.md

Defines the functions that are called in response to various swipe and interaction events on the cards within the rn-swiper-list component. These callbacks allow developers to implement custom logic when cards are swiped in different directions, when all cards are swiped, or when a swipe event starts/ends.

```APIDOC
Event Callbacks:
  onSwipeLeft (func): Function called when a card is swiped left. It receives the index of the card as a parameter. Default: (cardIndex) => {}
  onSwipeRight (func): Function called when a card is swiped right. It receives the index of the card as a parameter. Default: (cardIndex) => {}
  onSwipeTop (func): Function called when a card is swiped top. It receives the index of the card as a parameter. Default: (cardIndex) => {}
  onSwipeBottom (func): Function called when a card is swiped bottom. It receives the index of the card as a parameter. Default: (cardIndex) => {}
  onSwipedAll (func): Function called when all cards have been swiped. Default: () => {}
  onSwipeStart (func): Function called when a swipe event starts. Default: () => {}
  onSwipeEnd (func): Function called when a swipe event ends. Default: () => {}
  onSwipeActive (func): Function called when a swipe event is active. Default: () => {}
  onIndexChange (func): Function called when the index of the card changes. It receives the index of the card as a parameter. Default: (cardIndex) => {}
  onPress (func): Function called when the card is pressed (tapped). Default: () => {}
```

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

### Swipe Animation Properties for rn-swiper-list

Source: https://github.com/skipperlla/rn-swiper-list/blob/main/README.md

Configures the behavior of swipe animations, allowing for the disabling of specific swipe directions and setting a velocity threshold for swipe detection. These properties provide fine-grained control over how users can interact with the swiper list.

```APIDOC
Swipe Animation Props:
  disableLeftSwipe (bool): If true, disables the ability to swipe left. Default: false
  disableRightSwipe (bool): If true, disables the ability to swipe right. Default: false
  disableTopSwipe (bool): If true, disables the ability to swipe upwards. Default: false
  swipeVelocityThreshold (number): Sets the minimum velocity (in px/s) required to trigger a swipe regardless of card position. If undefined, velocity-based swiping is disabled. Default: undefined
  disableBottomSwipe (bool): If true, disables the ability to swipe downwards. Default: false
```

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