Forked from: https://github.com/taranisag/react-native-compare-slider.
I have just updated the dependencies so it can run with the latest version of expo. The code in examples is probably not working anymore.

React Native Compare Slider

Compare any two components side-by-side

---

Features

• Supports images and any other React components (picture, video, canvas, iframe etc.)
• Supports landscape and portrait orientations
• Customization

Installation

$ npm install git://github.com/Dadacticiel/react-native-compare-slider

Props

Prop	Type	Required	Default value	Description
before	ReactNode	✓	undefined	First component to show in slider.
after	ReactNode	✓	undefined	Second component to show in slider.
containerSize	{ width: number; height: number; }	✓	{100%, 100%}	Container dimensions.
sliderSize	{ width: number; height: number; }		{50, 50}	Slider's handle dimensions.
SliderComponent	ReactNode		undefined	Slider's handle component.
sliderStyles	ViewStyle		undefined	Slider's handle styles.
showSeparationLine	boolean		undefined	Separation line visibility.
separationLineStyles	ViewStyle		undefined	Separation line styles.

Basic Image Usage

import { CompareSlider } from 'react-native-compare-slider';

<CompareSlider
  before={<Image source={imageBefore} resizeMode="cover" />}
  after={<Image source={imageAfter} resizeMode="cover" />}
  containerSize={{ width: 350, height: 100 }}
/>;

Google Maps Usage

install react-native-maps library

import { CompareSlider } from 'react-native-compare-slider';
import RNM, { MAP_TYPES, PROVIDER_GOOGLE } from 'react-native-maps';

<CompareSlider
  before={
    <RNM
      provider={PROVIDER_GOOGLE}
      mapType={MAP_TYPES.SATELLITE}
      initialRegion={{
        latitude: 33.61099089454942,
        longitude: -90.79735743461134,
        latitudeDelta: 1,
        longitudeDelta: 1,
      }}
    />
  }
  after={
    <RNM
      provider={PROVIDER_GOOGLE}
      mapType={MAP_TYPES.STANDARD}
      initialRegion={{
        latitude: 33.61099089454942,
        longitude: -90.79735743461134,
        latitudeDelta: 1,
        longitudeDelta: 1,
      }}
    />
  }
  containerSize={{ width: 300, height: 200 }}
/>;

Customization Usage

import { CompareSlider } from 'react-native-compare-slider';

<CompareSlider
  before={<Image source={imageBefore} resizeMode="cover" />}
  after={<Image source={imageAfter} resizeMode="cover" />}
  sliderStyles={{ backgroundColor: 'green' }}
  showSeparationLine={false}
  containerSize={{ width: 350, height: 100 }}
/>;

Custom Slider

import { CompareSlider } from 'react-native-compare-slider';

const sliderSize = { width: 70, height: 70 };

const styles = StyleSheet.create({
  slider: {
    ...sliderSize,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'rgba(255, 255, 255, 0.75)',
  },
  sliderText: {
    fontSize: 25,
  },
});

<CompareSlider
  before={<Image source={imageBefore} />}
  after={<Image source={imageAfter} />}
  sliderSize={sliderSize}
  SliderComponent={
    <View style={styles.slider}>
      <Text style={styles.sliderText}>{'<    >'}</Text>
    </View>
  }
  showSeparationLine={false}
  containerSize={{ width: 350, height: 100 }}
/>;

Requirements

• React 16.13+
• React Native 0.63+