https://github.com/sieuhuflit/react-native-swipe-close-image

A React native swipe to close image
https://github.com/sieuhuflit/react-native-swipe-close-image

close react-native swipe swipe-to-close

Last synced: 18 days ago
JSON representation

A React native swipe to close image

• Host: GitHub
• URL: https://github.com/sieuhuflit/react-native-swipe-close-image
• Owner: sieuhuflit
• Created: 2018-09-03T13:53:01.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-09-04T01:52:42.000Z (over 6 years ago)
• Last Synced: 2024-11-19T02:57:42.022Z (about 1 month ago)
• Topics: close, react-native, swipe, swipe-to-close
• Language: JavaScript
• Homepage:
• Size: 11.9 MB
• Stars: 18
• Watchers: 2
• Forks: 2
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React native swipe close image

> A swipe close full screen image for Android and iOS

![](https://github.com/sieuhuflit/react-native-swipe-close-image/blob/master/demo.gif)

## 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)

```js

import SwipeCloseImage from 'react-native-swipe-close-image';

...

render() {

...

 (this.swipeToCloseRef = c)}

  imageSource={this.state.imageSource}

/>

...

}

```

- Then when want to open the image

```js

...

this.swipeToCloseRef.onOpen(this.imageRef);

...

```

### Code

```js

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 (

      

        

           {

              this.imageRef = c;

            }}

            source={{

              uri:

                'https://facebook.github.io/react-native/docs/assets/favicon.png'

            }}

            resizeMode="contain"

            style={styles.imageStyle}

          />

        

         (this.swipeToCloseRef = c)}

          imageSource={this.state.imageSource}

        />

      

    );

  }

}

const styles = StyleSheet.create({

  container: {

    flex: 1,

    justifyContent: 'center',

    alignItems: 'center'

  },

  imageStyle: {

    width: 250,

    height: 200

  }

});

```

[Example](./example/index.js)

## 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]

[https://github.com/sieuhuflit](https://github.com/sieuhuflit/)