welcome ui pixel perfect fine tuning

src/screens/application/screen/welcomeScreen.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
 import { Text, Image, View, SafeAreaView } from 'react-native';
+
 import EStyleSheet from 'react-native-extended-stylesheet';
 
 import { Icon, MainButton } from '../../../components';
@@ -26,28 +27,30 @@ const WelcomeScreen = ({ handleButtonPress }) => {
   );
 
   return (
-    <View style={styles.container}>
-      <Image
-        style={styles.mascot}
-        resizeMode="contain"
-        source={require('../../../assets/love_mascot.png')}
-      />
-      <View style={styles.topText}>
-        <Text style={styles.welcomeText}>{intl.formatMessage({ id: 'welcome.label' })}</Text>
-        <Text style={styles.ecencyText}>{intl.formatMessage({ id: 'welcome.title' })}</Text>
-      </View>
-      <View>
-        {_renderInfo('question', 'welcome.line1_heading', 'welcome.line1_body')}
-        {_renderInfo('emotsmile', 'welcome.line2_heading', 'welcome.line2_body')}
-        {_renderInfo('people', 'welcome.line3_heading', 'welcome.line3_body')}
-      </View>
+    <SafeAreaView style={styles.root}>
+      <View style={styles.container}>
+        <Image
+          style={styles.mascot}
+          resizeMode="contain"
+          source={require('../../../assets/love_mascot.png')}
+        />
+        <View style={styles.topText}>
+          <Text style={styles.welcomeText}>{intl.formatMessage({ id: 'welcome.label' })}</Text>
+          <Text style={styles.ecencyText}>{intl.formatMessage({ id: 'welcome.title' })}</Text>
+        </View>
+        <View>
+          {_renderInfo('question', 'welcome.line1_heading', 'welcome.line1_body')}
+          {_renderInfo('emotsmile', 'welcome.line2_heading', 'welcome.line2_body')}
+          {_renderInfo('people', 'welcome.line3_heading', 'welcome.line3_body')}
+        </View>
 
-      <MainButton
-        onPress={handleButtonPress}
-        style={{ alignSelf: 'center', paddingHorizontal: 30 }}
-        text="Get started!"
-      />
-    </View>
+        <MainButton
+          onPress={handleButtonPress}
+          style={{ alignSelf: 'center', paddingHorizontal: 30 }}
+          text="Get started!"
+        />
+      </View>
+    </SafeAreaView>
   );
 };
 

src/screens/application/screen/welcomeStyles.js

@@ -1,13 +1,23 @@
+import { Dimensions, Platform } from 'react-native';
 import EStyleSheet from 'react-native-extended-stylesheet';
 import scalePx from '../../../utils/scalePx';
 
+const WINDOW_HEIGHT = Dimensions.get('window').height;
+
 export default EStyleSheet.create({
+  root: {
+    flex: 1,
+    backgroundColor: '$primaryBackgroundColor',
+  },
   container: {
     flex: 1,
     justifyContent: 'space-between',
-    paddingVertical: 100,
+    paddingTop: Platform.select({
+      ios: 30,
+      android: 50,
+    }),
+    paddingBottom: 20,
     paddingHorizontal: 40,
-    backgroundColor: '$primaryBackgroundColor',
   },
   welcomeText: {
     fontSize: scalePx(34),
@@ -19,10 +29,13 @@ export default EStyleSheet.create({
   },
   mascot: {
     position: 'absolute',
-    width: 160,
+    width: '45%',
     height: 227,
-    marginTop: 90,
-    right: 0,
+    marginTop: Platform.select({
+      ios: 20,
+      android: WINDOW_HEIGHT * 0.07,
+    }),
+    right: 8,
     opacity: 0.7,
     shadowColor: '$primaryBlack',
     shadowOffset: { width: 0, height: 0 },
@@ -35,7 +48,7 @@ export default EStyleSheet.create({
   },
   sectionRow: {
     flexDirection: 'row',
-    marginTop: 64,
+    marginTop: 52,
   },
   sectionTitle: {
     fontSize: scalePx(17),