From 3900884f73583aefb9d344c679297cf5d7c935c9 Mon Sep 17 00:00:00 2001
From: Alejandro <alejandroce@lagash.com>
Date: Thu, 2 Jan 2020 10:53:45 -0300
Subject: [PATCH] add wrapInSafeArea prop & fix allow overwrite input toolbar
 position (#1572)

* Add optionTitles on MessageText

* Add messagesContainerStyle

* Fix remove react-dom peer dependecy

* add custom action sheet

* fix allow overwrite input toolbar position

* add useSafeArea prop

* Revert "add useSafeArea prop"

This reverts commit 5adb6e793a924bfe703e20780a016f35c71a318e.

* add wrapInSafeArea prop
---
 src/GiftedChat.tsx   | 11 +++++++++--
 src/InputToolbar.tsx |  2 +-
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/GiftedChat.tsx b/src/GiftedChat.tsx
index 712d11014..27094a6e5 100644
--- a/src/GiftedChat.tsx
+++ b/src/GiftedChat.tsx
@@ -61,6 +61,8 @@ export interface GiftedChatProps<TMessage extends IMessage = IMessage> {
   text?: string
   /* Controls whether or not the message bubbles appear at the top of the chat */
   alignTop?: boolean
+  /* Determine whether is wrapped in a SafeAreaView */
+  wrapInSafeArea?: boolean
   /* enables the scrollToBottom Component */
   scrollToBottom?: boolean
   /* Scroll to bottom wrapper style */
@@ -281,6 +283,7 @@ class GiftedChat<TMessage extends IMessage = IMessage> extends React.Component<
     extraData: null,
     minComposerHeight: MIN_COMPOSER_HEIGHT,
     maxComposerHeight: MAX_COMPOSER_HEIGHT,
+    wrapInSafeArea: true,
   }
 
   static propTypes = {
@@ -347,6 +350,7 @@ class GiftedChat<TMessage extends IMessage = IMessage> extends React.Component<
     minComposerHeight: PropTypes.number,
     maxComposerHeight: PropTypes.number,
     alignTop: PropTypes.bool,
+    wrapInSafeArea: PropTypes.bool,
   }
 
   static append<TMessage extends IMessage>(
@@ -831,8 +835,11 @@ class GiftedChat<TMessage extends IMessage = IMessage> extends React.Component<
 
   render() {
     if (this.state.isInitialized === true) {
+      const { wrapInSafeArea } = this.props
+      const Wrapper = wrapInSafeArea ? SafeAreaView : View
+
       return (
-        <SafeAreaView style={styles.safeArea}>
+        <Wrapper style={styles.safeArea}>
           <ActionSheetProvider
             ref={(component: any) => (this._actionSheetRef = component)}
           >
@@ -841,7 +848,7 @@ class GiftedChat<TMessage extends IMessage = IMessage> extends React.Component<
               {this.renderInputToolbar()}
             </View>
           </ActionSheetProvider>
-        </SafeAreaView>
+        </Wrapper>
       )
     }
     return (
diff --git a/src/InputToolbar.tsx b/src/InputToolbar.tsx
index 504109421..7ef7a1dac 100644
--- a/src/InputToolbar.tsx
+++ b/src/InputToolbar.tsx
@@ -157,8 +157,8 @@ export default class InputToolbar extends React.Component<
         style={
           [
             styles.container,
-            this.props.containerStyle,
             { position: this.state.position },
+            this.props.containerStyle,
           ] as ViewStyle
         }
       >