23 October, 2023 Assignment 01

Implement Basic of React Native

Group Members:

Abdul Aziz (FA21-BSE-058)

Waleed Rashid (FA21-BSE-162)

Submitted To:

Sir Jawad Khan

Assignment 01

Login Form:
Code:
import React from 'react';
import { View, Text, StyleSheet, TouchableWithoutFeedback, Keyboard, ImageBackground } from 'react-
native';
import { TextInput, Button } from 'react-native-paper';
import { useNavigation } from '@react-navigation/native';
import Header from '../Components/Header';
import { SafeAreaProvider } from 'react-native-safe-area-context';
const Login = () => {
const navigation = useNavigation();
const image = {uri: 'https://img.freepik.com/premium-vector/padlock-security-cyber-digital-
concept_42421-738.jpg?w=1380'};
return (
<SafeAreaProvider style = {styles.mainContainer}>
<Header />
<ImageBackground style ={{width: "100%", height: '100%', flex: 1, justifyContent: 'center',
alignItems: 'center'}} source={image} resizeMode='cover'>
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<View style = {styles.container}>
<ImageBackground style = {styles.form}>
<Text style = {styles.heading}>LOGIN</Text>
<View style = {styles.form_input}>
<TextInput
mode="outlined"
label="Email"
placeholder="Email"
/>
<TextInput
mode="outlined"
label="Password"
placeholder="Password"
/>
<Button style = {styles.sigin_btn} icon="login" mode="contained">
SIGN IN
</Button>
</View>
<Text style = {{marginTop: '10%'}}>Don't have an account <Text style = {{color: 'blue',
textDecorationLine : "underline", fontSize : '18px'}} onPress={() =>
navigation.navigate('Signup')}>Signup?</Text></Text>
</ImageBackground>
</View>
</TouchableWithoutFeedback>
</ImageBackground>
</SafeAreaProvider>
);
}

pg. 1
Assignment 01

