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;


===================================================

import React, { Component } from 'react';
import { View, Text, StyleSheet, Image, TouchableOpacity } from 'react-native';
import Card from './common/Card';
import CardSection from './common/CardSection';


class ScheduleListRow extends Component{
    _onPress = () => {
        this.props.onPressItem(this.props.xName);
      };

      _dateTrans = () => {
            if(this.props.xDateTrans !== null){
                return(
                    <Text style={styles.titleText}>{this.props.xDateTrans}</Text>
                );
            }
      };

    render(){
        return(
            <TouchableOpacity onPress={this._onPress}
            style={styles.container}>
               <Text style={styles.titleText}>{this.props.xDateTrans}</Text>
                <Card>
                <CardSection>
                    <View style={styles.subContainer}>
                        <Image  style={styles.photo}
                                    source={require('../images/ic_main_user.png')}/>
                        <View style={styles.subContainer2}>
                            <Text style={styles.titleText}>{this.props.xName}</Text>
                            <Text style={styles.text}>{this.props.xDescription}</Text>
                        </View>
                    </View>
                </CardSection>
            </Card>
        </TouchableOpacity>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flexDirection: 'column',
        flex : 1
    },
    subContainer : {
        flex : 1,
        flexDirection : 'row',
    },
    subContainer2 : {
        flex : 1,
        flexDirection : 'column',
        justifyContent : 'flex-start',
        alignItems: 'flex-start',
        marginBottom: 5,
    },
    titleText: {
        marginLeft: 20,
        marginTop: 2,
        fontSize:18,
        fontWeight : 'bold',
        color:'#000000',
      },
    text: {
      marginLeft: 20,
      marginTop: 2,
      fontSize:15,
      marginBottom : 5,
      color:'#000000',
    },
    photo: {
        marginLeft : 5,
        marginTop : 8,
        width:40,
        height: 40,
    },
  });

export default ScheduleListRow;