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]
