feat: migrate to bluesky-social/react-native-bottom-sheet (#5769)

* feat: migrate to bluesky-social/react-native-bottom-sheet * feat: adds accessibility to action sheet items * test: fix tests * fix lint * fix types
RocketChat · Jul 8, 2024 · 1c540ad · 1c540ad
1 parent fc0b304
commit 1c540ad
Show file tree

Hide file tree

Showing 10 changed files with 67 additions and 47 deletions.
diff --git a/app/containers/ActionSheet/ActionSheet.tsx b/app/containers/ActionSheet/ActionSheet.tsx
@@ -3,7 +3,7 @@ import * as Haptics from 'expo-haptics';
 import React, { forwardRef, isValidElement, useEffect, useImperativeHandle, useRef, useState, useCallback } from 'react';
 import { Keyboard, LayoutChangeEvent, useWindowDimensions } from 'react-native';
 import { Easing, useDerivedValue, useSharedValue } from 'react-native-reanimated';
-import BottomSheet, { BottomSheetBackdrop, BottomSheetBackdropProps } from '@gorhom/bottom-sheet';
+import BottomSheet, { BottomSheetBackdrop, BottomSheetBackdropProps } from '@discord/bottom-sheet';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { useTheme } from '../../theme';

diff --git a/app/containers/ActionSheet/BottomSheetContent.tsx b/app/containers/ActionSheet/BottomSheetContent.tsx
@@ -1,6 +1,6 @@
 import { Text, ViewProps } from 'react-native';
 import React from 'react';
-import { BottomSheetView, BottomSheetFlatList } from '@gorhom/bottom-sheet';
+import { BottomSheetView, BottomSheetFlatList } from '@discord/bottom-sheet';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import I18n from '../../i18n';

diff --git a/app/containers/ActionSheet/Item.tsx b/app/containers/ActionSheet/Item.tsx
@@ -36,14 +36,16 @@ export const Item = React.memo(({ item, hide }: IActionSheetItem) => {
 	}
 
 	return (
-		<Touch onPress={onPress} style={[styles.item, { backgroundColor: colors.surfaceLight }]} testID={item.testID}>
-			{item.icon ? <CustomIcon name={item.icon} size={20} color={color} /> : null}
-			<View style={styles.titleContainer}>
-				<Text numberOfLines={1} style={[styles.title, { color, marginLeft: item.icon ? 16 : 0 }]}>
-					{item.title}
-				</Text>
-			</View>
-			{item.right ? <View style={styles.rightContainer}>{item.right ? item.right() : null}</View> : null}
-		</Touch>
+		<View accessible accessibilityLabel={item.title}>
+			<Touch onPress={onPress} style={[styles.item, { backgroundColor: colors.surfaceLight }]} testID={item.testID}>
+				{item.icon ? <CustomIcon name={item.icon} size={20} color={color} /> : null}
+				<View style={styles.titleContainer}>
+					<Text numberOfLines={1} style={[styles.title, { color, marginLeft: item.icon ? 16 : 0 }]}>
+						{item.title}
+					</Text>
+				</View>
+				{item.right ? <View style={styles.rightContainer}>{item.right ? item.right() : null}</View> : null}
+			</Touch>
+		</View>
 	);
 });
