Replace deprecated Clipboard core module

The `Clipboard` module was marked as deprecated and will be removed from React Native core. React Native documentation recommends relying upon the community package instead. ``` WARN Clipboard has been extracted from react-native core and will be removed in a future release. It can now be installed and imported from '@react-native-clipboard/clipboard' instead of 'react-native'. See https://github.com/react-native-clipboard/clipboard ```
WordPress · Nov 9, 2021 · c9d4440 · c9d4440
1 parent 0c04cb2
commit c9d4440
Show file tree

Hide file tree

Showing 9 changed files with 26 additions and 8 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/block-library/src/embed/test/index.native.js b/packages/block-library/src/embed/test/index.native.js
@@ -8,7 +8,8 @@ import {
 	waitFor,
 	within,
 } from 'test/helpers';
-import { Clipboard, Platform } from 'react-native';
+import { Platform } from 'react-native';
+import Clipboard from '@react-native-clipboard/clipboard';
 
 /**
  * WordPress dependencies

diff --git a/packages/block-library/src/file/edit.native.js b/packages/block-library/src/file/edit.native.js
@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { View, Clipboard, TouchableWithoutFeedback, Text } from 'react-native';
+import { View, TouchableWithoutFeedback, Text } from 'react-native';
+import Clipboard from '@react-native-clipboard/clipboard';
 
 /**
  * WordPress dependencies

diff --git a/packages/components/src/mobile/link-settings/index.native.js b/packages/components/src/mobile/link-settings/index.native.js
@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { Platform, Clipboard } from 'react-native';
+import { Platform } from 'react-native';
+import Clipboard from '@react-native-clipboard/clipboard';
 /**
  * WordPress dependencies
  */

