Fixed #137

VERSIONING.md

@@ -22,11 +22,3 @@
 ## OTA release channels
 
   * `MAJOR.MINOR-environment`. Environments include `release`, `candidate` and `development`.
-
-## Major versions mapping to native module versions
-
-| Version | Native module version | Expo version |
-| :------:| :-------------------: | :----------: |
-| `0-`    | `210201`              | `40.0.0`     |
-| `1-`    | `210317`              | `40.0.0`     |
-| `2.2`   | `210916`              | `41.0.0`     |

ios/Podfile.lock

@@ -412,12 +412,13 @@ PODS:
     - React-Core
   - react-native-cameraroll (4.1.2):
     - React-Core
-  - react-native-image-keyboard (2.2.0):
-    - React
   - react-native-netinfo (9.0.0):
     - React-Core
   - react-native-pager-view (5.4.11):
     - React-Core
+  - react-native-paste-input (0.4.2):
+    - React-Core
+    - Swime (= 3.0.6)
   - react-native-safe-area-context (4.2.5):
     - RCT-Folly
     - RCTRequired
@@ -583,6 +584,7 @@ PODS:
   - Sentry (7.11.0):
     - Sentry/Core (= 7.11.0)
   - Sentry/Core (7.11.0)
+  - Swime (3.0.6)
   - TOCropViewController (2.6.1)
   - Yoga (1.14.0)
 
@@ -644,9 +646,9 @@ DEPENDENCIES:
   - "react-native-blur (from `../node_modules/@react-native-community/blur`)"
   - react-native-blurhash (from `../node_modules/react-native-blurhash`)
   - "react-native-cameraroll (from `../node_modules/@react-native-community/cameraroll`)"
-  - react-native-image-keyboard (from `../node_modules/react-native-image-keyboard`)
   - "react-native-netinfo (from `../node_modules/@react-native-community/netinfo`)"
   - react-native-pager-view (from `../node_modules/react-native-pager-view`)
+  - "react-native-paste-input (from `../node_modules/@mattermost/react-native-paste-input`)"
   - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
   - "react-native-segmented-control (from `../node_modules/@react-native-community/segmented-control`)"
   - React-perflogger (from `../node_modules/react-native/ReactCommon/reactperflogger`)
@@ -692,6 +694,7 @@ SPEC REPOS:
     - SDWebImage
     - SDWebImageWebPCoder
     - Sentry
+    - Swime
     - TOCropViewController
 
 EXTERNAL SOURCES:
@@ -801,12 +804,12 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-blurhash"
   react-native-cameraroll:
     :path: "../node_modules/@react-native-community/cameraroll"
-  react-native-image-keyboard:
-    :path: "../node_modules/react-native-image-keyboard"
   react-native-netinfo:
     :path: "../node_modules/@react-native-community/netinfo"
   react-native-pager-view:
     :path: "../node_modules/react-native-pager-view"
+  react-native-paste-input:
+    :path: "../node_modules/@mattermost/react-native-paste-input"
   react-native-safe-area-context:
     :path: "../node_modules/react-native-safe-area-context"
   react-native-segmented-control:
@@ -925,9 +928,9 @@ SPEC CHECKSUMS:
   react-native-blur: cad4d93b364f91e7b7931b3fa935455487e5c33c
   react-native-blurhash: add4df9a937b4e021a24bc67a0714f13e0bd40b7
   react-native-cameraroll: 2957f2bce63ae896a848fbe0d5352c1bd4d20866
-  react-native-image-keyboard: adbf5996b8592a7d8cb8d3e431a9607f9cf3b270
   react-native-netinfo: 5b664b2945a8f02102b296f0f812bddd6827ed9c
   react-native-pager-view: 7f00d63688f7df9fad86dfb0154814419cc5eb8d
+  react-native-paste-input: efbf0b08fa1673f0e3131da6ea01678c1bb8003e
   react-native-safe-area-context: ebf8c413eb8b5f7c392a036a315eb7b46b96845f
   react-native-segmented-control: 65df6cd0619b780b3843d574a72d4c7cec396097
   React-perflogger: a18b4f0bd933b8b24ecf9f3c54f9bf65180f3fe6
@@ -954,6 +957,7 @@ SPEC CHECKSUMS:
   SDWebImage: 0905f1b7760fc8ac4198cae0036600d67478751e
   SDWebImageWebPCoder: f93010f3f6c031e2f8fb3081ca4ee6966c539815
   Sentry: 0c5cd63d714187b4a39c331c1f0eb04ba7868341
+  Swime: d7b2c277503b6cea317774aedc2dce05613f8b0b
   TOCropViewController: edfd4f25713d56905ad1e0b9f5be3fbe0f59c863
   Yoga: 99652481fcd320aefa4a7ef90095b95acd181952
 

package.json

@@ -32,6 +32,7 @@
     "@formatjs/intl-numberformat": "^8.0.1",
     "@formatjs/intl-pluralrules": "^5.0.1",
     "@formatjs/intl-relativetimeformat": "^11.0.1",
+    "@mattermost/react-native-paste-input": "^0.4.2",
     "@neverdull-agency/expo-unlimited-secure-store": "1.0.10",
     "@react-native-async-storage/async-storage": "1.17.6",
     "@react-native-community/blur": "3.6.0",
@@ -84,7 +85,6 @@
     "react-native-gesture-handler": "2.4.2",
     "react-native-htmlview": "0.16.0",
     "react-native-image-crop-picker": "^0.37.3",
-    "react-native-image-keyboard": "^2.2.0",
     "react-native-pager-view": "5.4.11",
     "react-native-reanimated": "2.8.0",
     "react-native-safe-area-context": "4.2.5",

src/App.tsx

@@ -21,7 +21,6 @@ import * as SplashScreen from 'expo-splash-screen'
 import React, { useCallback, useEffect, useState } from 'react'
 import { LogBox, Platform } from 'react-native'
 import { GestureHandlerRootView } from 'react-native-gesture-handler'
-import 'react-native-image-keyboard'
 import { enableFreeze } from 'react-native-screens'
 import { QueryClientProvider } from 'react-query'
 import { Provider } from 'react-redux'

src/screens/Compose/Root/Header/TextInput.tsx

@@ -1,10 +1,11 @@
 import CustomText from '@components/Text'
+import PasteInput, { PastedFile } from '@mattermost/react-native-paste-input'
 import { getInstanceConfigurationStatusMaxAttachments } from '@utils/slices/instancesSlice'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useContext } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Alert, TextInput } from 'react-native'
+import { Alert } from 'react-native'
 import { useSelector } from 'react-redux'
 import formatText from '../../formatText'
 import ComposeContext from '../../utils/createContext'
@@ -21,7 +22,7 @@ const ComposeTextInput: React.FC = () => {
   )
 
   return (
-    <TextInput
+    <PasteInput
       keyboardAppearance={mode}
       style={{
         ...StyleConstants.FontStyle.M,
@@ -62,8 +63,12 @@ const ComposeTextInput: React.FC = () => {
       }}
       ref={composeState.textInputFocus.refs.text}
       scrollEnabled={false}
-      onImageChange={({ nativeEvent }) => {
-        if (composeState.attachments.uploads.length >= maxAttachments) {
+      disableCopyPaste={false}
+      onPaste={(error: string | null | undefined, files: PastedFile[]) => {
+        if (
+          composeState.attachments.uploads.length + files.length >
+          maxAttachments
+        ) {
           Alert.alert(
             t(
               'content.root.header.textInput.keyboardImage.exceedMaximum.title'
@@ -80,12 +85,13 @@ const ComposeTextInput: React.FC = () => {
           )
           return
         }
-        if (nativeEvent.linkUri) {
+
+        for (const file of files) {
           uploadAttachment({
             composeDispatch,
             media: {
-              path: nativeEvent.linkUri,
-              mime: 'image/gif',
+              path: file.uri,
+              mime: file.type,
               width: 100,
               height: 100
             }
@@ -94,7 +100,7 @@ const ComposeTextInput: React.FC = () => {
       }}
     >
       <CustomText>{composeState.text.formatted}</CustomText>
-    </TextInput>
+    </PasteInput>
   )
 }
 

yarn.lock

@@ -2039,6 +2039,13 @@
     "@jridgewell/resolve-uri" "^3.0.3"
     "@jridgewell/sourcemap-codec" "^1.4.10"
 
+"@mattermost/react-native-paste-input@^0.4.2":
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/@mattermost/react-native-paste-input/-/react-native-paste-input-0.4.2.tgz#f08f94a921fee89d84a14e2acdbf1905c13ea427"
+  integrity sha512-iHwJkQ3iODVniEi8Qsr8FNOLTAIksjmxcsbbBU4SPiduNKEotOy/qAgexiW1Vsp9jO/WJnQ7Gn59bFNpxVGzmQ==
+  dependencies:
+    deprecated-react-native-prop-types "^2.3.0"
+
 "@neverdull-agency/expo-unlimited-secure-store@1.0.10":
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/@neverdull-agency/expo-unlimited-secure-store/-/expo-unlimited-secure-store-1.0.10.tgz#1e78b502257b267fc918a85eaa41aa01a46d2007"
@@ -7515,11 +7522,6 @@ react-native-image-crop-picker@^0.37.3:
   resolved "https://registry.yarnpkg.com/react-native-image-crop-picker/-/react-native-image-crop-picker-0.37.3.tgz#f260e40b6a6ba8e98f4db3dde25a8f09e0936385"
   integrity sha512-ih+0pWWRUNEFQyaHwGbH9rqJNOb7EBYMwKJhTY0VmsKIA9E+usfwMmQXAFIfOnee7fTn0A2vOXkBCPQZwyvnQw==
 
-react-native-image-keyboard@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/react-native-image-keyboard/-/react-native-image-keyboard-2.2.0.tgz#dc3f90aaaac20a79315015a330e62e85547e0674"
-  integrity sha512-2JzKCXMBYiIUR6OtGV7F/lEWqwIU/6HS1CGOBulxwYNxoa7m1nZk45hNEZPP8SA5yE2pLNXEQePjc3WGAtXo3w==
-
 react-native-iphone-x-helper@^1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.3.1.tgz#20c603e9a0e765fd6f97396638bdeb0e5a60b010"