├── LICENSE
├── ReadMe.md
├── component
    └── Swiper.js
├── index.js
└── package.json


/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019 Talha Javed
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/ReadMe.md:
--------------------------------------------------------------------------------
 1 | # React Native Swipe Image
 2 | 
 3 | A React Native library to swipe image on top, bottom, left, right like your favorite platforms!
 4 | 
 5 | ## Installation
 6 | 
 7 | ```bash
 8 | npm install react-native-swipe-image
 9 | ```
10 | OR
11 | 
12 | ```bash
13 | yarn add react-native-swipe-image
14 | ```
15 | 
16 | ![](https://media.giphy.com/media/JTIYENN2XFepCE0g9n/giphy.gif)
17 | 
18 | 
19 | ## Props
20 | 
21 | 
22 | | Props | Type | Default |
23 | | --- | --- | --- |
24 | | image | Array of object | required |
25 | | swipeBottom | function() | required |
26 | | swipeTop | function() | required |
27 | | imageHeight | Number | required |
28 | | textSize | Number | max 40 |
29 | | textBold | boolean | false |
30 | | textUnderline | boolean | false |
31 | | textColor | String | - |
32 | 
33 | 
34 | ## Usage
35 | 
36 | ```javaScript
37 | import React from 'react';
38 | import { View } from 'react-native';
39 | import Swiper from 'react-native-swipe-image';
40 | 
41 | export default class App extends React.Component {
42 |      state = {
43 |       images : [
44 |         { url: "https://images.pexels.com/photos/1382734/pexels-photo-1382734.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500", name:"shakira" },
45 |         { url: 'https://images.pexels.com/photos/9413/animal-cute-kitten-cat.jpg?cs=srgb&dl=adorable-animal-cat-9413.jpg&fm=jpg', name: "cat" },
46 |         { url: 'https://i.pinimg.com/236x/c6/6b/11/c66b111bf4df809e87a1208f75d2788b.jpg', name: "baby" }
47 |       ]
48 |    }
49 | 
50 |   bottom(e) {
51 |     alert('Swipe Bottom')
52 |   }
53 | 
54 |   top(e) {
55 |     alert('Swipe Top')
56 |   }
57 | 
58 |   render() {
59 |     return (
60 |       <View style={{ flex: 1 }}>
61 |         <Swiper
62 |           images={this.state.images}
63 |           swipeBottom={(e) => this.bottom(e)}
64 |           swipeTop={(e) => this.top(e)}
65 |           imageHeight={number}
66 |           textSize={number}
67 |           textBold={boolean}
68 |           textColor={String}
69 |           textUnderline={boolean}
70 |         />
71 |       </View>
72 |     );
73 |   }
74 | }
75 | ```
76 | ## License
77 | MIT © [Talha](https://github.com/Talha-Jawed) |
78 | [License](https://choosealicense.com/licenses/mit/) 
79 | 


--------------------------------------------------------------------------------
/component/Swiper.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { StyleSheet, View, Image, ScrollView, Dimensions, Text, StatusBar, Platform } from 'react-native';
 3 | const screenWidth = Math.round(Dimensions.get('window').width);
 4 | const screenHeight = Math.round(Dimensions.get('window').height);
 5 | 
 6 | function Swiper(props) {
 7 |     const handleClick = (e, item) => {
 8 |         const { swipeBottom, swipeTop } = props
 9 |         if (e.nativeEvent.contentOffset.y < 0) {
10 |             swipeBottom(item)
11 |         } else {
12 |             swipeTop(item)
13 |         }
14 |     }
15 |     const { images, textSize, textColor, textBold, textUnderline, imageHeight } = props
16 |     const height = imageHeight && imageHeight > (screenHeight - Platform.OS === 'ios' ? 0
17 |         : StatusBar.currentHeight) ? (screenHeight - Platform.OS === 'ios' ? 0 : StatusBar.currentHeight) : imageHeight;
18 |     return (
19 |         <ScrollView horizontal={true} pagingEnabled={true} >
20 |             {images &&
21 |                 images.map((item, index) => {
22 |                     return (typeof item.url === 'string' && typeof item.name === 'string' ?
23 |                         <ScrollView key={index} onScrollEndDrag={(e) => handleClick(e, item)}>
24 |                             <Image
25 |                                 style={{ height: height, width: screenWidth }}
26 |                                 source={{ uri: item.url }}
27 |                             />
28 |                             <View style={styles.imageText}>
29 |                                 <Text style={[
30 |                                     typeof textSize === 'number' && textSize > 0 && textSize <= 40 ? { fontSize: textSize } : { fontSize: 30 },
31 |                                     typeof textBold === 'boolean' && textBold && { fontWeight: 'bold' },
32 |                                     typeof textColor === 'string' && { color: textColor },
33 |                                     typeof textUnderline === 'boolean' && textUnderline && { textDecorationLine: 'underline' }
34 |                                 ]}>
35 |                                     {item.name && item.name}
36 |                                 </Text>
37 |                             </View>
38 |                         </ScrollView>
39 |                         :
40 |                         null
41 |                     )
42 |                 })
43 |             }
44 |         </ScrollView>
45 |     );
46 | }
47 | 
48 | export default Swiper;
49 | 
50 | const styles = StyleSheet.create({
51 |     imageText: {
52 |         position: 'absolute',
53 |         bottom: 14,
54 |         alignItems: 'center',
55 |         justifyContent: 'center',
56 |         width: '100%'
57 |     },
58 | });
59 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | import ImageSwiper from './component/Swiper';
2 | export default ImageSwiper;


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-native-swipe-image",
 3 |   "version": "1.1.0",
 4 |   "description": "A react native image swipe component",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "git repository": "https://github.com/Talha-Jawed/react-native-swipe-image",
10 |   "keywords": [
11 |     "react-native-swipe-image",
12 |     "react-native-swiper",
13 |     "image-swiper",
14 |     "swipe-image",
15 |     "yarn add react-native-swipe-image",
16 |     "npm install react-native-swipe-image"
17 |   ],
18 |   "author": "Talha Javed <jawedtalha0@gmail.com>",
19 |   "license": "MIT",
20 |   "homepage": "https://github.com/Talha-Jawed/react-native-swipe-image"
21 | }


--------------------------------------------------------------------------------