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:

(Data Save in Firebase)

(Screen)
Code: -

(Firebase)
import * as firebase from 'firebase'

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

  export default firebase;

(Screen)

import React, { useState, useEffect } from 'react'
import { Picker, Button, TouchableHighlight, Modal, Text, Image, View, ImageBack
ground, TouchableOpacity,StyleSheet,Dimensions,ScrollView,} from 'react-native';
import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-
native-responsive-screen';
import firebase from '../expense/database';
import {Appbar, TextInput} from 'react-native-paper';
export default function HomeScreen(){
  const [Num1,res1_num1]= useState();
  const [Num2,res2_num2]= useState();
  const [Num3,res3_num3]= useState();
  const [Num4,res4_num4]= useState();
  const [Num5,res5_num5]= useState();
  const [Slist,setlist]= useState([]);
  const [del,delval]=useState('')
  const db=firebase.database().ref('hafsa/')
  function addval()
  {
    db.push({
      date:Num1,
      place:Num2,
      Resource:Num3,
      Amount:Num4,
      expense:Num5,
  
     
    })
    
    res1_num1('')
    res2_num2('')
  }

  return(
    <View  style={{flex:1,backgroundColor:'pink',}} >
    < >
   

    <Appbar  style={{backgroundColor:'pink',}}>
      <Appbar.Content title={"Expense Manager" }/>
    </Appbar>
   
  
    <TextInput  style={{   borderWidth:2,  borderRadius:10,bordercolor:'black',}
}  label={"Date"}  onChangeText={ res1_num1} Value={Num1}  />
    <TextInput   style={{   borderWidth:2,  borderRadius:10,bordercolor:'black',
}}  label={"Place"}  onChangeText={ res2_num2} Value={Num2}  />
    <TextInput  style={{   borderWidth:2,  borderRadius:10,bordercolor:'black',}
}   label={"Resource"}  onChangeText={ res3_num3} Value={Num3}  />
    <TextInput  style={{   borderWidth:2,  borderRadius:10,bordercolor:'black',}
}   label={"Amount"}  onChangeText={ res4_num4} Value={Num4}  />
    <TextInput  style={{   borderWidth:2,  borderRadius:10,bordercolor:'black',}
}   label={"Account"}  onChangeText={ res5_num5} Value={Num5}  />
  <Text>{"\n\n"}</Text>
    <Button  title="ADD" onPress={()=>{addval()}}></Button>
    <Button title="Delete" onPress={()=>{deleteData(del)}}></Button>
    
    <View>
    </View>
  
    </>
    </View>
  );
}

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

const styles=StyleSheet.create(
  {
    centeredView: {
      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"
    },

  });
 

Good Luck