Untitled

import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    FlatList,
    Text,
    Platform,
    Alert,
    } from 'react-native';
import { Container,Header,Left,Right,Icon, Title, Body } from 'native-base';
import GlobalStyle from '../component/style/GlobalStyle';
import ScheduleListRow from '../component/ScheduleListRow';
import Button from '../component/common/Button';

    class ScheduleScreen extends Component{
        constructor(props) {
            super(props);
            this.state = {
                scheduleData : [
                    {
                        dateTrans : 'April 22, 2019',
                        scheduleContent : [
                            {
                                name : 'Andika',
                                description : 'Meeting 16:30',
                            },
                            {
                                name : 'BI Team',
                                description : 'Meeting 19:30',
                            },
                        ]
                    },
                ]

                // scheduleData : [
                //     {
                //         name : 'Andika',
                //         description : 'Meeting 16:30',
                //     },
                //     {
                //         name : 'BI Team',
                //         description : 'Meeting 19:30',
                //     },
                // ]
            };
        }

        _keyApprovalExtractor = (item, index) => item.scheduleContent.name;
        _renderItem = ({item, scheduleContent}) => (
            <ScheduleListRow
              xDateTrans={item.dateTrans}
              xName={item.scheduleContent.name}
              xDescription={item.scheduleContent.description}
              onPressItem={this._onPressItem}
            />
          );

          _onPressItem = (name) => {
            Alert.alert(name);
        };

        render(){
            return(
                <Container>
                    <Header style={{ backgroundColor: 'white' }}>
                    <Left style={{ flexDirection: 'row'}}>
                            <Icon onPress={() => this.props.navigation.openDrawer()} name="md-menu" style={{ color: 'black', marginRight: 15 }} />
                        </Left>
                        <Body>
                            <Title style={{color:'black'}}>Schedule</Title>
                        </Body>
                        <Right>
                            <Icon name="ios-arrow-down" style={{ color: 'black'}} />
                        </Right>
                    </Header>
                    <View style={styles.container}>
                     <FlatList
                            style={GlobalStyle.listContainer}
                            data={this.state.scheduleData}
                            renderItem={this._renderItem}
                            keyExtractor={this._keyApprovalExtractor}
                        />
                        <View style={styles.bottomContainer}>
                            <Button>NEW SCHEDULE</Button>
                        </View>
                 </View>
                </Container>
            );
        }
    }

    const styles = StyleSheet.create({
        container : {
            flex: 1,
            flexDirection : 'column',
            backgroundColor:'#FFFFFF',
        },
        dateText : {
            marginTop : Platform.OS === 'ios' ? 8 : 0,
            padding : 5,
            fontSize:14,
            color:'#000000'
        },
        bottomContainer : {
            justifyContent : "flex-end",
            alignItems : "center",
            marginBottom : 10
        }
    });


    export default ScheduleScreen;