├── 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 | 
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 |
61 | 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 |
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 |
20 | {images &&
21 | images.map((item, index) => {
22 | return (typeof item.url === 'string' && typeof item.name === 'string' ?
23 | handleClick(e, item)}>
24 |
28 |
29 | 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 |
37 |
38 |
39 | :
40 | null
41 | )
42 | })
43 | }
44 |
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 ",
19 | "license": "MIT",
20 | "homepage": "https://github.com/Talha-Jawed/react-native-swipe-image"
21 | }
--------------------------------------------------------------------------------