// Component const EmptyMessage = (props) => ( <View style={styles.container}> <Icon name={props.icon} size={35} color={grey1} /> <Text style={styles.text}>{ props.message }</Text> </View> )
render() { const { leftIcon, title, rightIcon } = this.props return ( <View style={styles.container}> <View style={styles.leftContainer}> {/* Left Icon */} { leftIcon } {/* Title */} { title ? <Text style={styles.title}>{ title.toUpperCase() }</Text> : null } </View> {/* Right Icon */} <View style={styles.rightContainer}> { rightIcon } </View> </View> ) }
render() { const { details } = this.props.user const { name, email } = details return ( <View style={styles.container}> <Text style={styles.name}>{name}</Text> <Text style={styles.email}>{email}</Text> <View style={{ flexDirection: 'row' }}> <View> <Button title={'Clear Data Cache'} iconLeft={'cached'} theme={'default'} onPress={this.clearDataCache} /> </View> <View> <Button title={'Logout'} iconRight={'exit-to-app'} theme={'primary'} onPress={this.onLogout} /> </View> </View> </View> ) }
// Component const TabBar = (props) => { const { items, active, onSelect } = props return( <View style={styles.container}> { items.map(item => ( <Touchable onPress={ () => { onSelect(item.key) } } key={item.key} > <View style={[{ flex: 1 }, (active === item.key ? { borderBottomColor: secondary, borderBottomWidth: 2 } : {})]}> <Text style={ styles.tabItemTitle }>{ item.title.toUpperCase() }</Text> </View> </Touchable> )) } </View> ) }
// Component const Toast = (props) => ( <Touchable onPress={props.onPress}> <View style={styles.container}> <Text style={styles.text}>{ props.message }</Text> </View> </Touchable> )
// Component const Intro = (props) => ( <View style={styles.container}> <Image source={heroImage} resizeMode={'cover'} style={styles.hero} /> <View style={styles.content}> <Text style={styles.text}>Your monthly subscription of trendy clothes and accessories</Text> <Button iconLeft={'add'} title={'Get Subscription'} theme={'secondary'} onPress={props.getSubscription} /> </View> </View> )
export default function Loading () { return ( <View style={styles.container}> <View> <MKSpinner strokeWidth={5} style={styles.spinner} /> <Text style={{ fontSize: 20, marginTop: 30 }}>Connecting...</Text> </View> </View> ); }
// Component const Loading = (props) => ( <View style={styles.container}> <ActivityIndicator size={props.size} color={secondary} /> <Text style={styles.text}>{ props.message }</Text> </View> )
// Component const EmptyMessage = (props) => ( <View style={styles.container}> <Icon name={props.icon} size={35} color={grey1} /> <Text style={styles.text}>{ props.message }</Text> </View> )
// Component const Loading = (props) => ( <View style={styles.container}> <ActivityIndicator size={props.size} color={secondary} /> <Text style={styles.text}>{ props.message }</Text> </View> )
// Component const Toast = (props) => ( <Touchable onPress={props.onPress}> <View style={styles.container}> <Text style={styles.text}>{ props.message }</Text> </View> </Touchable> )
render() { const { leftIcon, title, rightIcon } = this.props return ( <View style={styles.container}> <View style={styles.leftContainer}> {/* Left Icon */} { leftIcon } {/* Title */} { title ? <Text style={styles.title}>{ title.toUpperCase() }</Text> : null } </View> {/* Right Icon */} <View style={styles.rightContainer}> { rightIcon } </View> </View> ) }
render() { const { details } = this.props.user const { name, email } = details return ( <View style={styles.container}> <Text style={styles.name}>{name}</Text> <Text style={styles.email}>{email}</Text> <View style={{ flexDirection: 'row' }}> <View> <Button title={'Clear Data Cache'} iconLeft={'cached'} theme={'default'} onPress={this.clearDataCache} /> </View> <View> <Button title={'Logout'} iconRight={'exit-to-app'} theme={'primary'} onPress={this.onLogout} /> </View> </View> </View> ) }
// Component const TabBar = (props) => { const { items, active, onSelect } = props return( <View style={styles.container}> { items.map(item => ( <Touchable onPress={ () => { onSelect(item.key) } } key={item.key} > <View style={[{ flex: 1 }, (active === item.key ? { borderBottomColor: secondary, borderBottomWidth: 2 } : {})]}> <Text style={ styles.tabItemTitle }>{ item.title.toUpperCase() }</Text> </View> </Touchable> )) } </View> ) }
// Component const Intro = (props) => ( <View style={styles.container}> <Image source={heroImage} resizeMode={'cover'} style={styles.hero} /> <View style={styles.content}> <Text style={styles.text}>Your monthly subscription of trendy clothes and accessories</Text> <Button iconLeft={'add'} title={'Get Subscription'} theme={'secondary'} onPress={props.getSubscription} /> </View> </View> )