├── 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 | 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 | } --------------------------------------------------------------------------------