Lab Task

Mobile Application Development

Program: BSSE-7
Submitted to: Mr. Raheel Baig
Submitted by: Ahmed Rizwan
Sap-id: 70076260
1. Create folder in any Directory

2. Run “expo init” project name command in command prompt

3. Select Blank Template

4. Project Created Successfully

5. Open Project with VS Code

6. Open Terminal & run “yarn start” command

7. Open expo app in mobile & scan QR Code

App.js
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, Image} from 'react-native';
import { NavigationContainer } from '@react-navigation/native'; import {
createStackNavigator } from '@react-navigation/stack';
const Stack = createStackNavigator();
function MyStack() { return (
<Stack.Navigator>
<Stack.Screen name="Home" component={Home} />
<Stack.Screen name="Notifications" component={Notifications} />
<Stack.Screen name="Profile" component={Profile} />
<Stack.Screen name="Settings" component={Settings} /> </Stack.Navigator>
);
}
export default function App() { return (
<View style={styles.container}>
<Text>Samman</Text>
<Image
source = {{
url: "https://cdn-icons-png.flaticon.com/512/25/25694.png"
}} style = {{
width: 200,
height: 200,
borderRadius: 200,
}}
/>
</View>
);
}
const styles = StyleSheet.create({ container: { flex: 1,
backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center',
},
});

import { StyleSheet, Text, View } from 'react-native' import React from 'react'
const LoginScreen = () => {
return (
<View>
<Text>LoginScreen</Text> </View>
)
}

export default LoginScreen

const styles = StyleSheet.create({})
import { StyleSheet, Text, View } from 'react-native' import React from 'react'
const HomeScreen = () => {
return (
<View>
<Text>HomeScreen</Text> </View>
)
}
export default HomeScreen
const styles = StyleSheet.create({})