fix safe area view styles

Author: fadi-george

examples/RNOneSignalTS/OSConsole.tsx

@@ -10,7 +10,6 @@
 
 import React, { useCallback, useRef } from 'react';
 import { Platform, ScrollView, StyleSheet, Text, View } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
 
 export interface Props {
   value: string;
@@ -24,10 +23,11 @@ const OSConsole: React.FC<Props> = ({ value }) => {
   }, []);
 
   return (
-    <SafeAreaView style={styles.body}>
+    <View style={styles.body}>
       <ScrollView
         nestedScrollEnabled={true}
         style={styles.scrollView}
+        contentContainerStyle={styles.scrollViewContent}
         ref={scrollViewRef}
         onContentSizeChange={scrollToEnd}
       >
@@ -41,19 +41,21 @@ const OSConsole: React.FC<Props> = ({ value }) => {
           </Text>
         </View>
       </ScrollView>
-    </SafeAreaView>
+    </View>
   );
 };
 
 const styles = StyleSheet.create({
   scrollView: {
+    flex: 1,
     backgroundColor: '#f8f9fa',
   },
+  scrollViewContent: {
+    flexGrow: 1,
+  },
   body: {
-    backgroundColor: 'grey',
+    backgroundColor: '#f8f9fa',
     flex: 1,
-    flexGrow: 1,
-    flexDirection: 'row',
   },
   console: {
     flexWrap: 'wrap',
@@ -65,11 +67,13 @@ const styles = StyleSheet.create({
     flex: 1,
     flexWrap: 'wrap',
     fontSize: 10,
+    color: '#000',
   },
   textAndroid: {
     flex: 1,
     flexWrap: 'wrap',
     fontSize: 10,
+    color: '#000',
   },
 });
 

examples/RNOneSignalTS/OSDemo.tsx

@@ -6,11 +6,11 @@ import {
   StyleSheet,
   Text,
   TextInput,
+  TouchableOpacity,
   View,
 } from 'react-native';
 import { LogLevel, OneSignal } from 'react-native-onesignal';
 import { SafeAreaView } from 'react-native-safe-area-context';
-import { renderButtonView } from './Helpers';
 import OSButtons from './OSButtons';
 import OSConsole from './OSConsole';
 
@@ -233,14 +233,19 @@ const OSDemo: React.FC = () => {
   }, []);
 
   return (
-    <SafeAreaView style={styles.container}>
+    <SafeAreaView style={styles.container} edges={['bottom', 'left', 'right']}>
       <View style={styles.header}>
         <Text style={styles.title}>OneSignal</Text>
         <OSConsole value={consoleValue} />
         <View style={styles.clearButton}>
-          {renderButtonView('X', () => {
-            setConsoleValue('');
-          })}
+          <TouchableOpacity
+            style={styles.clearButtonTouchable}
+            onPress={() => {
+              setConsoleValue('');
+            }}
+          >
+            <Text style={styles.clearButtonText}>X</Text>
+          </TouchableOpacity>
         </View>
         <TextInput
           style={styles.input}
@@ -273,12 +278,30 @@ const styles = StyleSheet.create({
   title: {
     fontSize: 40,
     alignSelf: 'center',
-    paddingVertical: 10,
+    paddingTop: 4,
+    paddingBottom: 10,
   },
   clearButton: {
     position: 'absolute',
-    right: 0,
+    right: 10,
     top: 70,
+    width: 44,
+    height: 44,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  clearButtonTouchable: {
+    width: 44,
+    height: 44,
+    backgroundColor: '#007bff',
+    borderRadius: 8,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  clearButtonText: {
+    color: 'white',
+    fontSize: 18,
+    fontWeight: '600',
   },
   input: {
     marginTop: 10,