Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix bottom sheet zindex issues #6453

Merged
merged 6 commits into from
Jan 1, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
95 changes: 68 additions & 27 deletions client/ios/Podfile.lock
Original file line number Diff line number Diff line change
Expand Up @@ -2100,9 +2100,9 @@ PODS:
- React-Core
- react-native-idle-timer (2.2.3):
- React-Core
- react-native-netinfo (11.3.2):
- react-native-netinfo (11.4.1):
- React-Core
- react-native-safe-area-context (4.10.9):
- react-native-safe-area-context (4.14.0):
- React-Core
- react-native-volume-manager (1.10.0):
- Mute
Expand Down Expand Up @@ -2368,7 +2368,7 @@ PODS:
- React-Core
- RNDateTimePicker (8.2.0):
- React-Core
- RNDeviceInfo (11.1.0):
- RNDeviceInfo (14.0.2):
- React-Core
- RNFBApp (20.3.0):
- Firebase/CoreOnly (= 10.29.0)
Expand All @@ -2391,7 +2391,7 @@ PODS:
- Firebase/Storage (= 10.29.0)
- React-Core
- RNFBApp
- RNGestureHandler (2.20.0):
- RNGestureHandler (2.21.2):
- DoubleConversion
- glog
- hermes-engine
Expand All @@ -2412,29 +2412,71 @@ PODS:
- ReactCommon/turbomodule/bridging
- ReactCommon/turbomodule/core
- Yoga
- RNImageCropPicker (0.41.2):
- RNImageCropPicker (0.41.6):
- React-Core
- React-RCTImage
- RNImageCropPicker/QBImagePickerController (= 0.41.2)
- RNImageCropPicker/QBImagePickerController (= 0.41.6)
- TOCropViewController (~> 2.7.4)
- RNImageCropPicker/QBImagePickerController (0.41.2):
- RNImageCropPicker/QBImagePickerController (0.41.6):
- React-Core
- React-RCTImage
- TOCropViewController (~> 2.7.4)
- RNLocalize (3.2.1):
- React-Core
- RNNotifee (9.1.1):
- RNNotifee (9.1.3):
- React-Core
- RNNotifee/NotifeeCore (= 9.1.1)
- RNNotifee/NotifeeCore (9.1.1):
- RNNotifee/NotifeeCore (= 9.1.3)
- RNNotifee/NotifeeCore (9.1.3):
- React-Core
- RNPermissions (4.1.5):
- React-Core
- RNRate (1.2.12):
- React-Core
- RNReactNativeHapticFeedback (2.2.0):
- RNReactNativeHapticFeedback (2.3.3):
- DoubleConversion
- glog
- hermes-engine
- RCT-Folly (= 2024.01.01.00)
- RCTRequired
- RCTTypeSafety
- React-Codegen
- React-Core
- RNReanimated (3.15.4):
- React-debug
- React-Fabric
- React-featureflags
- React-graphics
- React-ImageManager
- React-NativeModulesApple
- React-RCTFabric
- React-rendererdebug
- React-utils
- ReactCommon/turbomodule/bridging
- ReactCommon/turbomodule/core
- Yoga
- RNReanimated (3.16.4):
- DoubleConversion
- glog
- hermes-engine
- RCT-Folly (= 2024.01.01.00)
- RCTRequired
- RCTTypeSafety
- React-Codegen
- React-Core
- React-debug
- React-Fabric
- React-featureflags
- React-graphics
- React-ImageManager
- React-NativeModulesApple
- React-RCTFabric
- React-rendererdebug
- React-utils
- ReactCommon/turbomodule/bridging
- ReactCommon/turbomodule/core
- RNReanimated/reanimated (= 3.16.4)
- RNReanimated/worklets (= 3.16.4)
- Yoga
- RNReanimated/reanimated (3.16.4):
- DoubleConversion
- glog
- hermes-engine
Expand All @@ -2454,10 +2496,9 @@ PODS:
- React-utils
- ReactCommon/turbomodule/bridging
- ReactCommon/turbomodule/core
- RNReanimated/reanimated (= 3.15.4)
- RNReanimated/worklets (= 3.15.4)
- RNReanimated/reanimated/apple (= 3.16.4)
- Yoga
- RNReanimated/reanimated (3.15.4):
- RNReanimated/reanimated/apple (3.16.4):
- DoubleConversion
- glog
- hermes-engine
Expand All @@ -2478,7 +2519,7 @@ PODS:
- ReactCommon/turbomodule/bridging
- ReactCommon/turbomodule/core
- Yoga
- RNReanimated/worklets (3.15.4):
- RNReanimated/worklets (3.16.4):
- DoubleConversion
- glog
- hermes-engine
Expand All @@ -2499,7 +2540,7 @@ PODS:
- ReactCommon/turbomodule/bridging
- ReactCommon/turbomodule/core
- Yoga
- RNScreens (3.34.0):
- RNScreens (4.4.0):
- DoubleConversion
- glog
- hermes-engine
Expand Down Expand Up @@ -2974,8 +3015,8 @@ SPEC CHECKSUMS:
react-native-daily-js: 6f3b0930d5fd7fc94648eb334a35d3efe538c93c
react-native-get-random-values: 21325b2244dfa6b58878f51f9aa42821e7ba3d06
react-native-idle-timer: b4e9ff189950bcd3ba03257d9f033f3432341db8
react-native-netinfo: 076df4f9b07f6670acf4ce9a75aac8d34c2e2ccc
react-native-safe-area-context: ab8f4a3d8180913bd78ae75dd599c94cce3d5e9a
react-native-netinfo: f0a9899081c185db1de5bb2fdc1c88c202a059ac
react-native-safe-area-context: 4532f1a0c5d34a46b9324ccaaedcb5582a302b7d
react-native-volume-manager: 3c7d8047841b6831730dea7bf25250522388b4f4
react-native-webrtc: f0863a670c08895cebfd74d7790e499397d5be1a
react-native-webview: 91800ab1c604389120f4abe895328ff7736513fb
Expand Down Expand Up @@ -3007,21 +3048,21 @@ SPEC CHECKSUMS:
RNCAsyncStorage: ec53e44dc3e75b44aa2a9f37618a49c3bc080a7a
RNCPicker: b7873ba797dc586bfaf3307d737cbdc620a9ff3e
RNDateTimePicker: 40ffda97d071a98a10fdca4fa97e3977102ccd14
RNDeviceInfo: b899ce37a403a4dea52b7cb85e16e49c04a5b88e
RNDeviceInfo: 3f2e5fcca3637f75c6d30ba287293c2f97206781
RNFBApp: 793adb33298db7e67dc365dc1ec0dc8a55a7a044
RNFBAuth: e923d3f87088009ac8505140599ec1e784d77bd0
RNFBDynamicLinks: 6e5d52576c079e65040110c8a9b895c6e1f02edc
RNFBFirestore: 9b5e7d645787f02d5d16c4e060e778e9da762e02
RNFBStorage: a86f59a4adae00b3061e55257d6c3d70851a1810
RNGestureHandler: 83fd202dbc0b8971414c5c7c56ddd9f5cde05911
RNImageCropPicker: 771e2ca319d2cf92e04ebf334ece892ee9a6728f
RNGestureHandler: 38b7949a58a56ae0e2a3c38920cb6852cafb6b9f
RNImageCropPicker: 8e39c01f205e00d739c31e682f068aac315587bf
RNLocalize: 4f22418187ecd5ca693231093ff1d912d1b3c9bc
RNNotifee: 35b5f984d11083b02d7f2990b3408cd99a0aeeac
RNNotifee: 522276e0be010e98173175fb838514b69f18cbe0
RNPermissions: a58e61bd4e6bd417adcf8ef8ca094b93d772e492
RNRate: ef3bcff84f39bb1d1e41c5593d3eea4aab2bd73a
RNReactNativeHapticFeedback: ec56a5f81c3941206fd85625fa669ffc7b4545f9
RNReanimated: 4e3738c07d997c502b5fa407524700dfa8712777
RNScreens: db442e7b8c7bc8befec2ce057927305ff8598cc8
RNReactNativeHapticFeedback: dd1df8ab143dfd0ac79fe483cd08822d7a86fc85
RNReanimated: 13f9f061449dd7a1f6e1b8fb4caf18b880b41bd1
RNScreens: a582697173dfacb627c9366a80881ffb5dd92971
RNSentry: d2f4b8dc672fb4e26b50b99e006e52d547e36b3f
RNSVG: 8b1a777d54096b8c2a0fd38fc9d5a454332bbb4d
Sentry: f8374b5415bc38dfb5645941b3ae31230fbeae57
Expand All @@ -3037,7 +3078,7 @@ SPEC CHECKSUMS:
StripePaymentsUI: 7d7cffb2ecfc0d6b5ac3a4488c02893a5ff6cc77
StripeUICore: bb102d453b1e1a10a37f810bc0a9aa0675fb17fd
TOCropViewController: 80b8985ad794298fb69d3341de183f33d1853654
Yoga: eed50599a85bd9f6882a9938d118aed6a397db9c
Yoga: bd92064a0d558be92786820514d74fc4dddd1233

PODFILE CHECKSUM: 1e2c5c3ea8152bd7472ee44e381909c2f6afd170

Expand Down
7 changes: 6 additions & 1 deletion client/metro.config.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
const {
wrapWithReanimatedMetroConfig,
} = require('react-native-reanimated/metro-config');
const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
/**
* Metro configuration for React Native
Expand Down Expand Up @@ -60,4 +63,6 @@ const config = {
},
};

module.exports = mergeConfig(getDefaultConfig(__dirname), config);
module.exports = wrapWithReanimatedMetroConfig(
mergeConfig(getDefaultConfig(__dirname), config),
);
8 changes: 4 additions & 4 deletions client/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
"@daily-co/react-native-daily-js": "0.69.0",
"@daily-co/react-native-webrtc": "118.0.3-daily.1",
"@dotlottie/react-player": "^1.6.19",
"@gorhom/bottom-sheet": "^4.6.4",
"@gorhom/bottom-sheet": "^5.0.6",
"@kingstinct/react-native-healthkit": "^8.2.0",
"@lottiefiles/react-lottie-player": "^3.5.4",
"@notifee/react-native": "^9.1.3",
Expand All @@ -44,7 +44,7 @@
"@react-navigation/stack": "^6.4.1",
"@sentry/react-native": "^5.33.1",
"@stripe/stripe-react-native": "^0.39.0",
"@th3rdwave/react-navigation-bottom-sheet": "^0.3.2",
"@th3rdwave/react-navigation-bottom-sheet": "https://github.com/29ki/react-navigation-bottom-sheet.git#overlay-as-containerComponent",
"@types/lodash.throttle": "^4.1.9",
"dayjs": "^1.11.13",
"debug": "^4.3.6",
Expand All @@ -67,7 +67,7 @@
"react-native-circular-progress": "^1.4.1",
"react-native-code-push": "^9.0.0",
"react-native-device-info": "^14.0.2",
"react-native-gesture-handler": "^2.20.0",
"react-native-gesture-handler": "^2.21.2",
"react-native-get-random-values": "^1.11.0",
"react-native-haptic-feedback": "^2.3.3",
"react-native-idle-timer": "^2.2.3",
Expand All @@ -77,7 +77,7 @@
"react-native-markdown-display": "^7.0.2",
"react-native-permissions": "^4.1.5",
"react-native-rate": "^1.2.12",
"react-native-reanimated": "^3.15.4",
"react-native-reanimated": "^3.16.4",
"react-native-safe-area-context": "^4.14.0",
"react-native-screens": "^4.4.0",
"react-native-svg": "^15.8.0",
Expand Down
5 changes: 1 addition & 4 deletions client/src/lib/components/ProfileInfo/ProfileInfo.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ import useUpdateProfileDetails from '../../user/hooks/useUpdateProfileDetails';
import ProfilePicture from '../User/ProfilePicture';
import useUser from '../../user/hooks/useUser';
import {COLORS} from '../../../../../shared/src/constants/colors';
import useHideModalUntilResolved from '../../navigation/hooks/useHideModalUntilResolved';

const Container = styled.View({
alignItems: 'center',
Expand Down Expand Up @@ -47,8 +46,6 @@ const ProfileInfo: React.FC<ProfileInfoProps> = ({onSaveCallback}) => {
useChangeProfilePicture();
const {updateProfileDetails, isUpdatingProfileDetails} =
useUpdateProfileDetails();
const hideModalAndChangeProfilePicture =
useHideModalUntilResolved(changeProfilePicture);
const [displayName, setDisplayName] = useState(user?.displayName ?? '');
const [nameMissing, setNameMissing] = useState(false);
const [pictureMissing, setPictureMissing] = useState(false);
Expand Down Expand Up @@ -97,7 +94,7 @@ const ProfileInfo: React.FC<ProfileInfoProps> = ({onSaveCallback}) => {
pictureURL={user?.photoURL}
hasError={pictureMissing}
loading={isUpdatingProfilePicture}
onPress={hideModalAndChangeProfilePicture}
onPress={changeProfilePicture}
size={SPACINGS.NINTYSIX}
/>
<Spacer16 />
Expand Down
40 changes: 26 additions & 14 deletions client/src/lib/navigation/ModalStack.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React, {useMemo} from 'react';
import React, {Fragment, useMemo} from 'react';

import {
BottomSheetNavigationOptions,
createBottomSheetNavigator,
Expand All @@ -14,7 +15,10 @@ import SessionErrorModal from '../../routes/modals/SessionErrorModal/SessionErro
import {COLORS} from '../../../../shared/src/constants/colors';
import SETTINGS from '../constants/settings';
import {useSafeAreaInsets} from 'react-native-safe-area-context';
import {BottomSheetBackdrop} from '@gorhom/bottom-sheet';
import {
BottomSheetBackdrop,
BottomSheetBackdropProps,
} from '@gorhom/bottom-sheet';
import ChangeLanguageModal from '../../routes/modals/ChangeLanguageModal/ChangeLanguageModal';
import ProfileSettingsModal from '../../routes/modals/ProfileSettingsModal/ProfileSettingsModal';
import SignInModal from '../../routes/modals/SignInModal/SignInModal';
Expand Down Expand Up @@ -50,18 +54,25 @@ import UnlockCollectionModal from '../../routes/modals/UnlockCollectionModal/Unl
const {Navigator, Screen, Group} =
createBottomSheetNavigator<ModalStackProps>();

const BackdropComponent = ({
animatedIndex,
animatedPosition,
style,
}: BottomSheetBackdropProps) => (
<BottomSheetBackdrop
pressBehavior="close"
animatedIndex={animatedIndex}
animatedPosition={animatedPosition}
disappearsOnIndex={-0.1}
appearsOnIndex={0}
opacity={0.1}
style={style}
/>
);

const modalScreenOptions: BottomSheetNavigationOptions = {
backdropComponent: ({animatedIndex, animatedPosition, style}) => (
<BottomSheetBackdrop
pressBehavior="close"
animatedIndex={animatedIndex}
animatedPosition={animatedPosition}
disappearsOnIndex={-0.1}
appearsOnIndex={0}
opacity={0.1}
style={style}
/>
),
containerComponent: Fragment,
backdropComponent: BackdropComponent,
backgroundStyle: {
backgroundColor: 'transparent',
shadowColor: '#000000',
Expand All @@ -80,12 +91,13 @@ const modalScreenOptions: BottomSheetNavigationOptions = {
left: 0,
right: 0,
},
enableDynamicSizing: false,
/*
TODO: Fixes issues with modals being clipped when focusing on input fields
https://github.com/gorhom/react-native-bottom-sheet/issues/618
*/
android_keyboardInputMode: 'adjustResize',
stackBehavior: 'replace',
stackBehavior: 'push',
};

const ModalStack = () => {
Expand Down
25 changes: 0 additions & 25 deletions client/src/lib/navigation/hooks/useHideModalUntilResolved.ts

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,6 @@ import {SPACINGS} from '../../../lib/constants/spacings';
import {ModalHeading} from '../../../lib/components/Typography/Heading/Heading';
import useConfirmSessionReminder from '../../../lib/sessions/hooks/useConfirmSessionReminder';
import {getSessionHostingLink} from '../../../lib/sessions/api/session';
import useHideModalUntilResolved from '../../../lib/navigation/hooks/useHideModalUntilResolved';

const Row = styled(View)({
flexDirection: 'row',
Expand All @@ -42,18 +41,17 @@ const AssignNewHostModal = () => {

const exercise = useExerciseById(session?.exerciseId, session?.language);
const confirmToggleReminder = useConfirmSessionReminder(session);
const hideModalAndShare = useHideModalUntilResolved(Share.share);

const isHost = user?.uid === session.hostId;

const onHostChange = useCallback(async () => {
const link = await getSessionHostingLink(session.id);
if (link) {
hideModalAndShare({
Share.share({
message: link,
});
}
}, [session.id, hideModalAndShare]);
}, [session.id]);

useEffect(() => {
if (isHost) {
Expand Down
Loading
Loading