feat: basic setup react-native-true-sheet

Author: OtavioStasiak

app/containers/ActionSheet/ActionSheet.tsx

@@ -1,98 +1,36 @@
 import { useBackHandler } from '@react-native-community/hooks';
 import * as Haptics from 'expo-haptics';
-import React, { forwardRef, isValidElement, useEffect, useImperativeHandle, useRef, useState, useCallback } from 'react';
-import { Keyboard, type LayoutChangeEvent, useWindowDimensions } from 'react-native';
-import { Easing, useDerivedValue, useSharedValue } from 'react-native-reanimated';
-import BottomSheet, { BottomSheetBackdrop, type BottomSheetBackdropProps } from '@discord/bottom-sheet';
+import React, { forwardRef, isValidElement, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { Keyboard, useWindowDimensions } from 'react-native';
+import { TrueSheet } from '@lodev09/react-native-true-sheet';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { useTheme } from '../../theme';
-import { isIOS, isTablet } from '../../lib/methods/helpers';
+import { isTablet } from '../../lib/methods/helpers';
 import { Handle } from './Handle';
 import { type TActionSheetOptions } from './Provider';
 import BottomSheetContent from './BottomSheetContent';
 import styles from './styles';
 
 export const ACTION_SHEET_ANIMATION_DURATION = 250;
-const HANDLE_HEIGHT = 28;
-const CANCEL_HEIGHT = 64;
-
-const ANIMATION_CONFIG = {
-	duration: ACTION_SHEET_ANIMATION_DURATION,
-	// https://easings.net/#easeInOutCubic
-	easing: Easing.bezier(0.645, 0.045, 0.355, 1.0)
-};
 
 const ActionSheet = React.memo(
 	forwardRef(({ children }: { children: React.ReactElement }, ref) => {
 		const { colors } = useTheme();
 		const { height: windowHeight } = useWindowDimensions();
-		const { bottom, right, left } = useSafeAreaInsets();
-		const { fontScale } = useWindowDimensions();
-		const itemHeight = 48 * fontScale;
-		const bottomSheetRef = useRef<BottomSheet>(null);
+		const { right, left } = useSafeAreaInsets();
+		const sheetRef = useRef<TrueSheet>(null);
 		const [data, setData] = useState<TActionSheetOptions>({} as TActionSheetOptions);
 		const [isVisible, setVisible] = useState(false);
-		const animatedContentHeight = useSharedValue(0);
-		const animatedHandleHeight = useSharedValue(0);
-		const animatedDataSnaps = useSharedValue<TActionSheetOptions['snaps']>([]);
-		const animatedSnapPoints = useDerivedValue(() => {
-			if (animatedDataSnaps.value?.length) {
-				return animatedDataSnaps.value;
-			}
-			const contentWithHandleHeight = animatedContentHeight.value + animatedHandleHeight.value;
-			// Bottom sheet requires a default value to work
-			if (contentWithHandleHeight === 0) {
-				return ['25%'];
-			}
-			return [contentWithHandleHeight];
-		}, [data]);
-
-		const handleContentLayout = useCallback(
-			({
-				nativeEvent: {
-					layout: { height }
-				}
-			}: LayoutChangeEvent) => {
-				/**
-				 * This logic is only necessary to prevent the action sheet from
-				 * occupying the entire screen when the dynamic content is too big.
-				 */
-				animatedContentHeight.value = Math.min(height, windowHeight * 0.8);
-			},
-			[animatedContentHeight, windowHeight]
-		);
-
-		const maxSnap = Math.min(
-			(itemHeight + 0.5) * (data?.options?.length || 0) +
-				HANDLE_HEIGHT +
-				// Custom header height
-				(data?.headerHeight || 0) +
-				// Insets bottom height (Notch devices)
-				bottom +
-				// Cancel button height
-				(data?.hasCancel ? CANCEL_HEIGHT : 0),
-			windowHeight * 0.8
-		);
-
-		/*
-		 * if the action sheet cover more than 60% of the screen height,
-		 * we'll provide more one snap of 50%
-		 */
-		const snaps = maxSnap > windowHeight * 0.6 && !data.snaps ? ['50%', maxSnap] : [maxSnap];
-
-		const toggleVisible = () => setVisible(!isVisible);
 
 		const hide = () => {
-			bottomSheetRef.current?.close();
+			sheetRef.current?.dismiss();
 		};
 
 		const show = (options: TActionSheetOptions) => {
 			setData(options);
-			if (options.snaps?.length) {
-				animatedDataSnaps.value = options.snaps;
-			}
-			toggleVisible();
+			setVisible(true);
+			sheetRef.current?.present(0);
 		};
 
 		useBackHandler(() => {
@@ -114,69 +52,43 @@ const ActionSheet = React.memo(
 			hideActionSheet: hide
 		}));
 
-		const renderHandle = () => (
+		const renderHeader = () => (
 			<>
 				<Handle />
 				{isValidElement(data?.customHeader) ? data.customHeader : null}
 			</>
 		);
 
-		const onClose = () => {
-			toggleVisible();
-			data?.onClose && data?.onClose();
-			animatedDataSnaps.value = [];
+		const onDidDismiss = () => {
+			setVisible(false);
+			data?.onClose?.();
 		};
 
-		const renderBackdrop = useCallback(
-			(props: BottomSheetBackdropProps) => (
-				<BottomSheetBackdrop
-					{...props}
-					appearsOnIndex={0}
-					// Backdrop should be visible all the time bottom sheet is open
-					disappearsOnIndex={-1}
-					opacity={colors.backdropOpacity}
-				/>
-			),
-			[]
-		);
-
-		const bottomSheet = isTablet ? styles.bottomSheet : { marginRight: right, marginLeft: left };
-
-		// Must need this prop to avoid keyboard dismiss
-		// when is android tablet and the input text is focused
-		const androidTablet: any = isTablet && !isIOS ? { android_keyboardInputMode: 'adjustResize' } : {};
+		const bottomSheetStyle = isTablet ? styles.bottomSheet : { marginRight: right, marginLeft: left };
 
 		return (
 			<>
 				{children}
-				{isVisible && (
-					<BottomSheet
-						ref={bottomSheetRef}
-						// If data.options exist, we calculate snaps to be precise, otherwise we cal
-						snapPoints={data.options?.length ? snaps : animatedSnapPoints}
-						handleHeight={animatedHandleHeight}
-						// We need undefined to enable vertical swipe gesture inside the bottom sheet like in reaction picker
-						contentHeight={data.snaps?.length || data.options?.length ? undefined : animatedContentHeight}
-						animationConfigs={ANIMATION_CONFIG}
-						animateOnMount={true}
-						backdropComponent={renderBackdrop}
-						handleComponent={renderHandle}
-						enablePanDownToClose
-						style={{ ...styles.container, ...bottomSheet }}
-						backgroundStyle={{ backgroundColor: colors.surfaceLight }}
-						onChange={index => index === -1 && onClose()}
-						// We need this to allow horizontal swipe gesture inside the bottom sheet like in reaction picker
-						enableContentPanningGesture={data?.enableContentPanningGesture ?? true}
-						{...androidTablet}>
-						<BottomSheetContent
-							options={data?.options}
-							hide={hide}
-							children={data?.children}
-							hasCancel={data?.hasCancel}
-							onLayout={handleContentLayout}
-						/>
-					</BottomSheet>
-				)}
+				<TrueSheet
+					ref={sheetRef}
+					detents={['auto']}
+					maxHeight={windowHeight * 0.8}
+					backgroundColor={colors.surfaceLight}
+					cornerRadius={16}
+					dimmed
+					grabber={false}
+					header={renderHeader()}
+					scrollable={!!data?.options}
+					style={[styles.container, bottomSheetStyle]}
+					onDidDismiss={onDidDismiss}>
+					<BottomSheetContent
+						options={data?.options}
+						hide={hide}
+						children={data?.children}
+						hasCancel={data?.hasCancel}
+						onLayout={() => {}}
+					/>
+				</TrueSheet>
 			</>
 		);
 	})

app/containers/ActionSheet/BottomSheetContent.tsx

@@ -1,10 +1,10 @@
-import { Text, useWindowDimensions, type ViewProps } from 'react-native';
+import { FlatList, Text, useWindowDimensions, View, type ViewProps } from 'react-native';
 import React from 'react';
-import { BottomSheetView, BottomSheetFlatList } from '@discord/bottom-sheet';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import I18n from '../../i18n';
 import { useTheme } from '../../theme';
+import { isAndroid } from '../../lib/methods/helpers';
 import { type IActionSheetItem, Item } from './Item';
 import { type TActionSheetOptionsItem } from './Provider';
 import styles from './styles';
@@ -41,7 +41,7 @@ const BottomSheetContent = React.memo(({ options, hasCancel, hide, children, onL
 
 	if (options) {
 		return (
-			<BottomSheetFlatList
+			<FlatList
 				testID='action-sheet'
 				data={options}
 				refreshing={false}
@@ -56,13 +56,14 @@ const BottomSheetContent = React.memo(({ options, hasCancel, hide, children, onL
 				ListHeaderComponent={List.Separator}
 				ListFooterComponent={renderFooter}
 				onLayout={onLayout}
+				nestedScrollEnabled={isAndroid}
 			/>
 		);
 	}
 	return (
-		<BottomSheetView testID='action-sheet' style={styles.contentContainer} onLayout={onLayout}>
+		<View testID='action-sheet' style={styles.contentContainer} onLayout={onLayout}>
 			{children}
-		</BottomSheetView>
+		</View>
 	);
 });
 

app/containers/TextInput/FormTextInput.tsx

@@ -9,7 +9,6 @@ import {
 	View,
 	type ViewStyle
 } from 'react-native';
-import { BottomSheetTextInput } from '@discord/bottom-sheet';
 import Touchable from 'react-native-platform-touchable';
 import { A11y } from 'react-native-a11y-order';
 
@@ -124,7 +123,7 @@ export const FormTextInput = ({
 	const { colors } = useTheme();
 	const [showPassword, setShowPassword] = useState(false);
 	const showClearInput = onClearInput && value && value.length > 0;
-	const Input = bottomSheet ? BottomSheetTextInput : TextInput;
+	const Input = TextInput;
 
 	const inputError = getInputError(error);
 	const accessibilityLabelText = useMemo(() => {

ios/Podfile.lock

@@ -2606,6 +2606,30 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
+  - RNTrueSheet (3.6.11):
+    - DoubleConversion
+    - glog
+    - hermes-engine
+    - RCT-Folly (= 2024.11.18.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-hermes
+    - React-ImageManager
+    - React-jsi
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-renderercss
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - Yoga
   - SDWebImage (5.21.0):
     - SDWebImage/Core (= 5.21.0)
   - SDWebImage/Core (5.21.0)
@@ -2754,6 +2778,7 @@ DEPENDENCIES:
   - RNReanimated (from `../node_modules/react-native-reanimated`)
   - RNScreens (from `../node_modules/react-native-screens`)
   - RNSVG (from `../node_modules/react-native-svg`)
+  - "RNTrueSheet (from `../node_modules/@lodev09/react-native-true-sheet`)"
   - "simdjson (from `../node_modules/@nozbe/simdjson`)"
   - "WatermelonDB (from `../node_modules/@nozbe/watermelondb`)"
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
@@ -3030,6 +3055,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-screens"
   RNSVG:
     :path: "../node_modules/react-native-svg"
+  RNTrueSheet:
+    :path: "../node_modules/@lodev09/react-native-true-sheet"
   simdjson:
     :path: "../node_modules/@nozbe/simdjson"
   WatermelonDB:
@@ -3086,7 +3113,7 @@ SPEC CHECKSUMS:
   nanopb: fad817b59e0457d11a5dfbde799381cd727c1275
   PromisesObjC: f5707f49cb48b9636751c5b2e7d227e43fba9f47
   PromisesSwift: 9d77319bbe72ebf6d872900551f7eeba9bce2851
-  RCT-Folly: e78785aa9ba2ed998ea4151e314036f6c49e6d82
+  RCT-Folly: 36fe2295e44b10d831836cc0d1daec5f8abcf809
   RCTDeprecation: 0418ac97b9f53b2e37f473da1663ef3061e46beb
   RCTRequired: b9fde7f981b11aa898f03a70d3d4d36b80f1b16d
   RCTTypeSafety: 397515ea9a8122b62a7a310adf30205f0a5e3bfc
@@ -3177,6 +3204,7 @@ SPEC CHECKSUMS:
   RNReanimated: f52ccd5ceea2bae48d7421eec89b3f0c10d7b642
   RNScreens: b13e4c45f0406f33986a39c0d8da0324bff94435
   RNSVG: 680e961f640e381aab730a04b2371969686ed9f7
+  RNTrueSheet: c32094ce4b285bf7f5208c10d9a84ab867fe2207
   SDWebImage: f84b0feeb08d2d11e6a9b843cb06d75ebf5b8868
   SDWebImageAVIFCoder: 00310d246aab3232ce77f1d8f0076f8c4b021d90
   SDWebImageSVGCoder: 15a300a97ec1c8ac958f009c02220ac0402e936c

jest.setup.js

@@ -155,12 +155,22 @@ jest.mock('expo-device', () => ({
 	isDevice: true
 }));
 
-jest.mock('@discord/bottom-sheet', () => {
-	const react = require('react-native');
+jest.mock('@lodev09/react-native-true-sheet', () => {
+	const React = require('react');
+	const { View } = require('react-native');
+	const TrueSheet = React.forwardRef((props, ref) => {
+		React.useImperativeHandle(ref, () => ({
+			present: () => Promise.resolve(),
+			dismiss: () => Promise.resolve(),
+			resize: () => Promise.resolve()
+		}));
+		return <View {...props} />;
+	});
+	TrueSheet.displayName = 'TrueSheet';
 	return {
 		__esModule: true,
-		default: react.View,
-		BottomSheetScrollView: react.ScrollView
+		TrueSheet,
+		TrueSheetProvider: ({ children }) => children
 	};
 });
 

package.json

@@ -25,7 +25,7 @@
 	},
 	"dependencies": {
 		"@bugsnag/react-native": "8.4.0",
-		"@discord/bottom-sheet": "bluesky-social/react-native-bottom-sheet",
+		"@lodev09/react-native-true-sheet": "~3.6.0",
 		"@expo/vector-icons": "^14.1.0",
 		"@hookform/resolvers": "^2.9.10",
 		"@nozbe/watermelondb": "^0.28.1-0",