BrianJVarley/DeckSwiperComponent.js

## DeckSwiperComponent.js
import React, {Component, PropTypes} from 'react';
import {Image, Animated, StyleSheet,ScrollView} from 'react-native';
import {
  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'
  },
  {
    title: 'Card Two',
    details: 'Two'
  }
];
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);
    }
  };

  render() {
    return (

      <Animated.View style={styles.viewContainer}>
        <DeckSwiper
          dataSource={this.props.cards ? this.props.cards : defaultCards}
          renderItem={item => (
            <Card style={StyleSheet.flatten(styles.cardStyle)}>
              <CardItem>
                <Left>
                  <Thumbnail source={item.image} />
                  <Body>
                    <Text>{item.title}</Text>
                  </Body>
                </Left>
                <Right>
                  <Button
                    medium
                    warning
                    accessible={true}
                    accessibilityLabel={'Minimize diagram'}
                    onPress={this.toggleVisibility}
                  >
                    <Icon
                      name='close'
                      style={StyleSheet.flatten(styles.iconColorPrimary)}
                    />
                    <Text style={StyleSheet.flatten(styles.iconColorPrimary)}>
                      {AppStrings.closeBtnText}
                    </Text>
                  </Button>
                </Right>
              </CardItem>
              <CardItem cardBody>
                <Image
                  style={StyleSheet.flatten(styles.imageStyle)}
                  source={item.image}
                />
              </CardItem>
                <CardItem style={StyleSheet.flatten(styles.cardDetails)}>
                  <Icon name='md-paper' style={StyleSheet.flatten(styles.iconColorSecondary)} />
                  <Text>{item.details}</Text>
                </CardItem>
            </Card>
          )}
        />
      </Animated.View>

    );
  }
}
const styles = StyleSheet.create({
  viewContainer: {
    flex: 1,
    margin: 4
  },
  cardStyle: {
    elevation: 3
  },
  iconColorPrimary: {
    color: SOP_WHITE
  },
  iconColorSecondary: {
    color: SOP_ORANGE
  },
  imageStyle: {
    height: 240,
    flex: 1
  },
  cardDetails: {
    flex: 1,
    flexWrap: 'wrap',
    alignItems: 'flex-start',
    flexDirection: 'row',
    marginBottom: 5
  }
});
export default DeckSwiperComponent;
	import React, {Component, PropTypes} from 'react';
	import {Image, Animated, StyleSheet,ScrollView} from 'react-native';
	import {
	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'
	},
	{
	title: 'Card Two',
	details: 'Two'
	}
	];
	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);
	}
	};

	render() {
	return (

	<Animated.View style={styles.viewContainer}>
	<DeckSwiper
	dataSource={this.props.cards ? this.props.cards : defaultCards}
	renderItem={item => (
	<Card style={StyleSheet.flatten(styles.cardStyle)}>
	<CardItem>
	<Left>
	<Thumbnail source={item.image} />
	<Body>
	<Text>{item.title}</Text>
	</Body>
	</Left>
	<Right>
	<Button
	medium
	warning
	accessible={true}
	accessibilityLabel={'Minimize diagram'}
	onPress={this.toggleVisibility}
	>
	<Icon
	name='close'
	style={StyleSheet.flatten(styles.iconColorPrimary)}
	/>
	<Text style={StyleSheet.flatten(styles.iconColorPrimary)}>
	{AppStrings.closeBtnText}
	</Text>
	</Button>
	</Right>
	</CardItem>
	<CardItem cardBody>
	<Image
	style={StyleSheet.flatten(styles.imageStyle)}
	source={item.image}
	/>
	</CardItem>
	<CardItem style={StyleSheet.flatten(styles.cardDetails)}>
	<Icon name='md-paper' style={StyleSheet.flatten(styles.iconColorSecondary)} />
	<Text>{item.details}</Text>
	</CardItem>
	</Card>
	)}
	/>
	</Animated.View>

	);
	}
	}
	const styles = StyleSheet.create({
	viewContainer: {
	flex: 1,
	margin: 4
	},
	cardStyle: {
	elevation: 3
	},
	iconColorPrimary: {
	color: SOP_WHITE
	},
	iconColorSecondary: {
	color: SOP_ORANGE
	},
	imageStyle: {
	height: 240,
	flex: 1
	},
	cardDetails: {
	flex: 1,
	flexWrap: 'wrap',
	alignItems: 'flex-start',
	flexDirection: 'row',
	marginBottom: 5
	}
	});
	export default DeckSwiperComponent;