From 11d81d0b1d2f9e9d23ce94e8ff84daef459f5983 Mon Sep 17 00:00:00 2001 From: Elias Nahum Date: Tue, 12 Apr 2022 09:00:14 -0400 Subject: [PATCH] [Gekidou] Fix bottom sheet initial animation (#6161) * Fix bottom sheet initial animation * include bottom sheet backdrop opacity animation --- .../combined_user_activity.tsx | 2 +- .../post/body/reactions/reactions.tsx | 2 +- app/components/post_list/post/post.tsx | 2 +- .../thread_overview/thread_overview.tsx | 2 +- app/screens/bottom_sheet/index.tsx | 28 +++++++-- app/screens/navigation.ts | 57 ++++++++++++------- 6 files changed, 65 insertions(+), 28 deletions(-) diff --git a/app/components/post_list/combined_user_activity/combined_user_activity.tsx b/app/components/post_list/combined_user_activity/combined_user_activity.tsx index 9154df091..0369c7ad0 100644 --- a/app/components/post_list/combined_user_activity/combined_user_activity.tsx +++ b/app/components/post_list/combined_user_activity/combined_user_activity.tsx @@ -114,7 +114,7 @@ const CombinedUserActivity = ({ if (isTablet) { showModal(Screens.POST_OPTIONS, title, passProps, bottomSheetModalOptions(theme, 'close-post-options')); } else { - showModalOverCurrentContext(Screens.POST_OPTIONS, passProps); + showModalOverCurrentContext(Screens.POST_OPTIONS, passProps, bottomSheetModalOptions(theme)); } }, [post, canDelete, isTablet, intl]); diff --git a/app/components/post_list/post/body/reactions/reactions.tsx b/app/components/post_list/post/body/reactions/reactions.tsx index 9abaf4220..db9a7ffd3 100644 --- a/app/components/post_list/post/body/reactions/reactions.tsx +++ b/app/components/post_list/post/body/reactions/reactions.tsx @@ -147,7 +147,7 @@ const Reactions = ({currentUserId, canAddReaction, canRemoveReaction, disabled, if (isTablet) { showModal(screen, title, passProps, bottomSheetModalOptions(theme, 'close-post-reactions')); } else { - showModalOverCurrentContext(screen, passProps); + showModalOverCurrentContext(screen, passProps, bottomSheetModalOptions(theme)); } } }, [intl, isTablet, postId, theme]); diff --git a/app/components/post_list/post/post.tsx b/app/components/post_list/post/post.tsx index a463862a4..2e982728c 100644 --- a/app/components/post_list/post/post.tsx +++ b/app/components/post_list/post/post.tsx @@ -172,7 +172,7 @@ const Post = ({ if (isTablet) { showModal(Screens.POST_OPTIONS, title, passProps, bottomSheetModalOptions(theme, 'close-post-options')); } else { - showModalOverCurrentContext(Screens.POST_OPTIONS, passProps); + showModalOverCurrentContext(Screens.POST_OPTIONS, passProps, bottomSheetModalOptions(theme)); } }; diff --git a/app/components/post_list/thread_overview/thread_overview.tsx b/app/components/post_list/thread_overview/thread_overview.tsx index 3168bb659..9bcd68331 100644 --- a/app/components/post_list/thread_overview/thread_overview.tsx +++ b/app/components/post_list/thread_overview/thread_overview.tsx @@ -80,7 +80,7 @@ const ThreadOverview = ({isSaved, repliesCount, rootPost, style, testID}: Props) if (isTablet) { showModal(Screens.POST_OPTIONS, title, passProps, bottomSheetModalOptions(theme, 'close-post-options')); } else { - showModalOverCurrentContext(Screens.POST_OPTIONS, passProps); + showModalOverCurrentContext(Screens.POST_OPTIONS, passProps, bottomSheetModalOptions(theme)); } } }), [rootPost]); diff --git a/app/screens/bottom_sheet/index.tsx b/app/screens/bottom_sheet/index.tsx index b940f46eb..3a60edb1e 100644 --- a/app/screens/bottom_sheet/index.tsx +++ b/app/screens/bottom_sheet/index.tsx @@ -5,7 +5,7 @@ import React, {ReactNode, useCallback, useEffect, useRef} from 'react'; import {BackHandler, DeviceEventEmitter, Keyboard, StyleSheet, useWindowDimensions, View} from 'react-native'; import {State, TapGestureHandler} from 'react-native-gesture-handler'; import {Navigation as RNN} from 'react-native-navigation'; -import Animated from 'react-native-reanimated'; +import Animated, {Easing, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated'; import RNBottomSheet from 'reanimated-bottom-sheet'; import {Events} from '@constants'; @@ -30,10 +30,14 @@ const BottomSheet = ({closeButtonId, componentId, initialSnapIndex = 0, renderCo const dimensions = useWindowDimensions(); const isTablet = useIsTablet(); const theme = useTheme(); + const firstRun = useRef(isTablet); const lastSnap = snapPoints.length - 1; + const backdropOpacity = useSharedValue(0); const close = useCallback(() => { - dismissModal({componentId}); + if (firstRun.current) { + dismissModal({componentId}); + } }, [componentId]); useEffect(() => { @@ -65,6 +69,12 @@ const BottomSheet = ({closeButtonId, componentId, initialSnapIndex = 0, renderCo hapticFeedback(); Keyboard.dismiss(); sheetRef.current?.snapTo(initialSnapIndex); + backdropOpacity.value = 1; + const t = setTimeout(() => { + firstRun.current = true; + }, 100); + + return () => clearTimeout(t); }, []); useEffect(() => { @@ -77,6 +87,11 @@ const BottomSheet = ({closeButtonId, componentId, initialSnapIndex = 0, renderCo return () => navigationEvents.remove(); }, [close]); + const backdropStyle = useAnimatedStyle(() => ({ + opacity: withTiming(backdropOpacity.value, {duration: 250, easing: Easing.inOut(Easing.linear)}), + backgroundColor: 'rgba(0, 0, 0, 0.5)', + })); + const renderBackdrop = () => { return ( ); @@ -127,10 +142,13 @@ const BottomSheet = ({closeButtonId, componentId, initialSnapIndex = 0, renderCo ref={sheetRef} snapPoints={snapPoints} borderRadius={10} - initialSnap={initialSnapIndex} + initialSnap={snapPoints.length - 1} renderContent={renderContainerContent} onCloseEnd={close} - enabledBottomInitialAnimation={true} + onCloseStart={() => { + backdropOpacity.value = 0; + }} + enabledBottomInitialAnimation={false} renderHeader={Indicator} enabledContentTapInteraction={false} /> diff --git a/app/screens/navigation.ts b/app/screens/navigation.ts index a25fe2165..969393e23 100644 --- a/app/screens/navigation.ts +++ b/app/screens/navigation.ts @@ -76,26 +76,45 @@ export const loginAnimationOptions = () => { }; }; -export const bottomSheetModalOptions = (theme: Theme, closeButtonId: string) => { - const closeButton = CompassIcon.getImageSourceSync('close', 24, theme.centerChannelColor); +export const bottomSheetModalOptions = (theme: Theme, closeButtonId?: string) => { + if (closeButtonId) { + const closeButton = CompassIcon.getImageSourceSync('close', 24, theme.centerChannelColor); + return { + modalPresentationStyle: OptionsModalPresentationStyle.formSheet, + modal: { + swipeToDismiss: true, + }, + topBar: { + leftButtons: [{ + id: closeButtonId, + icon: closeButton, + testID: closeButtonId, + }], + leftButtonColor: changeOpacity(theme.centerChannelColor, 0.56), + background: { + color: theme.centerChannelBg, + }, + title: { + color: theme.centerChannelColor, + }, + }, + }; + } + return { - modalPresentationStyle: OptionsModalPresentationStyle.formSheet, - modal: { - swipeToDismiss: true, + animations: { + showModal: { + enabled: false, + }, + dismissModal: { + enabled: false, + }, }, - topBar: { - leftButtons: [{ - id: closeButtonId, - icon: closeButton, - testID: closeButtonId, - }], - leftButtonColor: changeOpacity(theme.centerChannelColor, 0.56), - background: { - color: theme.centerChannelBg, - }, - title: { - color: theme.centerChannelColor, - }, + modal: {swipeToDismiss: true}, + statusBar: { + backgroundColor: null, + drawBehind: true, + translucent: true, }, }; }; @@ -654,7 +673,7 @@ export async function bottomSheet({title, renderContent, snapPoints, initialSnap initialSnapIndex, renderContent, snapPoints, - }, {modal: {swipeToDismiss: true}}); + }, bottomSheetModalOptions(theme)); } }