fix: Use full screen design for the modal

Author: muhsin-k

examples/ios/Podfile.lock

@@ -377,7 +377,7 @@ SPEC CHECKSUMS:
   boost-for-react-native: 39c7adb57c4e60d6c5479dd8623128eb5b3f0f2c
   DoubleConversion: cf9b38bf0b2d048436d9a82ad2abe1404f11e7de
   FBLazyVector: 49cbe4b43e445b06bf29199b6ad2057649e4c8f5
-  FBReactNativeSpec: f6af9bcec43fcc256bbcc3458fffc8e61c2d40e6
+  FBReactNativeSpec: e1faac61254e41dcc6f397af15921c15cfc9911a
   glog: 73c2498ac6884b13ede40eda8228cb1eee9d9d62
   RCT-Folly: ec7a233ccc97cc556cf7237f0db1ff65b986f27c
   RCTRequired: 2f8cb5b7533219bf4218a045f92768129cf7050a
@@ -408,4 +408,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: 3f57f8f9a44ff9ba5fc829e5392025271d888429
 
-COCOAPODS: 1.10.2
+COCOAPODS: 1.11.3

examples/package.json

@@ -11,7 +11,7 @@
     "lint": "eslint ."
   },
   "dependencies": {
-    "@chatwoot/react-native-widget": "^0.0.3",
+    "@chatwoot/react-native-widget": "../chatwoot-react-native-widget-0.0.7.tgz",
     "@react-native-async-storage/async-storage": "^1.14.1",
     "react": "17.0.1",
     "react-native": "0.64.0",

examples/yarn.lock

@@ -1,6 +1,6 @@
 {
   "name": "@chatwoot/react-native-widget",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "React Native widget for Chatwoot",
   "main": "index.js",
    "scripts": {

package.json

@@ -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,
@@ -25,7 +27,7 @@ const defaultProps = {
   cwCookie: '',
   user: {},
   locale: 'en',
-  customattributes: {},
+  customAttributes: {},
 };
 
 const ChatWootWidget = ({
@@ -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/App.js

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

src/WebView.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/constants.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;