const styles = StyleSheet.create({

mainContainer: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
container: {
width: '85%',
height: '60%',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
borderColor: 'black',
borderWidth: '1',
borderRadius: '15',
backgroundColor: 'rgba(255, 255, 255, 0.05)',
shadowColor: 'black',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.5,
shadowRadius: '5',
},

form: {
width: '90%',
height: '90%',
marginTop: '20%',
gap: '30%',
padding: 10
},

heading: {
fontWeight: '800',
fontSize: '25px',
},

form_input: {
width: '95%',

gap: '20%',
marginTop: '10%'
},

sigin_btn: {
width: '85%',
position: 'relative',
left: '8%',
top: '5%',

pg. 2
Assignment 01

});
export default Login;

Output:

pg. 3
Assignment 01

Signup:
Code:
import React from 'react';
import { View, Text, StyleSheet, TouchableWithoutFeedback, Keyboard, ImageBackground } from 'react-
native';
import { TextInput, Button, Icon } from 'react-native-paper';
import { useNavigation } from '@react-navigation/native';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import Header from '../Components/Header';
const Signup = () => {
const navigation = useNavigation();

const image = {uri: 'https://img.freepik.com/premium-vector/padlock-security-cyber-digital-

concept_42421-738.jpg?w=1380'};

return (
<SafeAreaProvider>
<Header />
<ImageBackground style ={{width: "100%", height: '100%', flex: '1', justifyContent: 'center',
alignItems: 'center'}} source={image} resizeMode='cover'>
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<View style = {styles.container}>
<View style = {styles.form}>
<Text style = {styles.heading}>Create Account</Text>
<View style = {styles.form_input}>
<TextInput
mode="outlined"
label="Full Name"
placeholder="Full Name"
/>
<TextInput
mode="outlined"
label="Email"
placeholder="Email"

/>
<TextInput
mode="outlined"
label="Password"
placeholder="Password"
/>
<TextInput
mode="outlined"
label="Confirm Password"
placeholder="Confirm Password"
left ={<Icon name = 'account' />}
/>
<Button style = {styles.sigin_btn} icon="login" mode="contained">

pg. 4
Assignment 01

SIGN UP
</Button>
</View>
<Text>Already have an accoung <Text style = {{color: 'blue', textDecorationLine : "underline",
fontSize : '18px'}} onPress={() => navigation.navigate('Login')}>Login?</Text></Text>
</View>
</View>
</TouchableWithoutFeedback>
</ImageBackground>
</SafeAreaProvider>
);
}
const styles = StyleSheet.create({
container: {
width: '85%',
height: '75%',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
borderColor: 'black',
borderWidth: '1',
borderRadius: '15',
backgroundColor: 'rgba(255, 255, 255, 0.05)',
shadowColor: 'black',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.5,
shadowRadius: '5',
},

form: {
width: '90%',
height: '85%',
// borderColor: 'red',
// borderWidth: '2',
marginTop: '20%',
gap: '40%',
padding: 10
},

heading: {
fontWeight: '800',
fontSize: '25px',
},

form_input: {
width: '95%',

gap: '20%',

pg. 5
Assignment 01

marginTop: '10%'
},

sigin_btn: {
width: '85%',
position: 'relative',
left: '8%',
top: '5%'
}

});
export default Signup;

pg. 6
Assignment 01

Output:

pg. 7
Assignment 01

Calculator:
Code:
import React, { useState } from 'react';
import { View, Text, TouchableOpacity, Image, StyleSheet, ImageBackground } from 'react-native';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import Header from '../Components/Header';
const Calculator = () => {
const [expression, setExpression] = useState('0');

const handleInputPress = (input) => {

if (expression === '0') {
setExpression(input);
} else {
setExpression(expression + input);
}
};

const handleOperatorPress = (operator) => {

if (expression !== '0') {
setExpression(expression + operator);
}
};

const handleEqualsPress = () => {

if (expression !== '0') {
try {
const result = eval(expression);
setExpression(result.toString());
} catch (error) {
// Handle invalid expressions here, if necessary
}
}
};

const handleClearPress = () => {

setExpression('0');
};

const image = {uri: 'https://img.freepik.com/premium-vector/padlock-security-cyber-digital-

concept_42421-738.jpg?w=1380'};

return (
<SafeAreaProvider>
<Header />
<ImageBackground style={styles.container} source={image} resizeMode='cover'>
<Text style={styles.input}>{expression}</Text>
<View style={styles.row}>
<TouchableOpacity style={styles.button} onPress={() => handleInputPress('7')}>

pg. 8
Assignment 01

<Text style={styles.buttonText}>7</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button} onPress={() => handleInputPress('8')}>
<Text style={styles.buttonText}>8</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button} onPress={() => handleInputPress('9')}>
<Text style={styles.buttonText}>9</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.buttonOperator} onPress={() => handleOperatorPress('/')}>
<Text style={styles.buttonText}>/</Text>
</TouchableOpacity>
</View>
<View style={styles.row}>
<TouchableOpacity style={styles.button} onPress={() => handleInputPress('4')}>
<Text style={styles.buttonText}>4</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button} onPress={() => handleInputPress('5')}>
<Text style={styles.buttonText}>5</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button} onPress={() => handleInputPress('6')}>
<Text style={styles.buttonText}>6</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.buttonOperator} onPress={() => handleOperatorPress('*')}>
<Text style={styles.buttonText}>*</Text>
</TouchableOpacity>
</View>
<View style={styles.row}>
<TouchableOpacity style={styles.button} onPress={() => handleInputPress('1')}>
<Text style={styles.buttonText}>1</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button} onPress={() => handleInputPress('2')}>
<Text style={styles.buttonText}>2</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button} onPress={() => handleInputPress('3')}>
<Text style={styles.buttonText}>3</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.buttonOperator} onPress={() => handleOperatorPress('-')}>
<Text style={styles.buttonText}>-</Text>
</TouchableOpacity>
</View>
<View style={styles.row}>
<TouchableOpacity style={styles.button} onPress={() => handleInputPress('0')}>
<Text style={styles.buttonText}>0</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button} onPress={() => handleInputPress('.')}>
<Text style={styles.buttonText}>.</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.buttonOperator} onPress={() => handleOperatorPress('+')}>

pg. 9
Assignment 01

<Text style={styles.buttonText}>+</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.buttonOperator} onPress={handleEqualsPress}>
<Text style={styles.buttonText}>=</Text>
</TouchableOpacity>
</View>
<View style={styles.row}>
<TouchableOpacity style={styles.button} onPress={handleClearPress}>
<Text style={{ color: 'brown', fontSize: 25, fontWeight: 800, height: 25, marginTop: 10
}}>Clear</Text>
</TouchableOpacity>
</View>
</ImageBackground>
</SafeAreaProvider>
);
};

const styles = StyleSheet.create({

container: {
flex: 1,
justifyContent: 'flex-end',

// The background image will be applied here

},
input: {
position: 'relative',
backgroundColor: 'rgba(255, 255, 255, 0.7)', // Background for input display
textAlign: 'right',
fontSize: 40,
padding: 15,
marginBottom: 5,
},
row: {
flexDirection: 'row',
marginBottom: 10
},
button: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'rgba(255, 255, 255, 0.7)', // Background for buttons
borderWidth: 1,
borderColor: 'lightgray',
borderRadius: 250,
padding: 20,
marginBottom: 10
},
buttonOperator: {

pg. 10
Assignment 01

flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'rgba(173, 216, 250, 1.5)', // Background for operator buttons
borderWidth: 1,
borderColor: 'lightgray',
borderRadius: 250,
padding: 20,
marginBottom: 10
},
buttonText: {
fontSize: 24,
},
});

