Native Image Comparison Slider

Compare any two images side by side in your React Native app.

Installation

To install the package, run the following command:

npm install @mahfujul-sagor/native-image-comparison-slider

or

npm i native-image-comparison-slider

Props

| Prop | Type | Required | Default Value | Description | | ---------------------- | ------------------------------------ | :------: | ----------------------------------- | ---------------------------------------------- | | before | ImageSourcePropType or string | ✓ | undefined | The first image to display in the slider. | | after | ImageSourcePropType or string | ✓ | undefined | The second image to display in the slider. | | containerSize | { width: number; height: number; } | ✓ | { width: '100%', height: '100%' } | Dimensions of the container. | | sliderSize | { width: number; height: number; } | | { width: 50, height: 50 } | Dimensions of the slider's handle. | | SliderComponent | ReactNode | | undefined | Custom component for the slider's handle. | | sliderStyles | ViewStyle | | undefined | Styles for the slider's handle. | | showSeparationLine | boolean | | undefined | Whether to show the separation line. | | separationLineStyles | ViewStyle | | undefined | Styles for the separation line. | | resizeMode | ImageResizeMode | | 'cover' | How to resize the image when the frame does not match its size. |

Usage

Here's a basic example of how to use the CompareSlider component:

import { CompareSlider } from '@mahfujul-sagor/native-image-comparison-slider';
// or
// import { CompareSlider } from 'native-image-comparison-slider';

const beforeImage = require('./path/to/beforeImage.png');
const afterImage = require('./path/to/afterImage.png');

<CompareSlider
  before={beforeImage}
  after={afterImage}
  containerSize={{ width: 350, height: 100 }}
/>;

Contributing

If you'd like to contribute, check out the contributing guide for more information on the development workflow and how to get involved.

License

This project is licensed under the MIT License.

Created using create-react-native-library