DRAFT: Issue 695: Fix emoji search in Post Detail

package.json

@@ -26,7 +26,6 @@
     "@emoji-mart/data": "^1.1.2",
     "@emoji-mart/react": "^1.1.1",
     "@expo/react-native-action-sheet": "^4.0.1",
-    "@flyerhq/react-native-keyboard-accessory-view": "^2.4.0",
     "@intercom/intercom-react-native": "^6.2.0",
     "@invertase/react-native-apple-authentication": "^2.2.2",
     "@native-html/iframe-plugin": "^2.6.1",
@@ -73,6 +72,7 @@
     "react-native-gesture-handler": "^2.6.0",
     "react-native-image-picker": "^4.10.0",
     "react-native-image-viewing": "^0.2.2",
+    "react-native-keyboard-accessory": "^0.1.16",
     "react-native-linear-gradient": "^2.6.2",
     "react-native-modal": "^13.0.0",
     "react-native-onesignal": "^4.4.1",

src/components/CommentEditor/CommentEditor.js

@@ -1,9 +1,5 @@
 import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react'
 import { View, Text, TouchableOpacity, Alert, ActivityIndicator } from 'react-native'
-import { BottomTabBarHeightContext } from '@react-navigation/bottom-tabs'
-import { useSafeAreaInsets } from 'react-native-safe-area-context'
-// ⚠️⚠️⚠️ Deprecated - see https://github.com/facebook/react-native/pull/31402 for native `InputAccessoryView` component (React Native 0.68+) ⚠️⚠️⚠️
-import { KeyboardAccessoryView } from '@flyerhq/react-native-keyboard-accessory-view'
 import MaterialIcon from 'react-native-vector-icons/MaterialIcons'
 import { isEmpty } from 'lodash/fp'
 import { isIOS } from 'util/platform'
@@ -15,38 +11,6 @@ import { useDispatch } from 'react-redux'
 import Icon from 'components/Icon'
 import { firstName } from 'store/models/Person'
 