diff --git a/packages/format-library/src/link/index.native.js b/packages/format-library/src/link/index.native.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { find } from 'lodash';
-import { Clipboard } from 'react-native';
+import Clipboard from '@react-native-clipboard/clipboard';
 
 /**
  * WordPress dependencies

diff --git a/packages/react-native-editor/ios/GutenbergDemo.xcodeproj/project.pbxproj b/packages/react-native-editor/ios/GutenbergDemo.xcodeproj/project.pbxproj
@@ -335,6 +335,7 @@
 				"${BUILT_PRODUCTS_DIR}/Gutenberg/Gutenberg.framework",
 				"${BUILT_PRODUCTS_DIR}/RCT-Folly/folly.framework",
 				"${BUILT_PRODUCTS_DIR}/RCTTypeSafety/RCTTypeSafety.framework",
+				"${BUILT_PRODUCTS_DIR}/RNCClipboard/RNCClipboard.framework",
 				"${BUILT_PRODUCTS_DIR}/RNCMaskedView/RNCMaskedView.framework",
 				"${BUILT_PRODUCTS_DIR}/RNGestureHandler/RNGestureHandler.framework",
 				"${BUILT_PRODUCTS_DIR}/RNReanimated/RNReanimated.framework",
@@ -378,6 +379,7 @@
 				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/Gutenberg.framework",
 				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/folly.framework",
 				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RCTTypeSafety.framework",
+				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RNCClipboard.framework",
 				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RNCMaskedView.framework",
 				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RNGestureHandler.framework",
 				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RNReanimated.framework",
@@ -453,6 +455,7 @@
 				"${BUILT_PRODUCTS_DIR}/Gutenberg/Gutenberg.framework",
 				"${BUILT_PRODUCTS_DIR}/RCT-Folly/folly.framework",
 				"${BUILT_PRODUCTS_DIR}/RCTTypeSafety/RCTTypeSafety.framework",
+				"${BUILT_PRODUCTS_DIR}/RNCClipboard/RNCClipboard.framework",
 				"${BUILT_PRODUCTS_DIR}/RNCMaskedView/RNCMaskedView.framework",
 				"${BUILT_PRODUCTS_DIR}/RNGestureHandler/RNGestureHandler.framework",
 				"${BUILT_PRODUCTS_DIR}/RNReanimated/RNReanimated.framework",
@@ -496,6 +499,7 @@
 				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/Gutenberg.framework",
 				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/folly.framework",
 				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RCTTypeSafety.framework",
+				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RNCClipboard.framework",
 				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RNCMaskedView.framework",
 				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RNGestureHandler.framework",
 				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RNReanimated.framework",

diff --git a/packages/react-native-editor/ios/Podfile.lock b/packages/react-native-editor/ios/Podfile.lock
@@ -300,6 +300,8 @@ PODS:
     - React-jsi (= 0.66.2)
     - React-logger (= 0.66.2)
     - React-perflogger (= 0.66.2)
+  - RNCClipboard (1.9.0):
+    - React-Core
   - RNCMaskedView (0.1.11-wp-1):
     - React-Core
   - RNGestureHandler (1.10.1-wp-3):
@@ -358,6 +360,7 @@ DEPENDENCIES:
   - React-RCTVibration (from `../../../node_modules/react-native/Libraries/Vibration`)
   - React-runtimeexecutor (from `../../../node_modules/react-native/ReactCommon/runtimeexecutor`)
   - ReactCommon/turbomodule/core (from `../../../node_modules/react-native/ReactCommon`)
+  - "RNCClipboard (from `../../../node_modules/@react-native-clipboard/clipboard`)"
   - "RNCMaskedView (from `../../../node_modules/@react-native-community/masked-view`)"
   - RNGestureHandler (from `../../../node_modules/react-native-gesture-handler`)
   - RNReanimated (from `../../../node_modules/react-native-reanimated`)
@@ -450,6 +453,8 @@ EXTERNAL SOURCES:
     :path: "../../../node_modules/react-native/ReactCommon/runtimeexecutor"
   ReactCommon:
     :path: "../../../node_modules/react-native/ReactCommon"
+  RNCClipboard:
+    :path: "../../../node_modules/@react-native-clipboard/clipboard"
   RNCMaskedView:
     :path: "../../../node_modules/@react-native-community/masked-view"
   RNGestureHandler:
@@ -506,6 +511,7 @@ SPEC CHECKSUMS:
   React-RCTVibration: 3e815c3d2dd2e0e931b68595b5b92d23ba38b3fb
   React-runtimeexecutor: 393e26602c1b248683372051e34db63e359e3b01
   ReactCommon: c0263c1a41509aeb94be3214fa7bc3b71eae5ef6
+  RNCClipboard: f49f3de56b40d0f4104680dabadc7a1f063f4fd4
   RNCMaskedView: 6e11973b8b52c3157f93a594bf8a5c89cacc93ba
   RNGestureHandler: a9e943d7058aa16347895e32c9734e22f09e74a7
   RNReanimated: 39a9478eb635667c9a4da08ac906add9901b145e

diff --git a/packages/react-native-editor/package.json b/packages/react-native-editor/package.json
@@ -30,6 +30,7 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.13.10",
+		"@react-native-clipboard/clipboard": "1.9.0",
 		"@react-native-community/blur": "3.6.0",
 		"@react-native-community/masked-view": "https://raw.githubusercontent.com/wordpress-mobile/react-native-masked-view/f204c270ecd7c63ddea3449ba829d2415076faa2/react-native-community-masked-view-0.1.11-wp-1.tgz",
 		"@react-native-community/slider": "https://raw.githubusercontent.com/wordpress-mobile/react-native-slider/851dbc78d015afa55ad1e526c6d14bb86399722b/react-native-community-slider-3.0.2-wp-1.tgz",

diff --git a/test/native/setup.js b/test/native/setup.js
@@ -3,6 +3,7 @@
  */
 import 'react-native-gesture-handler/jestSetup';
 import { NativeModules as RNNativeModules } from 'react-native';
+import mockClipboard from '@react-native-clipboard/clipboard/jest/clipboard-mock.js';
 
 RNNativeModules.UIManager = RNNativeModules.UIManager || {};
 RNNativeModules.UIManager.RCTView = RNNativeModules.UIManager.RCTView || {};
@@ -175,11 +176,8 @@ jest.mock(
 		} ) ),
 	} )
 );
-jest.mock( 'react-native/Libraries/Components/Clipboard/Clipboard', () => ( {
-	getString: jest.fn( () => Promise.resolve( '' ) ),
-	setString: jest.fn(),
-} ) );
 
+jest.mock( '@react-native-clipboard/clipboard', () => mockClipboard );
 // Silences the warning: dispatchCommand was called with a ref that isn't a native
 // component. Use React.forwardRef to get access to the underlying native component.
 // This is a known bug of react-native-testing-library package: