CM3050 Lab 3005: Positioning UI

import { StyleSheet, ImageBackground, View, Text, Switch, TextInput, TouchableOpacity, SafeAreaView } from 'react-native';
import { KeyboardAvoidingView, TouchableWithoutFeedback, Keyboard } from 'react-native';

export default function App() {
  return (
    <ImageBackground
      source={require('./assets/social.png')}
      resizeMode="cover"
      style={styles.background}
      imageStyle={{opacity: 0.2}}>
      <KeyboardAvoidingView
	behavior={Platform.OS === "ios" ? "padding" : "height"}
	style={styles.container}
      >
	<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
	  <SafeAreaView style={styles.safeView}>
	    <View style={styles.welcomeTextContainer}>
	      <Text style={styles.welcomeText}>Welcome to Social 👋</Text>

	    </View>
	    <View style={styles.bodyTextContainer}>
	      <Text style={styles.bodyText}>
		At social we believe in a new type of interaction.
		{"\n"}{"\n"}
		One that crosses the boundaries of what was possible before.
		{"\n"}{"\n"}
		Sign up today and check out the future of social networking.
	      </Text>
	    </View>
	    <View style={styles.signUpContainer}>
	      <TextInput style={styles.emailInput} value="Your email address" />
	      <View style={styles.newsletterContainer}>
		<View>
		  <Switch ios_backgroundColor="#3e3e3e"></Switch>
		</View>
		<View style={styles.newsletterGrow}>
		  <Text style={styles.newsletterText}>Sign up to our newsletter to hear the latest before anyone else!</Text>
		</View>
	      </View>
	      <TouchableOpacity style={styles.signUp}>
		<Text style={styles.signUpText}>Sign Up</Text>
	      </TouchableOpacity>
	    </View>
	  </SafeAreaView>
	</TouchableWithoutFeedback>
      </KeyboardAvoidingView>
    </ImageBackground>
  );
}

const styles = StyleSheet.create({
  safeView: {
    flex: 1,
  },
  background: {
    flex: 1,
    justifyContent: "center",
    width: "100%",
    height: "100%",
  },
  container: {
    flex: 1,
    justifyContent: "center",
    width: "100%",
    height: "100%"
  },
  bodyTextContainer: {
    paddingTop: "10%",
    paddingBottom: "20%",
    paddingLeft: "10%",
    paddingRight: "10%"
  },
  welcomeTextContainer: {
    flex: 1,
    justifyContent: "flex-end",
    paddingLeft: "10%",
    paddingRight: "10%"
  },
  signUpContainer: {
    paddingTop: "10%",
    justifyContent: "flex-end"
  },
  welcomeText: {
    fontSize: 55,
    fontWeight: "bold"
  },
  bodyText: {
    fontSize: 17
  },
  signUp: {
    width: "90%",
    height: 70,
    borderRadius: 35,
    marginLeft:"5%",
    marginBottom: 10,
    backgroundColor: "black",
    alignContent:"center",
    justifyContent:"center"
  },
  signUpText: {
    textAlign: "center",
    color: "white",
    fontWeight: "bold",
    fontSize: 28
  },
  emailInput: {
    borderWidth:3,
    borderRadius:17,
    borderColor:"black",
    width:"90%",
    height: 60,
    marginLeft:"5%",
    marginRight:"5%",
    marginBottom: 20,
    paddingLeft:"10%",
    paddingRight:"10%",
    textAlign:"center",
    fontSize: 18,
    backgroundColor:"white"
    },
    newsletterContainer: {
      flexDirection: "row",
      width: "90%",
      paddingLeft: "5%",
      paddingBottom: "5%"
    },
    newsletterGrow: {
      flexGrow: 1,
      flex: 1
    },
    newsletterText: {
      paddingLeft: 15
    }

});