Improve add server screen layout in landscape

screens/AddServerScreen.js

@@ -4,7 +4,9 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 import React from 'react';
-import { Image, StyleSheet, View } from 'react-native';
+import { Image, KeyboardAvoidingView, Platform, StyleSheet, View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { useHeaderHeight } from '@react-navigation/stack';
 import { useTranslation } from 'react-i18next';
 
 import ServerInput from '../components/ServerInput';
@@ -12,50 +14,52 @@ import Colors from '../constants/Colors';
 
 const AddServerScreen = () => {
 	const { t } = useTranslation();
+	const headerHeight = useHeaderHeight();
 
 	return (
-		<View style={styles.container}>
-			<View style={styles.logoContainer}>
-				<Image
-					style={styles.logoImage}
-					source={require('../assets/images/logowhite.png')}
-					fadeDuration={0} // we need to adjust Android devices (https://facebook.github.io/react-native/docs/image#fadeduration) fadeDuration prop to `0` as it's default value is `300`
+		<KeyboardAvoidingView
+			style={styles.screen}
+			behavior={Platform.OS == 'ios' ? 'padding' : 'height'}
+		>
+			<SafeAreaView
+				style={{...styles.container, paddingBottom: headerHeight}}
+				edges={['right', 'bottom', 'left']}
+			>
+				<View style={styles.logoContainer}>
+					<Image
+						style={styles.logoImage}
+						source={require('../assets/images/logowhite.png')}
+						fadeDuration={0} // we need to adjust Android devices (https://facebook.github.io/react-native/docs/image#fadeduration) fadeDuration prop to `0` as it's default value is `300`
+					/>
+				</View>
+				<ServerInput
+					label={t('addServer.address')}
+					placeholder='https://jellyfin.org'
+					t={t}
 				/>
-			</View>
-			<ServerInput
-				containerStyle={styles.serverTextContainer}
-				label={t('addServer.address')}
-				placeholder='https://jellyfin.org'
-				t={t}
-			/>
-		</View>
+			</SafeAreaView>
+		</KeyboardAvoidingView>
 	);
 };
 
 const styles = StyleSheet.create({
-	serverTextContainer: {
+	screen: {
 		flex: 1,
-		alignContent: 'flex-start'
+		backgroundColor: Colors.backgroundColor
 	},
 	container: {
 		flex: 1,
-		alignItems: 'center',
-		justifyContent: 'center',
-		backgroundColor: Colors.backgroundColor
+		justifyContent: 'space-evenly'
 	},
 	logoContainer: {
-		marginTop: 80,
-		marginBottom: 48,
-		alignItems: 'center',
-		justifyContent: 'center'
+		alignItems: 'center'
 	},
 	logoImage: {
-		width: '90%',
-		height: undefined,
-		maxWidth: 481,
-		maxHeight: 151,
-		// Aspect ration of the logo
-		aspectRatio: 3.18253
+		marginVertical: 10,
+		width: 481,
+		height: 151,
+		maxWidth: '90%',
+		resizeMode: 'contain'
 	}
 });