Before-After comparison slider for react-native applications

This is a comparison slider component to compare two images, components and etc.

Open project in the browser

Installation

npm i @malik.aliyev.94/react-native-before-after-slider

API

API

| Property | Optional | Default | Description | | ------------------- | -------- | ------------ | ------------------------------------------ | | width | yes | screen width | width of the slider | | height | yes | width/2 | height of the slider | | draggerWidth | yes | 50 | width of the dragger component | | initial | yes | 0 | initial position of the dragger | | onMoveStart | yes | empty | function to call on dragger move start | | onMove | yes | empty | function to call on dragger move | | onMoveEnd | yes | empty | function to call on dragger move end |

Examples

You can see usage examples with a default dragger and custom dragger below.

import React, { Component } from 'react';
import { Text, StyleSheet, View, Dimensions, Image, Platform, ScrollView } from 'react-native';
import Compare, { Before, After, DefaultDragger, Dragger } from '@malik.aliyev.94/react-native-before-after-slider';

const deviceWidth = Dimensions.get("window").width;
const deviceHeight = Dimensions.get("window").height;

export default class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      scrollEnabled: true,
    }
  }

  onMoveStart() {
    this.setState({scrollEnabled: false});
  }

  onMoveEnd() {
    this.setState({scrollEnabled: true});
  }

  render() {
    return (
      <ScrollView style={{marginTop: 50}} scrollEnabled={this.state.scrollEnabled}>

        <Text style={{marginBottom: 20, color: '#333', paddingLeft: 20, fontSize: 20}}>Default Dragger</Text>
        <Compare initial={deviceWidth/2} draggerWidth={50} onMoveStart={this.onMoveStart.bind(this)} onMoveEnd={this.onMoveEnd.bind(this)}>
          <Before>
            <Image source={require('./src/images/before.png')} style={{width: deviceWidth, height: deviceWidth/2}} />
          </Before>
          <After>
            <Image source={require('./src/images/after.png')} style={{width: deviceWidth, height: deviceWidth/2}} />
          </After>
          <DefaultDragger />
        </Compare>

        <Text style={{marginBottom: 20, marginTop: 20, color: '#333', paddingLeft: 20, fontSize: 20}}>Custom Dragger</Text>
        <Compare initial={deviceWidth/2} draggerWidth={50} >
          <Before>
            <Image source={require('./src/images/before.png')} style={{width: deviceWidth, height: deviceWidth/2}} />
          </Before>
          <After>
            <Image source={require('./src/images/after.png')} style={{width: deviceWidth, height: deviceWidth/2}} />
          </After>
          <Dragger>
            <View style={{position: 'absolute', top: 0, right: 24, bottom: 0, left: 24, backgroundColor: '#fff', opacity: .6}}></View>
            <View style={{position: 'absolute', top: deviceWidth/4, left: 10, backgroundColor: '#fff', opacity: .9, width: 30, height: 30, marginTop: -15, transform: [{ rotate: '45deg'}]}}></View>
          </Dragger>
        </Compare>

      </ScrollView>
    );
  }
}