3

Compare any two components side-by-side for react native

 2 years ago
source link: https://reactnativeexample.com/compare-any-two-components-side-by-side-for-react-native/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

React Native Compare Slider

Compare any two components side-by-side

slider-teaser

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

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 }}
/>;
React JSX

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 }}
/>;
React JSX

slider-map-2

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 }}
/>;
React JSX

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 }}
/>;
React JSX

Requirements

  • React 16.13+
  • React Native 0.63+

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK