toki/mattermost-mobile
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[Gekidou] Fix bottom sheet initial animation (#6161)

Browse source 
* Fix bottom sheet initial animation

* include bottom sheet backdrop opacity animation
This commit is contained in:
Elias Nahum 2022-04-12 09:00:14 -04:00 committed by GitHub
parent 692795a9a1
commit 11d81d0b1d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 65 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/components/post_list/combined_user_activity/combined_user_activity.tsx
View file

@ -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]);

2
app/components/post_list/post/body/reactions/reactions.tsx
View file

@ -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]);

2
app/components/post_list/post/post.tsx
View file

@ -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));
}
};

2
app/components/post_list/thread_overview/thread_overview.tsx
View file

@ -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]);

28
app/screens/bottom_sheet/index.tsx
View file

@ -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 (
<TapGestureHandler
@ -89,7 +104,7 @@ const BottomSheet = ({closeButtonId, componentId, initialSnapIndex = 0, renderCo
}}
>
<Animated.View
style={{...StyleSheet.absoluteFillObject, backgroundColor: 'rgba(0, 0, 0, 0.5)'}}
style={[StyleSheet.absoluteFill, backdropStyle]}
/>
</TapGestureHandler>
);
@ -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}
/>

57
app/screens/navigation.ts
View file

@ -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));
}
}