Merge pull request #1743 from showtime-xyz/feat/improve-keyboard-on-ios

perf: imporve keyboard on iOS

Author: alantoa

apps/expo/package.json

@@ -246,7 +246,7 @@
     "@storybook/react-native": "next",
     "@types/jest": "^27.4.1",
     "@types/qrcode": "^1.5.0",
-    "@types/react": "18.0.24",
+    "@types/react": "~18.0.24",
     "@types/three": "^0.142.0",
     "@types/uuid": "^8.3.4",
     "babel-jest": "^28.1.3",

package.json

@@ -6,7 +6,7 @@
   "devDependencies": {
     "@react-native-menu/menu": "^0.7.2",
     "@trivago/prettier-plugin-sort-imports": "^3.3.0",
-    "@types/react-native": "0.69.3",
+    "@types/react-native": "0.70.5",
     "@typescript-eslint/eslint-plugin": "5.23.0",
     "@typescript-eslint/parser": "5.23.0",
     "@walletconnect/react-native-dapp": "^1.7.8",

packages/app/components/comments/comment-input-box.tsx

@@ -4,13 +4,11 @@ import { ViewStyle } from "react-native";
 import { useAlert } from "@showtime-xyz/universal.alert";
 import { Button } from "@showtime-xyz/universal.button";
 import { Close } from "@showtime-xyz/universal.icon";
-import { useSafeAreaInsets } from "@showtime-xyz/universal.safe-area";
 import { Text } from "@showtime-xyz/universal.text";
 import { View } from "@showtime-xyz/universal.view";
 
 import { MessageBox } from "app/components/messages/message-box";
 import { CommentType } from "app/hooks/api/use-comments";
-import { useKeyboardVisible } from "app/hooks/use-keyboard-visible";
 import { useUser } from "app/hooks/use-user";
 import { formatAddressShort } from "app/utilities";
 
@@ -34,12 +32,9 @@ export const CommentInputBox = forwardRef<
 >(function CommentInputBox({ submitting, submit, commentInputRef }, ref) {
   //#region variables
   const Alert = useAlert();
-  const { visible } = useKeyboardVisible();
-
   const [selectedComment, setSelectedComment] = useState<CommentType | null>(
     null
   );
-  const { bottom } = useSafeAreaInsets();
   const { user } = useUser();
   //#endregion
 
@@ -97,7 +92,7 @@ export const CommentInputBox = forwardRef<
           <Button
             variant="text"
             size="small"
-            tw="mr--4"
+            tw="mr-4"
             onPress={handleOnClearPress}
           >
             <Close color={"black"} width={16} height={16} />
@@ -107,11 +102,6 @@ export const CommentInputBox = forwardRef<
       <MessageBox
         ref={commentInputRef}
         submitting={submitting}
-        style={{
-          paddingHorizontal: 16,
-          marginBottom: Math.max(0, bottom - (visible ? 8 : 0)),
-          paddingBottom: 0,
-        }}
         onSubmit={handleOnSubmitComment}
         userAvatar={user?.data.profile.img_url}
       />

packages/app/components/comments/comments-container.ios.tsx

@@ -1,11 +1,19 @@
-import { useCallback, useMemo, useRef, useEffect } from "react";
-import { Platform, StyleSheet, TextInput } from "react-native";
+import { useCallback, useMemo, useRef, useEffect, Fragment } from "react";
+import {
+  Platform,
+  StyleSheet,
+  TextInput,
+  InputAccessoryView,
+} from "react-native";
 
 import { ListRenderItemInfo } from "@shopify/flash-list";
+import { AvoidSoftInput } from "react-native-avoid-softinput";
 
 import { useAlert } from "@showtime-xyz/universal.alert";
+import { useIsDarkMode } from "@showtime-xyz/universal.hooks";
 import { InfiniteScrollList } from "@showtime-xyz/universal.infinite-scroll-list";
 import { useSafeAreaInsets } from "@showtime-xyz/universal.safe-area";
+import { colors } from "@showtime-xyz/universal.tailwind";
 import { View } from "@showtime-xyz/universal.view";
 
 import { CommentRow } from "app/components/comments/comment-row";
@@ -16,11 +24,13 @@ import type { NFT } from "app/types";
 
 import { EmptyPlaceholder } from "../empty-placeholder";
 import { CommentInputBox, CommentInputBoxMethods } from "./comment-input-box";
-import { CommentsContainer } from "./comments-container";
 import { CommentsStatus } from "./comments-status";
 
 const keyExtractor = (item: CommentType) => `comment-${item.comment_id}`;
 
+const PlatformInputAccessoryView =
+  Platform.OS === "ios" ? InputAccessoryView : Fragment;
+
 export function Comments({ nft }: { nft: NFT }) {
   //#region refs
   const Alert = useAlert();
@@ -32,11 +42,20 @@ export function Comments({ nft }: { nft: NFT }) {
 
   useEffect(() => {
     // auto focus on comment modal open on native
+    if (Platform.OS === "ios") {
+      AvoidSoftInput.setEnabled(false);
+    }
+
     if (Platform.OS !== "web") {
       setTimeout(() => {
         commentInputRef.current?.focus?.();
       }, 100);
     }
+    return () => {
+      if (Platform.OS === "ios") {
+        AvoidSoftInput.setEnabled(true);
+      }
+    };
   }, []);
 
   //#region hooks
@@ -53,6 +72,7 @@ export function Comments({ nft }: { nft: NFT }) {
   } = useComments(nft.nft_id);
   const modalListProps = useModalListProps();
   const { bottom } = useSafeAreaInsets();
+  const isDark = useIsDarkMode();
   //#endregion
   //#region variables
   const dataReversed = useMemo(
@@ -137,7 +157,7 @@ export function Comments({ nft }: { nft: NFT }) {
     [bottom]
   );
   return (
-    <CommentsContainer style={styles.container}>
+    <View style={styles.container}>
       {isLoading || (dataReversed.length == 0 && error) ? (
         <CommentsStatus isLoading={isLoading} error={error} />
       ) : (
@@ -149,29 +169,42 @@ export function Comments({ nft }: { nft: NFT }) {
             keyExtractor={keyExtractor}
             estimatedItemSize={98}
             overscan={98}
-            keyboardDismissMode="on-drag"
+            keyboardDismissMode="interactive"
             ListEmptyComponent={listEmptyComponent}
             ListFooterComponent={listFooterComponent}
+            automaticallyAdjustKeyboardInsets
+            contentInsetAdjustmentBehavior="never"
             {...modalListProps}
           />
           {isAuthenticated && (
-            <CommentInputBox
-              ref={inputRef}
-              commentInputRef={commentInputRef}
-              submitting={isSubmitting}
-              submit={newComment}
-            />
+            <PlatformInputAccessoryView
+              {...Platform.select({
+                ios: {
+                  backgroundColor: isDark ? colors.black : colors.white,
+                },
+                default: {},
+              })}
+            >
+              <CommentInputBox
+                ref={inputRef}
+                commentInputRef={commentInputRef}
+                submitting={isSubmitting}
+                submit={newComment}
+              />
+            </PlatformInputAccessoryView>
           )}
         </>
       )}
-    </CommentsContainer>
+    </View>
   );
   //#endregion
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
+    // Notes: for `FlashList's rendered size is not usable` warning on Android.
+    minHeight: 200,
   },
   contentContainer: {
     flex: 1,

packages/app/components/comments/comments-container.tsx

@@ -77,10 +77,7 @@ export const MessageBox = forwardRef<MessageBoxMethods, MessageBoxProps>(
       [handleReset, handleFocus]
     );
     return (
-      <View
-        tw="flex-row items-center bg-white py-4 dark:bg-black"
-        style={style}
-      >
+      <View tw="flex-row items-center bg-white p-4 dark:bg-black" style={style}>
         <View tw="mr-2 flex-1">
           <TextInput
             //@ts-ignore
@@ -110,7 +107,11 @@ export const MessageBox = forwardRef<MessageBoxMethods, MessageBoxProps>(
           onPress={handleSubmit}
           style={{ opacity: disable ? 0.4 : 1 }}
         >
-          {submitting ? <Spinner size="small" /> : <Send />}
+          {submitting ? (
+            <Spinner size="small" />
+          ) : (
+            <Send width={24} height={24} />
+          )}
         </Button>
       </View>
     );

packages/app/components/comments/index.tsx

@@ -20,18 +20,20 @@ export const Basic: React.FC<{}> = () => {
         flexDirection: "row",
         alignItems: "center",
       }}
-      // @ts-ignore
-      dataSet={{
-        "data-chromatic": "ignore",
-      }}
     >
       <Pressable
         style={{ marginTop: 100 }}
         onPress={() => {
           setOpen(!open);
         }}
       >
-        <Text>Date {date.toString()}</Text>
+        <Text
+          dataSet={{
+            "data-chromatic": "ignore",
+          }}
+        >
+          Date {date.toString()}
+        </Text>
       </Pressable>
 
       <DateTimePicker
@@ -40,6 +42,10 @@ export const Basic: React.FC<{}> = () => {
           setOpen(false);
           setDate(d);
         }}
+        // @ts-ignore
+        dataSet={{
+          "data-chromatic": "ignore",
+        }}
         value={date}
         open={open}
       />

packages/app/components/messages/message-box.tsx

@@ -8879,7 +8879,7 @@ __metadata:
     "@tradle/react-native-http": ^2.0.1
     "@types/jest": ^27.4.1
     "@types/qrcode": ^1.5.0
-    "@types/react": 18.0.24
+    "@types/react": ~18.0.24
     "@types/three": ^0.142.0
     "@types/uuid": ^8.3.4
     "@walletconnect/react-native-dapp": ^1.8.0
@@ -11684,12 +11684,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-native@npm:0.69.3":
-  version: 0.69.3
-  resolution: "@types/react-native@npm:0.69.3"
+"@types/react-native@npm:0.70.5":
+  version: 0.70.5
+  resolution: "@types/react-native@npm:0.70.5"
   dependencies:
     "@types/react": "*"
-  checksum: 7d5aa4b30385e232fed74bdebeba1c7ee73b4237ca5a310fee6f9b98432ed2f3a737f2755c528fd5b03485278e98bd0b152692df5e146cb2603827ab939841dc
+  checksum: 1a21cd62afcd23cbd2d8e27c3b7601819739bb822e77ce9a3995af14be88e4ae19e467bc4b9c133f6da82648e8a951f07d1e55997d1a7a50260b79c784c24535
   languageName: node
   linkType: hard
 
@@ -33243,7 +33243,7 @@ __metadata:
     "@react-native-menu/menu": ^0.7.2
     "@trivago/prettier-plugin-sort-imports": ^3.3.0
     "@types/react-dropzone": ^5.1.0
-    "@types/react-native": 0.69.3
+    "@types/react-native": 0.70.5
     "@typescript-eslint/eslint-plugin": 5.23.0
     "@typescript-eslint/parser": 5.23.0
     "@walletconnect/react-native-dapp": ^1.7.8