1.0.0 • Published 5 years ago
react-native-image-diff v1.0.0
react-native-image-diff 
Image Diff component for React Native: swipe between two images for comparison.
Installation
npm install react-native-image-diff --saveUsage
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>
)
}
}