Compare Any Two Components Side-by-side for React Native

Compare Any Two Components Side-by-side for React Native

Compare Any Two Components Side-by-side for React Native. React Native Compare Slider - Compare any two components side-by-side

React Native Compare Slider

Compare any two components side-by-side

Example


Features

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

Try it out

You can run examples by performing these steps:

$ git clone [email protected]:taranisag/react-native-compare-slider.git
$ npm install
$ npm start android

or check a demo page

Installation

$ npm install 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 }}
/>;

Example

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+

Download Details:

Author: taranisag The Demo/Documentation: View The Demo/Documentation Download Link: Download The Source Code Official Website: https://github.com/taranisag/react-native-compare-slider License: MIT

react-native react

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

React Native App Developers India, React Native App Development Company

Hire React Native app developers India from a preferred React Native app development company by innovative industry leaders. Let's Discuss Your Project.

Hire Dedicated React Native Developer

Have you ever thought of having your own app that runs smoothly over multiple platforms? React Native is an open-source cross-platform mobile application framework which is a great option to create mobile apps for both Android and iOS. **[Hire...

Factors affecting the cost of hiring a React Native developer in USA - TopDevelopers.co

Want to develop app using React Native? Here are the tips that will help to reduce the cost of react native app development for you.

How much does it cost to develop a React Native mobile app?

Save time & money when choosing AppClues for React Native Mobile app Development. We build React Native apps for Android & iOS using the same code & provide optimal output.