react-native-image-diff

Image Diff component for React Native: swipe between two images for comparison.

Installation

npm install react-native-image-diff --save

Usage

import ImageDiff from 'react-native-image-diff'
...
{/* Basic usage */}
<ImageDiff
  before={require('./code.jpg')} // before={{ uri: 'https://...' }}
  after={require('./code_bw.jpg')}
/>
 
{/* With custom options */}
<ImageDiff
  before={require('./code.jpg')}
  after={require('./code_bw.jpg')}
  width={200} // other example: screenWidth * 0.7
  initialHeight={100} // final height will be calculated to maintain aspect ratio
  initialOffsetPercentage={0.3}
  separatorWidth={3}
  separatorColor='red'
  style={{}}
/>

Props

Prop	Type	Default	Note
before	Image source	undefined	(Required) Source of 'before' image
after	Image source	undefined	(Required) Source of 'after' image
initialOffsetPercentage	number	0.5	Percentage (0 to 1) of width to describe the initial separator position
width	number	Screen width	Image's width
initialHeight	number	Half of screen width	Initial height of image. Final height will be calculated after image is loaded to maintain aspect ratio.
separatorWidth	number	1	Separator's width. Set as 0 to hide it.
separatorColor	color	'black'	Color of separator
style	style	{}	Style of component's container. You can't override height or width here, for that, set width prop. This is for margins, background color, etc.

Example

import ImageDiff from 'react-native-image-diff'
 
export default class Screen extends Component {
  render () {
    return (
      <View style={styles.mainContainer}>
        <ScrollView style={styles.container}>
          <ImageDiff before={require('./code.jpg')} after={require('./code_bw.jpg')} />
        </ScrollView>
      </View>
    )
  }
}