refactor: wrap components in SafeAreaView for improved layout consistency

Author: lposen

example/src/components/Commerce/Commerce.tsx

@@ -1,4 +1,5 @@
 import { Alert, Image, Pressable, ScrollView, Text, View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 import { Iterable, IterableCommerceItem } from '@iterable/react-native-sdk';
 
@@ -32,35 +33,37 @@ export const Commerce = () => {
   };
 
   return (
-    <ScrollView>
-      <View style={styles.container}>
-        <Text style={styles.title}>Commerce</Text>
-        <Text style={styles.subtitle}>
-          Purchase will be tracked when &quot;Buy&quot; is clicked. See logs for
-          output.
-        </Text>
-        {items.map((item) => (
-          <View key={item.id} style={styles.cardContainer}>
-            <View style={styles.infoContainer}>
-              <View style={styles.imageContainer}>
-                <Image source={item.icon} style={styles.cardImage} />
-              </View>
-              <View style={styles.textContainer}>
-                <Text style={styles.cardTitle}>{item.name}</Text>
-                <Text style={styles.cardSubtitle}>{item.subtitle}</Text>
-                <Text style={styles.price}>${item.price}</Text>
-                <Pressable
-                  style={styles.button}
-                  onPress={() => handleClick(item)}
-                >
-                  <Text style={styles.buttonText}>Buy</Text>
-                </Pressable>
+    <SafeAreaView>
+      <ScrollView>
+        <View style={styles.container}>
+          <Text style={styles.title}>Commerce</Text>
+          <Text style={styles.subtitle}>
+            Purchase will be tracked when &quot;Buy&quot; is clicked. See logs for
+            output.
+          </Text>
+          {items.map((item) => (
+            <View key={item.id} style={styles.cardContainer}>
+              <View style={styles.infoContainer}>
+                <View style={styles.imageContainer}>
+                  <Image source={item.icon} style={styles.cardImage} />
+                </View>
+                <View style={styles.textContainer}>
+                  <Text style={styles.cardTitle}>{item.name}</Text>
+                  <Text style={styles.cardSubtitle}>{item.subtitle}</Text>
+                  <Text style={styles.price}>${item.price}</Text>
+                  <Pressable
+                    style={styles.button}
+                    onPress={() => handleClick(item)}
+                  >
+                    <Text style={styles.buttonText}>Buy</Text>
+                  </Pressable>
+                </View>
               </View>
             </View>
-          </View>
-        ))}
-      </View>
-    </ScrollView>
+          ))}
+        </View>
+      </ScrollView>
+    </SafeAreaView>
   );
 };
 

example/src/components/Embedded/Embedded.tsx

@@ -1,11 +1,12 @@
-import { Text, View } from 'react-native';
 import { Iterable } from '@iterable/react-native-sdk';
+import { Text } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 import styles from './Embedded.styles';
 
 export const Embedded = () => {
   return (
-    <View style={styles.container}>
+    <SafeAreaView style={styles.container}>
       <Text style={styles.text}>EMBEDDED</Text>
       <Text style={styles.text}>
         Does embedded class exist? {Iterable.embeddedManager ? 'Yes' : 'No'}
@@ -14,7 +15,7 @@ export const Embedded = () => {
         Is embedded manager enabled?{' '}
         {Iterable.embeddedManager.isEnabled ? 'Yes' : 'No'}
       </Text>
-    </View>
+    </SafeAreaView>
   );
 };
 

example/src/components/Login/Login.tsx

@@ -1,11 +1,12 @@
+import { useMemo } from 'react';
 import {
   ActivityIndicator,
   Pressable,
   Text,
   TextInput,
   View,
 } from 'react-native';
-import { useMemo } from 'react';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 import { colors, type Route } from '../../constants';
 import { useIterableApp } from '../../hooks';
@@ -18,7 +19,7 @@ export const Login = ({ navigation }: RootStackScreenProps<Route.Login>) => {
   const loginIsEnabled = useMemo(() => apiKey && userId, [apiKey, userId]);
 
   return (
-    <View style={styles.loginScreenContainer}>
+    <SafeAreaView style={styles.loginScreenContainer}>
       {loginInProgress ? (
         <View style={styles.loadingContainer}>
           <ActivityIndicator size="large" color={colors.brandPurple} />
@@ -66,7 +67,7 @@ export const Login = ({ navigation }: RootStackScreenProps<Route.Login>) => {
           </View>
         </>
       )}
-    </View>
+    </SafeAreaView>
   );
 };
 

example/src/components/User/User.tsx

@@ -1,6 +1,7 @@
 import { Iterable } from '@iterable/react-native-sdk';
 import { useEffect, useState } from 'react';
-import { Text, TouchableOpacity, View } from 'react-native';
+import { Text, TouchableOpacity } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 import { useIterableApp } from '../../hooks';
 import styles from './User.styles';
@@ -18,13 +19,13 @@ export const User = () => {
   }, [isLoggedIn]);
 
   return (
-    <View style={styles.container}>
+    <SafeAreaView style={styles.container}>
       <Text style={styles.appName}>Welcome Iterator</Text>
       <Text style={styles.text}>Logged in as {loggedInAs}</Text>
       <TouchableOpacity style={styles.button} onPress={logout}>
         <Text style={styles.buttonText}>Logout</Text>
       </TouchableOpacity>
-    </View>
+    </SafeAreaView>
   );
 };
 

example/src/constants/styles/typography.ts

@@ -6,7 +6,6 @@ export const appName: TextStyle = {
   fontWeight: 'bold',
   fontSize: 14,
   width: '100%',
-  marginTop: 41,
   marginBottom: 64,
   textTransform: 'uppercase',
   letterSpacing: 2,