MyTodosMainAppScreen

import React, {Component} from 'react';
import {View, Text, Image, FlatList, ImageBackground, TouchableOpacity, StyleSheet} from 'react-native';
import ImageSrc from '../../assets/images/bg-auth.jpg';
import UserIcon from '../../assets/icon/user.png';
import TodosIcon from '../../assets/icon/todos.jpg';
import AddIcon from '../../assets/icon/add.png';
import MenuIcon from '../../assets/icon/menu.png';

export default class Home extends Component{
 render(){
  return(
   <View style={{position: 'relative'}}>
    <ImageBackground
    source={ImageSrc}
    style={[styles.background, {height: 250}]}>
        <View style={styles.mainContainer}>
            <TouchableOpacity
            style={{position: 'absolute', top: 15, left: 20}}
            onPress={() => {
                this.props.navigation.toggleDrawer()
            }}>
                <Image
                    source={MenuIcon}
                    style={{width: 18, height: 18}}/>
            </TouchableOpacity>
            <Text style={styles.greetingText}>Good Morning!</Text>
            <Image
                source={UserIcon}
                style={{width: 80, height: 80}}
            />
        </View>
    </ImageBackground>

    <View style={styles.contentContainer}>
        <View style={{flexDirection: 'column'}}>
            <View style={{flexDirection: 'row', marginBottom: 20}}>
                <Image
                    source={TodosIcon}
                    style={{width: 40, height: 40, marginRight: 10, borderRadius: 50}}/>
                <View style={{flexDirection: 'column'}}>
                    <Text style={{marginBottom: 3}}>Adding new subpage for Janet</Text>
                    <Text style={{color: '#bebebe'}}>8 - 10 am</Text>
                </View>
            </View>

            <View style={{flexDirection: 'row', marginBottom: 20}}>
                <Image
                    source={TodosIcon}
                    style={{width: 40, height: 40, marginRight: 10, borderRadius: 50}}/>
                <View style={{flexDirection: 'column'}}>
                    <Text style={{marginBottom: 3}}>Catch up with Tom</Text>
                    <Text style={{color: '#bebebe'}}>11 - 14 pm</Text>
                </View>
            </View>

            <View style={{flexDirection: 'row', marginBottom: 20}}>
                <Image
                    source={TodosIcon}
                    style={{width: 40, height: 40, marginRight: 10, borderRadius: 50}}/>
                <View style={{flexDirection: 'column'}}>
                    <Text style={{marginBottom: 3}}>Lunch with Diane</Text>
                    <Text style={{color: '#bebebe'}}>15 - 20 pm</Text>
                </View>
            </View>
        </View>
    </View>
    <TouchableOpacity style={styles.addBtn}>
        <Image
        source={AddIcon}
        style={{width: 20, height: 20}}/>
    </TouchableOpacity>
   </View>
  );
 }
}

const styles = StyleSheet.create({
    background: {
        resizeMode: 'cover',
        alignItems: 'center',
        position: 'relative',
        backgroundColor: 'rgb(0,0,0)'
    },
    mainContainer: {
        height: '100%',
        width: '100%',
        flexDirection: 'column',
        paddingTop: 60,
        paddingHorizontal: 30,
        backgroundColor:'rgba(0,0,0,0.3)',
        alignItems: 'center',
        position: 'relative'
    },
    greetingText: {
        fontSize: 26,
        color: '#FFFFFF',
        marginBottom: 20
    },
    contentContainer: {
        flexDirection: 'column',
        paddingTop: 20,
        paddingHorizontal: 20,
    },
    addBtn: {
        backgroundColor: '#F73668',
        borderRadius: 50,
        paddingHorizontal: 17,
        paddingVertical: 17,
        position: 'absolute',
        bottom: -40,
        right: 18
    }
});