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 5adb6e7.

* add wrapInSafeArea prop

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 (

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
         }
       >