sieuhuflit / react-native-swipe-close-image

A React native swipe to close image

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
  }
});

Example

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 – [e-mail]

https://github.com/sieuhuflit