Fix InputAccessoryView safe area when not attached to a TextInput (#21179)

Summary:
When using an InputAccessoryView attached to a TextInput the safe area insets are not applied properly. This uses different autolayout constraints that works in all cases I tested, roughly based on the technique used here https://github.com/stockx/SafeAreaInputAccessoryViewWrapperView/blob/master/SafeAreaInputAccessoryViewWrapperView/Classes/SafeAreaInputAccessoryViewWrapperView.swift#L38.
Pull Request resolved: https://github.com/facebook/react-native/pull/21179

Differential Revision: D9928503

Pulled By: hramos

fbshipit-source-id: b1b623334558093042fd94ac85e1b52dd16aa1a0

RNTester/js/InputAccessoryViewExample.js

@@ -58,6 +58,8 @@ class TextInputBar extends React.PureComponent<*, *> {
   }
 }
 
+const BAR_HEIGHT = 44;
+
 class InputAccessoryViewExample extends React.Component<*> {
   static title = '<InputAccessoryView>';
   static description =
@@ -65,8 +67,8 @@ class InputAccessoryViewExample extends React.Component<*> {
 
   render() {
     return (
-      <View>
-        <ScrollView keyboardDismissMode="interactive">
+      <>
+        <ScrollView style={styles.fill} keyboardDismissMode="interactive">
           {Array(15)
             .fill()
             .map((_, i) => <Message key={i} />)}
@@ -74,14 +76,21 @@ class InputAccessoryViewExample extends React.Component<*> {
         <InputAccessoryView backgroundColor="#fffffff7">
           <TextInputBar />
         </InputAccessoryView>
-      </View>
+      </>
     );
   }
 }
 
 const styles = StyleSheet.create({
+  fill: {
+    flex: 1,
+  },
   textInputContainer: {
     flexDirection: 'row',
+    alignItems: 'center',
+    borderTopWidth: 1,
+    borderTopColor: '#eee',
+    height: BAR_HEIGHT,
   },
   textInput: {
     flex: 1,