BrianJVarley/DeckSwiperComponent.js

## DeckSwiperComponent.js
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/diagram-2@2x.png')
  },
  {
    title: 'Card Two',
    details: 'Two',
    image: require('../images/diagram-3@2x.png')
  }
];
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>
            }
          />
    );
  }
}
	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/diagram-2@2x.png')
	},
	{
	title: 'Card Two',
	details: 'Two',
	image: require('../images/diagram-3@2x.png')
	}
	];
	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>
	}
	/>
	);
	}
	}