export default Calculator;

pg. 11
Assignment 01

Output:

pg. 12
Assignment 01

Landscape Form:
Code:
import React, { useState, useEffect } from 'react';
import { KeyboardAvoidingView, View, Text, TextInput, Button, StyleSheet, ImageBackground,
Dimensions } from 'react-native';
import { SelectList } from 'react-native-dropdown-select-list';
import AutoGrowingTextInput from 'react-native-autogrow-textinput-ts';
import { RadioButton, Checkbox } from 'react-native-paper';

function MyForm() {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [country, setCountry] = useState('');
const [checkBox, setCheckBox] = useState('');
const [skills, setSkills] = useState('');
const [address, setAddress] = useState('');
const [isPortrait, setIsPortrait] = useState(true);
const [radioChecked, setRadioChecked] = useState('first');
const [checked, setChecked] = useState(false);

const data = [
{ key: '1', value: 'India', disabled: true },
{ key: '2', value: 'Pakistan' },
{ key: '3', value: 'America' },
{ key: '4', value: 'UK', disabled: true },
{ key: '5', value: 'Iran' },
{ key: '6', value: 'Saudia ' },
];

useEffect(() => {
const updateLayout = () => {
const { width, height } = Dimensions.get('window');
setIsPortrait(height > width);
};

Dimensions.addEventListener('change', updateLayout);

return () => {
Dimensions.removeEventListener('change', updateLayout);
};
}, []);

const handleSubmission = () => {

console.log('Name: ', name);
console.log('Email: ', email);
console.log('Country: ', country);
console.log('Check Box: ', checkBox);
console.log('Skills: ', skills);

pg. 13
Assignment 01

console.log('Address: ', address);

};

const image = { uri: 'https://img.freepik.com/premium-vector/padlock-security-cyber-digital-

concept_42421-738.jpg?w=1380' };

return (
<ImageBackground
source={image}
resizeMode='cover'
style={styles.backgroundImage}
>
<KeyboardAvoidingView style={isPortrait ? styles.containerPortrait : styles.containerLandscape}>
<TextInput
style={styles.input}
placeholder="Name"
onChangeText={(text) => setName(text)}
/>
<TextInput
style={styles.input}
placeholder="Email"
onChangeText={(text) => setEmail(text)}
/>
<View><Text>Gender</Text>
<Text>Male
<RadioButton
value="first"
status={radioChecked === 'first' ? 'checked' : 'unchecked'}
onPress={() => setRadioChecked('first')}
/>
</Text>
<Text>Female
<RadioButton
uncheckedColor="blue" // Set the border color for unchecked state
style={{ borderRadius: 20 }}
value="second"
status={radioChecked === 'second' ? 'checked' : 'unchecked'}
onPress={() => setRadioChecked('second')}
/>
</Text>
</View>
<SelectList
setSelected={(val) => setCountry(val)}
data={data}
save="value"
placeholder='Country'
/>

pg. 14
Assignment 01

<View style={{ display: 'flex', flexDirection: 'row', justifyContent: 'center', padding: 20

}}><Text>Subjects</Text>
<Text>Physics
<Checkbox
status={checked ? 'checked' : 'unchecked'}
onPress={() => {
setChecked(!checked);
}}
/>
</Text>
<Text>Chemistry
<Checkbox
status={checked ? 'checked' : 'unchecked'}
onPress={() => {
setChecked(!checked);
}}
/>
</Text>
<Text>Maths
<Checkbox
status={checked ? 'checked' : 'unchecked'}
onPress={() => {
setChecked(!checked);
}}
/>
</Text>
</View>
<AutoGrowingTextInput
style={styles.input}
placeholder="Skills"
onChangeText={(text) => setSkills(text)}
/>
<AutoGrowingTextInput
style={styles.input}
placeholder="Address"
onChangeText={(text) => setAddress(text)}
/>

<Button
title="Press me"
onPress={() => Alert.alert('Simple Button pressed')}
/>
</KeyboardAvoidingView>
</ImageBackground>
);
}

const styles = StyleSheet.create({

pg. 15
Assignment 01

containerPortrait: {
width: '80%',
height: '60%',
flex: 1,
justifyContent: 'center',
padding: 30,
margin: 50,
borderWidth: 1,
gap: 5,
},
containerLandscape: {
flex: 1,
flexDirection: 'column', // Landscape mode layout
justifyContent: 'space-evenly',
alignItems: 'center',
margin: 50,
borderWidth: 3,
},
backgroundImage: {
flex: 1,
width: '100%',
height: '100%',
resizeMode: 'cover',
},
input: {
fontSize: 30,
backgroundColor: 'white',
color: 'white',
width: 230,
height: 40,
borderWidth: 1,
borderRadius: 5,
margin: 10,
padding: 10,
},
});

export default MyForm;

pg. 16
Assignment 01

Output:

pg. 17