-export const KeyboardAccessoryCommentEditor = forwardRef(function KeyboardAccessoryCommentEditor ({
-  renderScrollable,
-  isModal,
-  ...commentFormProps
-}, ref) {
-  const safeAreaInsets = useSafeAreaInsets()
-
-  return (
-    <BottomTabBarHeightContext.Consumer>
-      {actualTabBarHeight => {
-        const tabBarHeight = (isModal || !actualTabBarHeight) ? 0 : actualTabBarHeight
-
-        return (
-          <KeyboardAccessoryView
-            contentContainerStyle={{
-              ...styles.keyboardAccessoryContainerStyle,
-              paddingBottom: isModal ? safeAreaInsets.bottom : 0
-            }}
-            // These offsets are needed for iOS as it seems the tabbar may
-            // be included in the calculations before it is hidden.
-            spaceBetweenKeyboardAndAccessoryView={isIOS ? -tabBarHeight : 0}
-            contentOffsetKeyboardOpened={isIOS ? -tabBarHeight : 0}
-            renderScrollable={renderScrollable}
-          >
-            <CommentEditor {...commentFormProps} ref={ref} />
-          </KeyboardAccessoryView>
-        )
-      }}
-    </BottomTabBarHeightContext.Consumer>
-  )
-})
-
 export const CommentEditor = forwardRef(function CommentEditor ({
   post,
   replyingTo,

src/navigation/TabsNavigator.js

@@ -21,7 +21,7 @@ export default function TabsNavigator () {
     screenOptions: ({ route }) => ({
       // TODO: Required for Android, not iOS
       // Set only for Android as it makes undesirable animation in iOS
-      tabBarHideOnKeyboard: !isIOS,
+      tabBarHideOnKeyboard: true,
       tabBarShowLabel: true,
       tabBarPressColor: gainsboro,
       tabBarIndicatorStyle: { backgroundColor: white },

src/screens/PostDetails/PostDetails.js

@@ -10,13 +10,14 @@
 import getCurrentGroup from 'store/selectors/getCurrentGroup'
 import { getPresentedPost } from 'store/selectors/getPost'
 import getRouteParam from 'store/selectors/getRouteParam'
-import { KeyboardAccessoryCommentEditor } from 'components/CommentEditor/CommentEditor'
+import CommentEditor from 'components/CommentEditor/CommentEditor'
 import Comments from 'components/Comments'
 import Loading from 'components/Loading'
 import PostCardForDetails from 'components/PostCard/PostCardForDetails'
 import SocketSubscriber from 'components/SocketSubscriber'
 import { white } from 'style/colors'
 import trackAnalyticsEvent from 'store/actions/trackAnalyticsEvent'
+import { KeyboardAccessoryView } from 'react-native-keyboard-accessory'
 
 /*
 
@@ -94,11 +95,13 @@
 
   useEffect(() => { setHeader() }, [currentGroup?.slug])
 
-  const renderPostDetails = panHandlers => {
-    const firstGroupSlug = get('groups.0.slug', post)
-    const showGroups = isModalScreen || post?.groups.find(g => g.slug !== currentGroup?.slug)
+  if (!post?.creator) return <Loading />
+
+  const firstGroupSlug = get('groups.0.slug', post)
+  const showGroups = isModalScreen || post?.groups.find(g => g.slug !== currentGroup?.slug)
 
-    return (
+  return (
+    <View style={styles.container}>
       <Comments
         ref={commentsRef}
         postId={post.id}
@@ -111,24 +114,22 @@
         onSelect={setSelectedComment}
         slug={firstGroupSlug}
         showMember={goToMember}
-        panHandlers={panHandlers}
-      />
-    )
-  }
-
-  if (!post?.creator) return <Loading />
-
-  return (
-    <View style={styles.container}>
-      <KeyboardAccessoryCommentEditor
-        renderScrollable={renderPostDetails}
-        isModal={isModalScreen}
-        post={post}
-        groupId={groupId}
-        replyingTo={selectedComment}
-        scrollToReplyingTo={scrollToSelectedComment}
-        clearReplyingTo={clearSelectedComment}
       />
+      <KeyboardAccessoryView
+        style={{ flex: 1, overflow: 'auto' }}
+        alwaysVisible
+        heightProperty='minHeight'
+        avoidKeyboard
+        androidAdjustResize
+      >
+        <CommentEditor
+          post={post}
+          groupId={groupId}
+          replyingTo={selectedComment}
+          scrollToReplyingTo={scrollToSelectedComment}
+          clearReplyingTo={clearSelectedComment}
+        />
+      </KeyboardAccessoryView>
       <SocketSubscriber type='post' id={post.id} />
     </View>
   )

yarn.lock

@@ -1237,11 +1237,6 @@
     "@types/hoist-non-react-statics" "^3.3.1"
     hoist-non-react-statics "^3.3.0"
 
-"@flyerhq/react-native-keyboard-accessory-view@^2.4.0":
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/@flyerhq/react-native-keyboard-accessory-view/-/react-native-keyboard-accessory-view-2.4.0.tgz#27fe52f77e2b0ee324bf74154eda79bfebba608f"
-  integrity sha512-LF2WdkMk23bTTpsXPQIyVjWttfo+6DcG0HcgE4kp+ozbVRv2Z1S+K1IRd1CR1LAuvHPnVax3DjrJqsGFTavqvA==
-
 "@formidable-webview/webshell@^2.6.0":
   version "2.6.0"
   resolved "https://registry.yarnpkg.com/@formidable-webview/webshell/-/webshell-2.6.0.tgz#64704c0b513206e71b23118b3c9d096f0d545005"
@@ -8102,6 +8097,11 @@ react-native-image-viewing@^0.2.2:
   resolved "https://registry.yarnpkg.com/react-native-image-viewing/-/react-native-image-viewing-0.2.2.tgz#fb26e57d7d3d9ce4559a3af3d244387c0367242b"
   integrity sha512-osWieG+p/d2NPbAyonOMubttajtYEYiRGQaJA54slFxZ69j1V4/dCmcrVQry47ktVKy8/qpFwCpW1eT6MH5T2Q==
 
+react-native-keyboard-accessory@^0.1.16:
+  version "0.1.16"
+  resolved "https://registry.yarnpkg.com/react-native-keyboard-accessory/-/react-native-keyboard-accessory-0.1.16.tgz#f0babba9e6568c0c2c8f3fd774fcb2b90b8274ba"
+  integrity sha512-zpdaduoGjp/spLtM0XxxyxFpCqFQu3fospy/HeYpaIfsXTqGdT1MIajS8tahDxeG6fHLDrWvEIYA6zWM5jni0w==
+
 react-native-linear-gradient@^2.6.2:
   version "2.8.2"
   resolved "https://registry.yarnpkg.com/react-native-linear-gradient/-/react-native-linear-gradient-2.8.2.tgz#9811c91751be673ef928ef4aa3ff3a70b82935d6"