Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- 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
- }
- });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement