deps: Migrate to @react-native-clipboard/clipboard

`Clipboard` in RN core has been deprecated for a while, and in RN's
v0.71 doc they finally mark it "removed":
  https://reactnative.dev/docs/clipboard

We've reportedly (#4502) been getting console warnings that we
should use @react-native-community/clipboard instead of the RN-core
module. Do basically that, except we use its new name,
@react-native-clipboard/clipboard; see
  react-native-clipboard/clipboard#87

Supersedes: #4502
Co-authored-by: rajprakash00 <[email protected]>

Author: 2 people

.eslintrc.yaml

@@ -280,7 +280,11 @@ rules:
     - devDependencies: ['**/__tests__/**/*.js', tools/**]
   no-restricted-imports:
     - error
-    - patterns:
+    - paths:
+      - name: 'react-native'
+        importNames: ['Clipboard']
+        message: 'Use Clipboard from @react-native-clipboard/clipboard instead.'
+      patterns:
       - group: ['**/__tests__/**']
       - group: ['/react-redux']
         message: 'Use our own src/react-redux.js instead.'

ios/Podfile.lock

@@ -398,6 +398,8 @@ PODS:
     - React-Core
   - RNCAsyncStorage (1.17.11):
     - React-Core
+  - RNCClipboard (1.11.1):
+    - React-Core
   - RNCMaskedView (0.1.11):
     - React
   - RNCPushNotificationIOS (1.10.1):
@@ -529,6 +531,7 @@ DEPENDENCIES:
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
   - rn-fetch-blob (from `../node_modules/rn-fetch-blob`)
   - "RNCAsyncStorage (from `../node_modules/@react-native-async-storage/async-storage`)"
+  - "RNCClipboard (from `../node_modules/@react-native-clipboard/clipboard`)"
   - "RNCMaskedView (from `../node_modules/@react-native-community/masked-view`)"
   - "RNCPushNotificationIOS (from `../node_modules/@react-native-community/push-notification-ios`)"
   - RNDeviceInfo (from `../node_modules/react-native-device-info`)
@@ -664,6 +667,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/rn-fetch-blob"
   RNCAsyncStorage:
     :path: "../node_modules/@react-native-async-storage/async-storage"
+  RNCClipboard:
+    :path: "../node_modules/@react-native-clipboard/clipboard"
   RNCMaskedView:
     :path: "../node_modules/@react-native-community/masked-view"
   RNCPushNotificationIOS:
@@ -749,6 +754,7 @@ SPEC CHECKSUMS:
   ReactCommon: 149e2c0acab9bac61378da0db5b2880a1b5ff59b
   rn-fetch-blob: f525a73a78df9ed5d35e67ea65e79d53c15255bc
   RNCAsyncStorage: 8616bd5a58af409453ea4e1b246521bb76578d60
+  RNCClipboard: 2834e1c4af68697089cdd455ee4a4cdd198fa7dd
   RNCMaskedView: 0e1bc4bfa8365eba5fbbb71e07fbdc0555249489
   RNCPushNotificationIOS: 87b8d16d3ede4532745e05b03c42cff33a36cc45
   RNDeviceInfo: aad3c663b25752a52bf8fce93f2354001dd185aa

jest/jestSetup.js

@@ -5,6 +5,8 @@ import { polyfillGlobal } from 'react-native/Libraries/Utilities/PolyfillFunctio
 import { URL, URLSearchParams } from 'react-native-url-polyfill';
 // $FlowIgnore[untyped-import] - this is not anywhere near critical
 import mockAsyncStorage from '@react-native-async-storage/async-storage/jest/async-storage-mock';
+// $FlowIgnore[untyped-import]
+import mockClipboard from '@react-native-clipboard/clipboard/jest/clipboard-mock';
 
 import { assertUsingFakeTimers } from '../src/__tests__/lib/fakeTimers';
 
@@ -102,6 +104,10 @@ jest.mock('react-native-reanimated', () => {
 
 jest.mock('@react-native-async-storage/async-storage', () => mockAsyncStorage);
 
+// As instructed at
+// https://github.com/react-native-clipboard/clipboard/tree/v1.11.1#mocking-clipboard
+jest.mock('@react-native-clipboard/clipboard', () => mockClipboard);
+
 // We don't try to actually exercise this module in tests; we just test
 // some code in the same module as other code that imports it.  Unmocked,
 // it complains of missing native modules.

package.json

@@ -25,6 +25,7 @@
     "@expo/react-native-action-sheet": "^3.8.0",
     "@react-native-async-storage/async-storage": "~1.17.3",
     "@react-native-camera-roll/camera-roll": "^5.0.4",
+    "@react-native-clipboard/clipboard": "^1.11.1",
     "@react-native-community/masked-view": "^0.1.10",
     "@react-native-community/netinfo": "6.0.0",
     "@react-native-community/push-notification-ios": "^1.5.0",

src/RootErrorBoundary.js

@@ -1,7 +1,8 @@
 /* @flow strict-local */
 import React from 'react';
 import type { Node } from 'react';
-import { View, Text, Clipboard, TextInput, ScrollView, Button, Platform } from 'react-native';
+import { View, Text, TextInput, ScrollView, Button, Platform } from 'react-native';
+import Clipboard from '@react-native-clipboard/clipboard';
 import Toast from 'react-native-simple-toast';
 
 import * as logging from './utils/logging';

src/action-sheets/index.js

@@ -1,5 +1,6 @@
 /* @flow strict-local */
-import { Clipboard, Share, Alert } from 'react-native';
+import { Share, Alert } from 'react-native';
+import Clipboard from '@react-native-clipboard/clipboard';
 import invariant from 'invariant';
 import * as resolved_topic from '@zulip/shared/lib/resolved_topic';
 

src/webview/handleOutboundEvents.js

@@ -1,5 +1,6 @@
 /* @flow strict-local */
-import { Clipboard, Alert } from 'react-native';
+import { Alert } from 'react-native';
+import Clipboard from '@react-native-clipboard/clipboard';
 
 import * as api from '../api';
 import config from '../config';

tools/tsflower

@@ -147,6 +147,10 @@ run_only()
     # TODO get list of packages from data... better yet, make it
     #   one tsflower command, reading a TsFlower config file
 
+    package=@react-native-clipboard/clipboard
+    run_on_package "${package}"
+    format_dir "${rootdir}"/types/"${package}"
+
     package=react-native-document-picker
     run_on_package "${package}"
     format_dir "${rootdir}"/types/"${package}"

types/@react-native-clipboard/clipboard/dist/Clipboard.js.flow

@@ -0,0 +1,24 @@
+/* @flow
+ * @generated by TsFlower
+ */
+import type { EmitterSubscription as $tsflower_subst$RN$EmitterSubscription } from 'tsflower/subst/react-native';
+import 'react-native';
+
+declare export var Clipboard: {
+  getString(): Promise<string>,
+  getStrings(): Promise<string[]>,
+  getImagePNG(): Promise<string>,
+  getImageJPG(): Promise<string>,
+  setImage(content: string): void,
+  getImage(): Promise<string>,
+  setString(content: string): void,
+  setStrings(content: string[]): void,
+  hasString(): any,
+  hasImage(): any,
+  hasURL(): any,
+  hasNumber(): any,
+  hasWebURL(): any,
+  addListener(callback: () => void): $tsflower_subst$RN$EmitterSubscription,
+  removeAllListeners(): void,
+  ...
+};

types/@react-native-clipboard/clipboard/dist/NativeClipboard.js.flow

@@ -0,0 +1,10 @@
+/* @flow
+ * @generated by TsFlower
+ */
+import type { EmitterSubscription as $tsflower_subst$RN$EmitterSubscription } from 'tsflower/subst/react-native';
+import 'react-native';
+declare var _default: any;
+export default _default;
+declare var addListener: (callback: () => void) => $tsflower_subst$RN$EmitterSubscription;
+declare var removeAllListeners: () => void;
+export { addListener, removeAllListeners };