Package Exports

react-native-swipe-close-image

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-swipe-close-image) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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 – sieuhuflit@example.com

https://github.com/sieuhuflit