5de54471b7
* Gallery screen (ground work) * Open the gallery from posts * Open the gallery from post draft * feedback review * Feedback review 2 * do not remove dm channel names and localization fix * update to the latest network-client * do not override file width, height and imageThumbail if received file does not have it set * bring back ScrollView wrapper for message component * Remove Text wrapper for markdown paragraph * Fix YouTube play icon placeholder * Make video file play button container round * Add gif image placeholder * Save images & videos to camera roll * Feedback review 3 * load video thumbnail when post is in viewport * simplify prefix
38 lines
1.1 KiB
TypeScript
38 lines
1.1 KiB
TypeScript
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
|
// See LICENSE.txt for license information.
|
|
|
|
import React from 'react';
|
|
import {StyleSheet, ViewStyle} from 'react-native';
|
|
import Animated, {AnimatedStyleProp, Extrapolate, interpolate, SharedValue, useAnimatedStyle} from 'react-native-reanimated';
|
|
|
|
export type BackdropProps = {
|
|
animatedStyles: AnimatedStyleProp<ViewStyle>;
|
|
translateY: SharedValue<number>;
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
backdrop: {
|
|
backgroundColor: 'black',
|
|
},
|
|
});
|
|
|
|
const Backdrop = ({animatedStyles, translateY}: BackdropProps) => {
|
|
const customBackdropStyles = useAnimatedStyle(() => {
|
|
return {
|
|
opacity: interpolate(
|
|
Math.abs(translateY.value),
|
|
[0, 100],
|
|
[1, 0],
|
|
Extrapolate.CLAMP,
|
|
),
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<Animated.View style={[StyleSheet.absoluteFill, customBackdropStyles]}>
|
|
<Animated.View style={[animatedStyles, styles.backdrop]}/>
|
|
</Animated.View>
|
|
);
|
|
};
|
|
|
|
export default Backdrop;
|