test: alter test UI structure for modularity / safe area

- this should allow us to slice in other components
- this also allows all of the test UI to show up despite device cutouts etc

note that react-native-safe-area-context is the real way to do this, but
adding a dependency is overkill when brute-force padding / margin will do
for a one-page test app

Author: mikehardy

tests/app.js

@@ -17,7 +17,7 @@
  */
 
 import React from 'react';
-import { StyleSheet, View, StatusBar, AppRegistry, LogBox } from 'react-native';
+import { StyleSheet, View, StatusBar, AppRegistry } from 'react-native';
 
 import { JetProvider, ConnectionText, StatusEmoji, StatusText } from 'jet';
 
@@ -263,23 +263,30 @@ function loadTests(_) {
 
 function App() {
   return (
-    <JetProvider tests={loadTests}>
+    <>
       <StatusBar hidden />
       <View style={styles.container}>
-        <ConnectionText style={styles.connectionText} />
-        <View style={styles.statusContainer}>
-          <StatusEmoji style={styles.statusEmoji} />
-          <StatusText style={styles.statusText} />
-        </View>
+        <JetProvider tests={loadTests}>
+          <ConnectionText style={styles.connectionText} />
+          <View style={styles.statusContainer}>
+            <StatusEmoji style={styles.statusEmoji} />
+            <StatusText style={styles.statusText} />
+          </View>
+        </JetProvider>
       </View>
-    </JetProvider>
+    </>
   );
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
     backgroundColor: '#fff',
+    // instead of depending on react-native-safe-area-context to avoid
+    // colliding with system UI we are just going to pad things out for simplicity
+    marginTop: 60,
+    paddingHorizontal: '5%',
+    paddingBottom: '5%',
   },
   statusContainer: {
     flex: 1,