Use full screen design for the modal

Author: pranavrajs

src/App.js

@@ -1,10 +1,12 @@
 import React, { useEffect, useState } from 'react';
-import { View } from 'react-native';
+import { SafeAreaView } from 'react-native';
 import Modal from 'react-native-modal';
 import PropTypes from 'prop-types';
 import { storeHelper } from './utils';
 import WebView from './WebView';
 import styles from './style';
+import { COLOR_WHITE } from './constants';
+
 const propTypes = {
   isModalVisible: PropTypes.bool.isRequired,
   websiteToken: PropTypes.string.isRequired,
@@ -48,12 +50,15 @@ const ChatWootWidget = ({
 
   return (
     <Modal
-      style={styles.modal}
+      backdropColor={COLOR_WHITE}
       coverScreen
       isVisible={isModalVisible}
+      onBackButtonPress={closeModal}
       onBackdropPress={closeModal}
-      onBackButtonPress={closeModal}>
-      <View style={styles.mainView}>
+      style={styles.modal}
+    >
+      <SafeAreaView style={styles.headerView} />
+      <SafeAreaView style={styles.mainView}>
         <WebView
           websiteToken={websiteToken}
           cwCookie={cwCookie}
@@ -63,7 +68,7 @@ const ChatWootWidget = ({
           customAttributes={customAttributes}
           closeModal={closeModal}
         />
-      </View>
+      </SafeAreaView>
     </Modal>
   );
 };

src/WebView.js

@@ -85,6 +85,9 @@ const styles = StyleSheet.create({
     borderRadius: 4,
     overflow: 'hidden',
   },
+  webViewContainer: {
+    flex: 1,
+  }
 });
 WebViewComponent.defaultProps = defaultProps;
 WebViewComponent.propTypes = propTypes;

src/constants.js

@@ -4,3 +4,5 @@ export const POST_MESSAGE_EVENTS = {
   SET_CUSTOM_ATTRIBUTES: 'set-custom-attributes',
   SET_USER: 'set-user',
 };
+export const BG_COLOR = '#f1f5f8';
+export const COLOR_WHITE = '#fff';

src/style.js

@@ -1,12 +1,20 @@
+import { BG_COLOR, COLOR_WHITE } from './constants';
+
 const { StyleSheet } = require('react-native');
 
 const styles = StyleSheet.create({
   modal: {
-    paddingVertical: 16,
+    flex: 1,
+    margin: 0,
+    paddingVertical: 0,
   },
   mainView: {
     flex: 1,
-    borderRadius: 16,
+    backgroundColor: BG_COLOR,
   },
+  headerView: {
+    backgroundColor: COLOR_WHITE,
+    flex: 0,
+  }
 });
 export default styles;