43 lines
1.2 KiB
TypeScript
43 lines
1.2 KiB
TypeScript
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
|
// See LICENSE.txt for license information.
|
|
|
|
import React, {useCallback} from 'react';
|
|
import {Pressable} from 'react-native-gesture-handler';
|
|
import {useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
|
|
|
|
import type {StyleProp, ViewStyle} from 'react-native';
|
|
|
|
type Props = {
|
|
children: React.ReactNode;
|
|
onPress: () => void;
|
|
style?: StyleProp<ViewStyle>;
|
|
}
|
|
|
|
export default function PressableOpacity({children, onPress, style}: Props) {
|
|
const cancelOpacity = useSharedValue(1);
|
|
|
|
const cancelAnimatedStyle = useAnimatedStyle(() => {
|
|
return {
|
|
opacity: cancelOpacity.value,
|
|
};
|
|
});
|
|
|
|
const cancelPressIn = useCallback(() => {
|
|
cancelOpacity.value = withTiming(0.5, {duration: 100});
|
|
}, []);
|
|
|
|
const cancelPressOut = useCallback(() => {
|
|
cancelOpacity.value = withTiming(1, {duration: 100});
|
|
}, []);
|
|
|
|
return (
|
|
<Pressable
|
|
onPressIn={cancelPressIn}
|
|
onPressOut={cancelPressOut}
|
|
onPress={onPress}
|
|
style={[style, cancelAnimatedStyle]}
|
|
>
|
|
{children}
|
|
</Pressable>
|
|
);
|
|
}
|