diff --git a/app/containers/MessageActions/Header.tsx b/app/containers/MessageActions/Header.tsx
@@ -65,8 +65,7 @@ const HeaderItem = ({ item, onReaction, theme }: THeaderItem) => (
 	<Touch
 		testID={`message-actions-emoji-${item}`}
 		onPress={() => onReaction({ emoji: item })}
-		style={[styles.headerItem, { backgroundColor: themes[theme].surfaceHover }]}
-	>
+		style={[styles.headerItem, { backgroundColor: themes[theme].surfaceHover }]}>
 		{typeof item === 'string' ? (
 			<Text style={styles.headerIcon}>{shortnameToUnicode(`:${item}:`)}</Text>
 		) : (
@@ -79,8 +78,7 @@ const HeaderFooter = ({ onReaction, theme }: THeaderFooter) => (
 	<Touch
 		testID='add-reaction'
 		onPress={(param: any) => onReaction(param)}
-		style={[styles.headerItem, { backgroundColor: themes[theme].surfaceHover }]}
-	>
+		style={[styles.headerItem, { backgroundColor: themes[theme].surfaceHover }]}>
 		<CustomIcon name='reaction-add' size={24} />
 	</Touch>
 );

diff --git a/app/containers/TextInput/FormTextInput.tsx b/app/containers/TextInput/FormTextInput.tsx
@@ -1,4 +1,4 @@
-import { BottomSheetTextInput } from '@gorhom/bottom-sheet';
+import { BottomSheetTextInput } from '@discord/bottom-sheet';
 import React, { useState } from 'react';
 import { StyleProp, StyleSheet, Text, TextInput as RNTextInput, TextInputProps, TextStyle, View, ViewStyle } from 'react-native';
 import Touchable from 'react-native-platform-touchable';

diff --git a/jest.setup.js b/jest.setup.js
@@ -106,7 +106,7 @@ jest.mock('react-native-notifications', () => ({
 	}
 }));
 
-jest.mock('@gorhom/bottom-sheet', () => {
+jest.mock('@discord/bottom-sheet', () => {
 	const react = require('react-native');
 	return {
 		__esModule: true,

diff --git a/package.json b/package.json
@@ -30,7 +30,7 @@
 	"dependencies": {
 		"@bugsnag/react-native": "^7.10.5",
 		"@codler/react-native-keyboard-aware-scroll-view": "2.0.1",
-		"@gorhom/bottom-sheet": "^4.6.1",
+		"@discord/bottom-sheet": "bluesky-social/react-native-bottom-sheet",
 		"@hookform/resolvers": "^2.9.10",
 		"@notifee/react-native": "7.8.2",
 		"@nozbe/watermelondb": "0.25.5",
@@ -175,6 +175,7 @@
 		"@types/bytebuffer": "^5.0.44",
 		"@types/ejson": "^2.1.3",
 		"@types/i18n-js": "^3.8.3",
+		"@types/invariant": "^2.2.37",
 		"@types/jest": "^29.5.12",
 		"@types/jsrsasign": "^10.5.8",
 		"@types/lodash": "^4.14.188",

diff --git a/patches/@discord+bottom-sheet+4.6.1.patch b/patches/@discord+bottom-sheet+4.6.1.patch
@@ -0,0 +1,36 @@
+diff --git a/node_modules/@discord/bottom-sheet/src/components/bottomSheetHandleContainer/BottomSheetHandleContainer.tsx b/node_modules/@discord/bottom-sheet/src/components/bottomSheetHandleContainer/BottomSheetHandleContainer.tsx
+index 2219e0f..59f90ba 100644
+--- a/node_modules/@discord/bottom-sheet/src/components/bottomSheetHandleContainer/BottomSheetHandleContainer.tsx
++++ b/node_modules/@discord/bottom-sheet/src/components/bottomSheetHandleContainer/BottomSheetHandleContainer.tsx
+@@ -92,10 +92,6 @@ function BottomSheetHandleContainerComponent({
+     >
+       <Animated.View
+         key="BottomSheetHandleContainer"
+-        accessible={true}
+-        accessibilityRole="adjustable"
+-        accessibilityLabel="Bottom Sheet handle"
+-        accessibilityHint="Drag up or down to extend or minimize the Bottom Sheet"
+         onLayout={handleContainerLayout}
+       >
+         <HandleComponent
+diff --git a/node_modules/@discord/bottom-sheet/src/utilities/animate.ts b/node_modules/@discord/bottom-sheet/src/utilities/animate.ts
+index 0ce4c9a..9562675 100644
+--- a/node_modules/@discord/bottom-sheet/src/utilities/animate.ts
++++ b/node_modules/@discord/bottom-sheet/src/utilities/animate.ts
+@@ -4,6 +4,7 @@ import {
+   withTiming,
+   withSpring,
+   AnimationCallback,
++  ReduceMotion,
+ } from 'react-native-reanimated';
+ import { ANIMATION_CONFIGS, ANIMATION_METHOD } from '../constants';
+
+@@ -26,6 +27,8 @@ export const animate = ({
+     configs = ANIMATION_CONFIGS;
+   }
+
++  configs.reduceMotion = ReduceMotion.Never;
++
+   // detect animation type
+   const type =
+     'duration' in configs || 'easing' in configs
diff --git a/patches/@gorhom+bottom-sheet+4.6.1.patch b/patches/@gorhom+bottom-sheet+4.6.1.patch
diff --git a/yarn.lock b/yarn.lock
@@ -2330,6 +2330,13 @@
   dependencies:
     "@jridgewell/trace-mapping" "0.3.9"
 
+"@discord/bottom-sheet@bluesky-social/react-native-bottom-sheet":
+  version "4.6.1"
+  resolved "https://codeload.github.com/bluesky-social/react-native-bottom-sheet/tar.gz/28a87d1bb55e10fc355fa1455545a30734995908"
+  dependencies:
+    "@gorhom/portal" "1.0.14"
+    invariant "^2.2.4"
+
 "@egjs/hammerjs@^2.0.17":
   version "2.0.17"
   resolved "https://registry.yarnpkg.com/@egjs/hammerjs/-/hammerjs-2.0.17.tgz#5dc02af75a6a06e4c2db0202cae38c9263895124"
@@ -2831,14 +2838,6 @@
   resolved "https://registry.yarnpkg.com/@gar/promisify/-/promisify-1.1.3.tgz#555193ab2e3bb3b6adc3d551c9c030d9e860daf6"
   integrity sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw==
 
-"@gorhom/bottom-sheet@^4.6.1":
-  version "4.6.1"
-  resolved "https://registry.yarnpkg.com/@gorhom/bottom-sheet/-/bottom-sheet-4.6.1.tgz#e45e2183246e338cf732fe4f8f2c91875b22ddce"
-  integrity sha512-sXqsYqX1/rAbmCC5fb9o6hwSF3KXriC0EGUGvLlhFvjaEEMBrRKFTNndiluRK1HmpUzazVaYdTm/lLkSiA2ooQ==
-  dependencies:
-    "@gorhom/portal" "1.0.14"
-    invariant "^2.2.4"
-
 "@gorhom/[email protected]":
   version "1.0.14"
   resolved "https://registry.yarnpkg.com/@gorhom/portal/-/portal-1.0.14.tgz#1953edb76aaba80fb24021dc774550194a18e111"
@@ -4318,6 +4317,11 @@
   resolved "https://registry.yarnpkg.com/@types/i18n-js/-/i18n-js-3.8.9.tgz#074d1389539d2db992e6afd7eb379aa02929ef93"
   integrity sha512-bSxgya4x5O+x+QhfCGckiDDE+17XGPp1TNBgBA/vfF5EwdiZC70F4cKG5QK2v44+v62oY7/t/InreRhxskulcA==
 
+"@types/invariant@^2.2.37":
+  version "2.2.37"
+  resolved "https://registry.yarnpkg.com/@types/invariant/-/invariant-2.2.37.tgz#1709741e534364d653c87dff22fc76fa94aa7bc0"
+  integrity sha512-IwpIMieE55oGWiXkQPSBY1nw1nFs6bsKXTFskNY8sdS17K24vyEBRQZEwlRS7ZmXCWnJcQtbxWzly+cODWGs2A==
+
 "@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0", "@types/istanbul-lib-coverage@^2.0.1":
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.6.tgz#7739c232a1fee9b4d3ce8985f314c0c6d33549d7"