SHARE
TWEET

MyTodosMainAppScreen

a guest Oct 23rd, 2019 104 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, {Component} from 'react';
  2. import {View, Text, Image, FlatList, ImageBackground, TouchableOpacity, StyleSheet} from 'react-native';
  3. import ImageSrc from '../../assets/images/bg-auth.jpg';
  4. import UserIcon from '../../assets/icon/user.png';
  5. import TodosIcon from '../../assets/icon/todos.jpg';
  6. import AddIcon from '../../assets/icon/add.png';
  7. import MenuIcon from '../../assets/icon/menu.png';
  8.  
  9. export default class Home extends Component{
  10.  render(){
  11.   return(
  12.    <View style={{position: 'relative'}}>
  13.     <ImageBackground
  14.     source={ImageSrc}
  15.     style={[styles.background, {height: 250}]}>
  16.         <View style={styles.mainContainer}>
  17.             <TouchableOpacity
  18.             style={{position: 'absolute', top: 15, left: 20}}
  19.             onPress={() => {
  20.                 this.props.navigation.toggleDrawer()
  21.             }}>
  22.                 <Image
  23.                     source={MenuIcon}
  24.                     style={{width: 18, height: 18}}/>
  25.             </TouchableOpacity>
  26.             <Text style={styles.greetingText}>Good Morning!</Text>
  27.             <Image
  28.                 source={UserIcon}
  29.                 style={{width: 80, height: 80}}
  30.             />
  31.         </View>
  32.     </ImageBackground>
  33.  
  34.     <View style={styles.contentContainer}>
  35.         <View style={{flexDirection: 'column'}}>
  36.             <View style={{flexDirection: 'row', marginBottom: 20}}>
  37.                 <Image
  38.                     source={TodosIcon}
  39.                     style={{width: 40, height: 40, marginRight: 10, borderRadius: 50}}/>
  40.                 <View style={{flexDirection: 'column'}}>
  41.                     <Text style={{marginBottom: 3}}>Adding new subpage for Janet</Text>
  42.                     <Text style={{color: '#bebebe'}}>8 - 10 am</Text>
  43.                 </View>
  44.             </View>
  45.  
  46.             <View style={{flexDirection: 'row', marginBottom: 20}}>
  47.                 <Image
  48.                     source={TodosIcon}
  49.                     style={{width: 40, height: 40, marginRight: 10, borderRadius: 50}}/>
  50.                 <View style={{flexDirection: 'column'}}>
  51.                     <Text style={{marginBottom: 3}}>Catch up with Tom</Text>
  52.                     <Text style={{color: '#bebebe'}}>11 - 14 pm</Text>
  53.                 </View>
  54.             </View>
  55.  
  56.             <View style={{flexDirection: 'row', marginBottom: 20}}>
  57.                 <Image
  58.                     source={TodosIcon}
  59.                     style={{width: 40, height: 40, marginRight: 10, borderRadius: 50}}/>
  60.                 <View style={{flexDirection: 'column'}}>
  61.                     <Text style={{marginBottom: 3}}>Lunch with Diane</Text>
  62.                     <Text style={{color: '#bebebe'}}>15 - 20 pm</Text>
  63.                 </View>
  64.             </View>
  65.         </View>
  66.     </View>
  67.     <TouchableOpacity style={styles.addBtn}>
  68.         <Image
  69.         source={AddIcon}
  70.         style={{width: 20, height: 20}}/>
  71.     </TouchableOpacity>
  72.    </View>
  73.   );
  74.  }
  75. }
  76.  
  77. const styles = StyleSheet.create({
  78.     background: {
  79.         resizeMode: 'cover',
  80.         alignItems: 'center',
  81.         position: 'relative',
  82.         backgroundColor: 'rgb(0,0,0)'
  83.     },
  84.     mainContainer: {
  85.         height: '100%',
  86.         width: '100%',
  87.         flexDirection: 'column',
  88.         paddingTop: 60,
  89.         paddingHorizontal: 30,
  90.         backgroundColor:'rgba(0,0,0,0.3)',
  91.         alignItems: 'center',
  92.         position: 'relative'
  93.     },
  94.     greetingText: {
  95.         fontSize: 26,
  96.         color: '#FFFFFF',
  97.         marginBottom: 20
  98.     },
  99.     contentContainer: {
  100.         flexDirection: 'column',
  101.         paddingTop: 20,
  102.         paddingHorizontal: 20,
  103.     },
  104.     addBtn: {
  105.         backgroundColor: '#F73668',
  106.         borderRadius: 50,
  107.         paddingHorizontal: 17,
  108.         paddingVertical: 17,
  109.         position: 'absolute',
  110.         bottom: -40,
  111.         right: 18
  112.     }
  113. });
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top