Bahria University

Lahore Campus

MOBILE APPLICATION DEVELOPMENT

LAB TASK

DUE DATE: 8-6-2020

Instructor Name: Hafiz Abdul Wahab Javid

Program: BS (CS)-6(A)

Submission Requirements:
1. Working Demo will be shown along with viva voce in the respective lab.
2. No Late submissions will be accepted.

Question No.1
Write a “Expense Manager App” in React Native.

Output: -
(Database)
Code: -

Firebase Connection
import * as firebase from 'firebase'

// Your web app's Firebase configuration
var firebaseConfig = {
    apiKey: "AIzaSyDcCCphagktM2xQutv3sftrDaFSPP3hfQs",
    authDomain: "sundasdatabasereact.firebaseapp.com",
    databaseURL: "https://sndatabasereact.firebaseio.com",
    projectId: "sundasdatabasereact",
    storageBucket: "sundasdatabasereact.appspot.com",
    messagingSenderId: "438560763749",
    appId: "1:438560763749:web:af4056195185e442d53b8c",
    measurementId: "G-MTB5FW2P81"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);

  export default firebase;

Main Drawer screens

import React, { useState, useEffect } from 'react'
import { Picker, Button, TouchableHighlight, Modal, Text, Image, View, ImageBack
ground, TouchableOpacity,StyleSheet,Dimensions,ScrollView,} from 'react-native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer, useIsFocused } from '@react-navigation/native';
import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-
native-responsive-screen';
import {Appbar, TextInput} from 'react-native-paper';
import firebase from '../expense/database';
import Loads from '../expense/load';
import {FlatList} from 'react-native-gesture-handler';
function Expensefun(navigation){
  const [Num1,res1_num1]= useState();
  const [Num2,res2_num2]= useState();
  const [Num3,res3_num3]= useState();
  const [Num4,res4_num4]= useState();
  const [Slist,setlist]= useState([]);
  const [del,delval]=useState('')
  const [selectedValue, setSelectedValue] = useState("Others");
  const db=firebase.database().ref('sundas/')
  function addval()
  {
    db.push({
      expense:Num1,
      day:Num2,
      category:Num3,
      type:Num4,
      
    })
    
    res1_num1('')
    res2_num2('')
  }

  useEffect(() => {
    return db.on('value',(snapshot)=>{
     const list=[]  ;
     snapshot.forEach(doc => {
       console.log("doc",doc.val())
       list.push({
         doc
       });
     console.log("list",list) 
   });
     setlist(list)
    });    
},[]);

  return(
   
    <>
     <View  style={{flex:1,}} >
    <Appbar  style={{backgroundColor:'gray',borderColor:'black',borderWidth:5,}}
>
      <Appbar.Content title={"Expense Manager" }/>
    </Appbar>
    
  <View style={{  marginTop:hp('5%'),}}>

    <TextInput style={styles.inp}  label={"Expense"}  onChangeText={ res1_num1} 
Value={Num1}  />
    <TextInput style={styles.inp}   label={"Day"}  onChangeText={ res2_num2} Val
ue={Num2}  />
    <TextInput style={styles.inp}  label={"Category"}  onChangeText={ res3_num3} 
Value={Num3}  />
    <TextInput style={styles.inp}   label={"Cash/Credit"}  onChangeText={ res4_n
um4} Value={Num4}  />
    </View>
  
   <View style={{flexDirection:'row',marginTop:hp('5%'),}}>
    <TouchableOpacity   style={styles.clr_txt}  
        onPress={()=>{addval()}} >
       <Text style={styles.txt} >Add Record</Text>
    </TouchableOpacity>
    <TouchableOpacity   style={styles.clr_txt}  
        onPress={()=>{deleteData(del)}} >
       <Text style={styles.txt} >Delete Record</Text>
    </TouchableOpacity>
    </View>
    <View>
    </View>
    </View>
    </>

  );
}

// Delete 
function deleteData(key){
  
  firebase.database().ref(`data/${key}`).remove() ; 
}

function Welcome(navigation){
  return(

<View style={{flex:1,alignItems:'center',justifyContent:'center',backgroundColor
:'gray'}}>
<View style={{ marginTop:hp('10%'), }}>
</View>

    <Text style={styles.txt1}>You can record your daily used  </Text>
    <Text style={styles.txt1}>expense</Text>
    
   <ImageBackground
   style={{ flex: 1,
    marginTop:wp('10%'),
    width:'100%',
    height:'70%',
    resizeMode: "cover",
    justifyContent: "center",}}
     source={require('./assets/chart.png')}
   >
     
      
   
    </ImageBackground>
    </View>

  );
}

function Debt(navigation){
  return(
    <View>
      <Text>
        hellooo
      </Text>
    </View>
  );
}

const Drawer = createDrawerNavigator();

export default function App() {
  return (

    <NavigationContainer  >
      <View style={{flex:1,}}>
      <Drawer.Navigator initialRouteName="Welcome" drawerContentOptions={{backgr
oundColor:'gray',activeBackgroundColor:'white',labelStyle:
{color:'black',fontWeight:'bold',}}} >
      <Drawer.Screen name="Welcome" component={Welcome} />
      <Drawer.Screen name="ADD EXPENSE" component={Expensefun} options={{}}  />
       
        
   
   
      </Drawer.Navigator>
      </View>
    
    </NavigationContainer>

  );
}

const styles=StyleSheet.create(
  {
    centegrayView: {
      flex: 1,
      justifyContent: "center",
      alignItems: "center",
      marginTop: 22
    },
    modalView: {
      margin: 20,
      backgroundColor: "brown",
      borderRadius: 20,
      padding:wp('10'),
      alignItems: "center",
      shadowColor: "#000",
      shadowOffset: {
        width: 0,
        height: 2
      },
      shadowOpacity: 0.25,
      shadowRadius: 3.84,
      elevation: 5
    },
    openButton: {
      backgroundColor: "brown",
      borderRadius: 20,
      padding: 10,
      elevation: 2
    },
    textStyle: {
      color: "white",
      fontWeight: "bold",
      textAlign: "center"
    },
    modalText: {
      marginBottom: 15,
      textAlign: "center"
    },
    clr_txt:{
      backgroundColor:'gray',
      width: wp('50%'),
      height: hp('10%'),
      alignItems:'center',
      justifyContent:'center',
      borderWidth:3,
    },
    txt:{
      color:'white',
      fontSize:hp('2%'),
      fontWeight:'bold',
      fontStyle:'italic',
    },
    inp:{
      borderWidth:3, 
      borderRadius:wp('2%'),
    }, 
    txt1:{
      color:'white',
      fontSize:hp('3%'),
      fontWeight:'bold',
      fontStyle:'italic',
    },
  });
 

Good Luck