Scribd Logo
Upload

Welcome to Scribd!

  • Ahmed 70076260 t2

    Uploaded by

    Samman Nadeem
    19 views11 pages
    The document contains code for building screens of a mobile application. It includes code for a home screen with buttons to navigate to login and register screens. It also includes code for login and register screens with inputs for user information and buttons to navigate between screens. The code uses React Native elements like View, Text, Image, and TouchableOpacity to build the user interface.

    Original Description:

    Mobile application

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document contains code for building screens of a mobile application. It includes code for a home screen with buttons to navigate to login and register screens. It also includes code for login and register screens with inputs for user information and buttons to navigate between screens. The code uses React Native elements like View, Text, Image, and TouchableOpacity to build the user interface.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    19 views11 pages

    Ahmed 70076260 t2

    Uploaded by

    Samman Nadeem
    The document contains code for building screens of a mobile application. It includes code for a home screen with buttons to navigate to login and register screens. It also includes code for login and register screens with inputs for user information and buttons to navigate between screens. The code uses React Native elements like View, Text, Image, and TouchableOpacity to build the user interface.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 11

    Lab Task

    Mobile Application Development


    Submitted to: Mr. Raheel baig
    Submitted by: Ahmed Rizwan
    Sap-id: 70076260
    Course: BSSE-VII

    Output:
    Code:
    Home Screen :
    import { StyleSheet, Text, View, TouchableOpacity, Image} from 'react-native'
    import React from 'react'

    import { NavigationContainer } from '@react-navigation/native' const


    HomeScreen = ({navigation}) => { return (
    <View style = {{ flex:
    1, alignItems:
    'center',
    justifyContent: 'center',

    }}> <Image
    source={{
    uri: 'https://i.pinimg.com/originals/16/99/48/16994873e52cf48b897d3f86bbfeac28.jpg'
    }} style =
    {{ width:200,
    height:100,
    }} />

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

    color:'white', fontSize:
    15, fontWeight:'bold',
    }}>
    Login
    </Text>
    </TouchableOpacity>
    </View> )
    } export default HomeScreen const styles = StyleSheet.create({})

    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({})

    Register 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 RegisterScreen =
    ({navigation}) => { return (<KeyboardAwareScrollView style={{
    backgroundColor: 'white',
    }}>
    <View style={{ 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, }}
    label="First Name" />
    <TextInput
    style={{ marginBottom:10,
    }} label="Last Name" />
    <TextInput style={{
    marginBottom:10, }}
    label="Email" /> <TextInput
    style={{ marginBottom:10,
    }} label="Password" />
    <TextInput style={{
    marginBottom:10, }} label="Phone
    Number" />
    </View>
    {/* Action Area */} <View
    style={{
    flexDirection:'row', margin:10,
    justifyContent:'space-evenly',
    }}>
    <TouchableOpacity style = {{
    height : 50, width: 100,
    backgroundColor:'blue', alignItems:
    'center', justifyContent: 'center',
    borderRadius: 10,
    }}onPress = {()=>navigation.navigate("Categories")}>
    <Text style={{ color:'white',
    fontSize:
    15, fontWeight:'bold',
    }}>
    Register
    </Text>
    </TouchableOpacity>
    <TouchableOpacity style = {{ height
    : 50, width: 100,
    backgroundColor:'blue', alignItems:
    'center', justifyContent: 'center',
    borderRadius: 10,
    }} onPress =
    {()=>navigation.navigate("Categories")} >
    <Text style={{ color:'white',
    fontSize:
    15, fontWeight:'bold',
    }}>
    Login
    </Text>
    </TouchableOpacity>
    </View>
    </KeyboardAwareScrollView> )
    } export default RegisterScreen
    const styles = StyleSheet.create({})

    You might also like