Last active
September 13, 2018 21:10
-
-
Save BrianJVarley/6066e4a29d234c2de40e14bf7d69f601 to your computer and use it in GitHub Desktop.
Image swiper component based off native base deck swiper
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React,{Component, PropTypes} from 'react'; | |
| import {Image} from 'react-native'; | |
| import {Container, View, DeckSwiper, Card, CardItem, | |
| Thumbnail, Text, Left, Right, Body, Icon, Button} from 'native-base'; | |
| import {SOP_ORANGE, SOP_WHITE} from './../styles/commonStyles'; | |
| import AppStrings from './../localization/appStrings'; | |
| const defaultCards = [ | |
| { | |
| title: 'Card One', | |
| details: 'One', | |
| image: require('../images/[email protected]') | |
| }, | |
| { | |
| title: 'Card Two', | |
| details: 'Two', | |
| image: require('../images/[email protected]') | |
| } | |
| ]; | |
| export default class DeckSwiperComponent extends Component { | |
| static propTypes = { | |
| onPress: PropTypes.func.isRequired, | |
| manualSwipe: PropTypes.bool, | |
| cards: PropTypes.arrayOf(PropTypes.shape({ | |
| title: PropTypes.string, | |
| details: PropTypes.string | |
| })).isRequired | |
| } | |
| toggleVisibility = (e) => { | |
| if (typeof this.props.onPress === 'function') { | |
| this.props.onPress(e); | |
| } | |
| } | |
| onSwipeLeft() { | |
| this._deckSwiper._root.swipeLeft(); | |
| } | |
| onSwipeRight() { | |
| this._deckSwiper._root.swipeRight(); | |
| } | |
| render() { | |
| return ( | |
| <DeckSwiper | |
| dataSource={this.props.cards ? this.props.cards : defaultCards} | |
| renderItem={item => | |
| <Card style={{elevation: 3}}> | |
| <CardItem> | |
| <Left> | |
| <Thumbnail source={item.image} /> | |
| <Body> | |
| <Text>{item.title}</Text> | |
| </Body> | |
| </Left> | |
| <Right> | |
| <Button small warning | |
| accessible={true} | |
| accessibilityLabel={'Minimize diagram'} | |
| onPress={this.toggleVisibility}> | |
| <Icon name='close' style={{color: SOP_WHITE}}/> | |
| <Text style={{color: SOP_WHITE}}> | |
| {AppStrings.closeBtnText} | |
| </Text> | |
| </Button> | |
| </Right> | |
| </CardItem> | |
| <CardItem cardBody> | |
| <Image style={{height: 250, flex: 1}} source={item.image} /> | |
| </CardItem> | |
| <CardItem style={{flex: 1, flexDirection: 'row'}}> | |
| <Icon name='md-paper' style={{color: SOP_ORANGE}} /> | |
| <Text>{item.details}</Text> | |
| </CardItem> | |
| <CardItem style={{flex: 1, flexDirection: 'row', paddingTop: 0, justifyContent: 'space-between', padding: 15}}> | |
| <Button iconLeft onPress={this.onSwipeLeft}> | |
| <Icon name='arrow-back' /> | |
| <Text>{AppStrings.swipeLeft}</Text> | |
| </Button> | |
| <Button iconRight onPress={this.onSwipeRight}> | |
| <Text>{AppStrings.swipeRight}</Text> | |
| <Icon name='arrow-forward' /> | |
| </Button> | |
| </CardItem> | |
| </Card> | |
| } | |
| /> | |
| ); | |
| } | |
| } | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment