text: import React from 'react';
  import {
    StyleSheet, ScrollView, Platform,
  } from 'react-native';
  
  // galio components
  import {
    Button, Block, Icon, Text, NavBar,
  } from 'galio-framework';
  import theme from '../theme';
  
  const BASE_SIZE = theme.SIZES.BASE;
  
  
  class Citas extends React.Component {
    renderHeader = () => (
      <NavBar
        title="Citas"
        onLeftPress={() => this.props.navigation.openDrawer()}
        leftIconColor={theme.COLORS.MUTED}
        right={(
          <Button
            color="transparent"
            style={styles.settings}
            onPress={() => this.props.navigation.openDrawer()}
          >
            <Icon size={BASE_SIZE*1.5} name="plus" family="font-awesome" color={theme.COLORS.ERROR} />
          </Button>
        )}
        style={Platform.OS === 'android' ? { marginTop: theme.SIZES.BASE } : null}
      />
    )
  
    
  
    render() {
      return (
        <Block safe flex>
          {/* header */}
          {this.renderHeader()}
  
          {/* cards */}
          <ScrollView style={{ flex: 1 }}>
            <Text>Telemedicina</Text>
          </ScrollView>
        </Block>
      );
    }
  }
  
  const styles = StyleSheet.create({
    menu: {
      width: BASE_SIZE * 2,
      borderColor: 'transparent',
    },
    settings: {
      width: BASE_SIZE * 2,
      borderColor: 'transparent',
    },
  });
  
  export default Citas;
  