React native swipe close image
A swipe close full screen image for Android and iOS
Installation
npm install react-native-swipe-close-image --save
Using
- Create SwipeCloseImage in render() with imageSource is the source of image (Can be local or remote url link)
import SwipeCloseImage from 'react-native-swipe-close-image';
...
render() {
...
<SwipeCloseImage
ref={c => (this.swipeToCloseRef = c)}
imageSource={this.state.imageSource}
/>
...
}- Then when want to open the image
...
this.swipeToCloseRef.onOpen(this.imageRef);
...Code
import SwipeCloseImage from 'react-native-swipe-close-image';
export default class App extends Component {
onPressImage = () => {
this.swipeToCloseRef.onOpen(this.imageRef);
this.setState({
imageSource:
'https://facebook.github.io/react-native/docs/assets/favicon.png'
});
};
render() {
return (
<View style={styles.container}>
<TouchableWithoutFeedback onPress={this.onPressImage}>
<Image
ref={c => {
this.imageRef = c;
}}
source={{
uri:
'https://facebook.github.io/react-native/docs/assets/favicon.png'
}}
resizeMode="contain"
style={styles.imageStyle}
/>
</TouchableWithoutFeedback>
<SwipeCloseImage
ref={c => (this.swipeToCloseRef = c)}
imageSource={this.state.imageSource}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
imageStyle: {
width: 250,
height: 200
}
});Props
| Prop | Default | Type | Description |
|---|---|---|---|
| imageSource | required | string,number |
Link of the source url (Can be local or remote link) |
| onOpen | required | function |
Function to open the image |
| resizeMode | Contain | string |
Resize mode for the image |
| backdropColor | rgba(0,0,0,0.75) | string |
Backdrop color |
| durationAnim | 250 | number |
Milisecond animation |
| distanceDismiss | SCREEN_HEIGHT / 5 | number |
Distance to auto dismiss close image |
Author
Sieu Thai – [email protected]