Last active
October 23, 2018 20:42
-
-
Save BrianJVarley/8f6a8ea5ab0fa2ca699f9546165808f2 to your computer and use it in GitHub Desktop.
Example of NativeBase DeckSwiperComponent cut off of text in CardItem
This file contains hidden or 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, 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; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment