React Native Image Compare

React Native Image Compare is a React Native component that enables users to visually compare two images by sliding a divider to reveal more or less of each image.

Features

• Chose two images: A slide allows you to see the differences between these two images

Coming soon

• Remove react native slider dependencies
• Slide by gesture
• Display an optionnal vertical separator

Installation

To install the React Native Image Comparison Slider, run the following command in your React Native project:

yarn add react-native-image-comparison-slider @react-native-community/slider

Or, if you prefer using npm:

npm install react-native-image-comparison-slider @react-native-community/slider --save

Usage

Here's a basic example of how to use the Image Comparison Slider in your React Native application:

import React from 'react';
import { View } from 'react-native';
import ImageComparisonSlider from 'react-native-image-comparison-slider';

const App = () => (
  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
    <ImageComparisonSlider
      imageLeft={{ uri: 'https://example.com/image1.jpg' }}
      imageRight={{ uri: 'https://example.com/image2.jpg' }}
    />
  </View>
);



export default App;

Props

| Prop | Type | Description | Default | |-----------------|----------|----------------------------------------------------|---------| | imageLeft | ImageSource | Source for the left image. | None | | imageRight | ImageSource | Source for the right image. | None |

Contributing

We welcome contributions to the React Native Image Comparison Slider! Whether it's reporting bugs, discussing new features, or submitting pull requests, all contributions are appreciated.

To contribute:

1. Fork the repository.
2. Create a new branch for your feature or fix.
3. Commit your changes.
4. Push to your branch.
5. Submit a pull request.

License

This project is licensed under the MIT License - see the LICENSE file for details.