Lab Task

Mobile Application Development

Submitted to: Mr. Raheel Baig
Submitted by: Ahmed Rizwan
Sap-id: 70076260
Course: BSSE-VII
Code:
Login Screen :
import { StyleSheet, Text, View, Image, TouchableOpacity } from 'react-native'
import React from 'react'
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
import { TextInput } from 'react-native-paper'; const LoginScreen =
({navigation}) => { return (
<KeyboardAwareScrollView style={{ backgroundColor: 'white', }}>
<View style={{ marginTop:120,
alignItems:'center',
justifyContent: 'center' }}>
<Image source={{
uri: 'https://i.pinimg.com/originals/16/99/48/16994873e52cf48b897d3f86bbfeac28.jpg'
}} style =
{{ width:200,
height:100,
}} />
</View>
{/* Input Area */} <View style={{
marginBottom:10, margin:10, borderRadius:10,
}}> <TextInput
style={{
marginBottom:10,
margin:10, }}
label="Email" />
<TextInput style={{
marginBottom:10,
margin:10, }} label="Password" />
</View>
{/* Action Area */}
<View style={{
flexDirection:'row', margin:10, justifyContent:'space-evenly',
}}>

<TouchableOpacity style = {{ height : 50, width: 200,

backgroundColor:'blue', alignItems: 'center', justifyContent:
'center', borderRadius: 10,
}} onPress = {()=>navigation.navigate("Categories")} >
<Text style={{ color:'white', fontSize:
25, fontWeight:'bold',
}}>
Login
</Text>
</TouchableOpacity>

</View>
</KeyboardAwareScrollView>
) } export default LoginScreen const styles =
StyleSheet.create({})

Health Data:
import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
import React from 'react'
import { useNavigation } from '@react-navigation/native'

import { TextInput } from 'react-native-paper'; const

Categories = ({navigation}) => { return (

<View style={{ height:"100%"

}}>
<View style={{flexDirection:'row', height:"20%",
padding:10,}}>
<View >

<Image
source = {{uri: 'https://www.nicepng.com/png/detail/133-
1338816_healthicon-c96185x1-2017-08-23t15-health-icon.png'
}} style = {{
marginLeft:50,
width:100, height:100,

}}
/>
<Text style={
{
fontWeight:'bold',
fontSize:18,
 textAlign:'center', marginLeft:50,
}
}>
Health
</Text>

</View>

<View >

<Image
source = {{uri: 'https://cdn-icons-png.flaticon.com/512/1934/1934437.png'
}} style = {{ width:100,
marginLeft:100,
height:100,
}}
/>
<Text style={
{ fontWeight:'bold',
fontSize:18, textAlign:'center',
marginLeft:100,
}
}>
Contact Doctor
</Text>

</View>

</View>
<View style={{flexDirection:'row',height:'65%', padding:10,}}>
<View>

<Image
source = {{uri: 'https://www.nicepng.com/png/detail/785-
7856379_grassicon.png' }} style = {{ width:100,
height:100, marginLeft:50,
}}
/>
<Text style={
 { fontWeight:'bold',
fontSize:18, textAlign:'center',
marginLeft:50,
}
}> Feeding
</Text>
</View>
<View >

<Image
source = {{uri:
'https://icons.veryicon.com/png/o/educationtechnology/passenger-flow-analysisicon-
library/activity-assessment.png'
}} style
= {{ width:100,
marginLeft:100,
height:100,

}}
/>
<Text style={
{ fontWeight:'bold',
fontSize:18, textAlign:'center',
marginLeft:100,
}
}> Activity
</Text>

</View>
</View>

</View>

)
}
export default Categories
const styles = StyleSheet.create({})