verdnatura-mirror/Rocket.Chat.ReactNative
verdnatura-mirror
/
Rocket.Chat.ReactNative
mirror of https://github.com/RocketChat/Rocket.Chat.ReactNative
2
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

migrate to reanimated

This commit is contained in:
Sathurshan 2024-03-20 17:00:37 +00:00
parent 989982bc1a
commit 22d665658f
5 changed files with 99 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/ReactotronConfig.ts
View File

@ -19,6 +19,6 @@ if (__DEV__) {
// @ts-ignore
console.warn = Reactotron.log;
// @ts-ignore
// console.log = Reactotron.log;
console.log = Reactotron.log;
LogBox.ignoreAllLogs(true);
}

54
app/views/CannedResponsesListView/Dropdown/index.tsx
View File

@ -1,5 +1,6 @@
import React, { useEffect, useRef } from 'react';
import { Animated, Easing, FlatList, TouchableWithoutFeedback } from 'react-native';
import React, { useEffect } from 'react';
import { FlatList, TouchableWithoutFeedback } from 'react-native';
import Animated, { Easing, interpolate, runOnJS, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
import styles from '../styles';
import { useTheme } from '../../../theme';
@ -21,36 +22,35 @@ interface IDropdownProps {
}
const Dropdown = ({ currentDepartment, onClose, onDepartmentSelected, departments }: IDropdownProps) => {
const animatedValue = useRef(new Animated.Value(0)).current;
const animatedValue = useSharedValue(0);
const { colors } = useTheme();
useEffect(() => {
Animated.timing(animatedValue, {
toValue: 1,
duration: ANIMATION_DURATION,
easing: Easing.inOut(Easing.quad),
useNativeDriver: true
}).start();
animatedValue.value = withTiming(1, { duration: ANIMATION_DURATION, easing: Easing.inOut(Easing.quad) });
}, [animatedValue]);
const close = () => {
Animated.timing(animatedValue, {
toValue: 0,
duration: ANIMATION_DURATION,
easing: Easing.inOut(Easing.quad),
useNativeDriver: true
}).start(() => onClose());
const runOnClose = () => onClose();
animatedValue.value = withTiming(0, { duration: ANIMATION_DURATION, easing: Easing.inOut(Easing.quad) }, () =>
runOnJS(runOnClose)()
);
};
const translateY = animatedValue.interpolate({
inputRange: [0, 1],
outputRange: [-300, HEIGHT_DESTINATION] // approximated height of the component when closed/open
});
const animatedTranslateY = useAnimatedStyle(() => ({
transform: [
{
translateY: interpolate(
animatedValue.value,
[0, 1],
[-300, HEIGHT_DESTINATION] // approximated height of the component when closed/open
)
}
]
}));
const backdropOpacity = animatedValue.interpolate({
inputRange: [0, 1],
outputRange: [0, colors.backdropOpacity]
});
const animatedBackdropOpacity = useAnimatedStyle(() => ({
opacity: interpolate(animatedValue.value, [0, 1], [0, colors.backdropOpacity])
}));
return (
<>
@ -60,9 +60,9 @@ const Dropdown = ({ currentDepartment, onClose, onDepartmentSelected, department
styles.backdrop,
{
backgroundColor: colors.backdropColor,
opacity: backdropOpacity,
top: HEIGHT_DESTINATION
}
},
animatedBackdropOpacity
]}
/>
</TouchableWithoutFeedback>
@ -70,10 +70,10 @@ const Dropdown = ({ currentDepartment, onClose, onDepartmentSelected, department
style={[
styles.dropdownContainer,
{
transform: [{ translateY }],
backgroundColor: colors.backgroundColor,
borderColor: colors.separatorColor
}
},
animatedTranslateY
]}
>
<DropdownItemHeader department={currentDepartment} onPress={close} />

43
app/views/DirectoryView/Options.tsx
View File

@ -1,5 +1,6 @@
import React, { useEffect, useRef } from 'react';
import { Animated, Easing, Switch, Text, TouchableWithoutFeedback, View } from 'react-native';
import React, { useEffect } from 'react';
import { Switch, Text, TouchableWithoutFeedback, View } from 'react-native';
import Animated, { Easing, interpolate, runOnJS, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
import Touch from '../../containers/Touch';
import { CustomIcon, TIconsName } from '../../containers/CustomIcon';
@ -12,8 +13,7 @@ import { useTheme } from '../../theme';
const ANIMATION_DURATION = 200;
const ANIMATION_PROPS = {
duration: ANIMATION_DURATION,
easing: Easing.inOut(Easing.quad),
useNativeDriver: true
easing: Easing.inOut(Easing.quad)
};
interface IDirectoryOptionsProps {
@ -33,21 +33,16 @@ const DirectoryOptions = ({
changeType,
toggleWorkspace
}: IDirectoryOptionsProps) => {
const animatedValue = useRef(new Animated.Value(0)).current;
const animatedValue = useSharedValue(0);
const { colors } = useTheme();
useEffect(() => {
Animated.timing(animatedValue, {
toValue: 1,
...ANIMATION_PROPS
}).start();
animatedValue.value = withTiming(1, ANIMATION_PROPS);
}, [animatedValue]);
const close = () => {
Animated.timing(animatedValue, {
toValue: 0,
...ANIMATION_PROPS
}).start(() => onClose());
const runOnClose = () => onClose();
animatedValue.value = withTiming(0, ANIMATION_PROPS, () => runOnJS(runOnClose)());
};
const renderItem = (itemType: string) => {
@ -74,22 +69,24 @@ const DirectoryOptions = ({
);
};
const translateY = animatedValue.interpolate({
inputRange: [0, 1],
outputRange: [-326, 0]
});
const animatedTranslateY = useAnimatedStyle(() => ({
transform: [
{
translateY: interpolate(animatedValue.value, [0, 1], [-326, 0])
}
]
}));
const backdropOpacity = animatedValue.interpolate({
inputRange: [0, 1],
outputRange: [0, colors.backdropOpacity]
});
const animatedBackdropOpacity = useAnimatedStyle(() => ({
opacity: interpolate(animatedValue.value, [0, 1], [0, colors.backdropOpacity])
}));
return (
<>
<TouchableWithoutFeedback onPress={close}>
<Animated.View style={[styles.backdrop, { backgroundColor: colors.backdropColor, opacity: backdropOpacity }]} />
<Animated.View style={[styles.backdrop, { backgroundColor: colors.backdropColor }, animatedBackdropOpacity]} />
</TouchableWithoutFeedback>
<Animated.View style={[styles.dropdownContainer, { transform: [{ translateY }], backgroundColor: colors.backgroundColor }]}>
<Animated.View style={[styles.dropdownContainer, { backgroundColor: colors.backgroundColor }, animatedTranslateY]}>
<Touch onPress={close} accessibilityLabel={I18n.t('Search_by')}>
<View style={[styles.dropdownContainerHeader, styles.dropdownItemContainer, { borderColor: colors.separatorColor }]}>
<Text style={[styles.dropdownToggleText, { color: colors.auxiliaryText }]}>{I18n.t('Search_by')}</Text>

48
app/views/RoomsListView/ServerDropdown.tsx
View File

@ -1,8 +1,9 @@
import React, { useEffect, useRef, useState } from 'react';
import { View, Text, Animated, Easing, TouchableWithoutFeedback, TouchableOpacity, FlatList, Linking } from 'react-native';
import { View, Text, TouchableWithoutFeedback, TouchableOpacity, FlatList, Linking } from 'react-native';
import { batch, useDispatch } from 'react-redux';
import { Subscription } from 'rxjs';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import Animated, { Easing, interpolate, runOnJS, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
import * as List from '../../containers/List';
import Button from '../../containers/Button';
@ -31,7 +32,7 @@ const ANIMATION_DURATION = 200;
const MAX_ROWS = 4;
const ServerDropdown = () => {
const animatedValue = useRef(new Animated.Value(0)).current;
const animatedValue = useSharedValue(0);
const subscription = useRef<Subscription>();
const newServerTimeout = useRef<ReturnType<typeof setTimeout> | false>();
const isMounted = useRef(false);
@ -58,12 +59,7 @@ const ServerDropdown = () => {
setServers(data);
});
Animated.timing(animatedValue, {
toValue: 1,
duration: ANIMATION_DURATION,
easing: Easing.inOut(Easing.quad),
useNativeDriver: true
}).start();
animatedValue.value = withTiming(1, { duration: ANIMATION_DURATION, easing: Easing.inOut(Easing.quad) });
};
init();
@ -79,12 +75,10 @@ const ServerDropdown = () => {
}, []);
const close = () => {
Animated.timing(animatedValue, {
toValue: 0,
duration: ANIMATION_DURATION,
easing: Easing.inOut(Easing.quad),
useNativeDriver: true
}).start(() => dispatch(toggleServerDropdown()));
const dispatchToggleServerDropdown = () => dispatch(toggleServerDropdown());
animatedValue.value = withTiming(0, { duration: ANIMATION_DURATION, easing: Easing.inOut(Easing.quad) }, () =>
runOnJS(dispatchToggleServerDropdown)()
);
};
const createWorkspace = async () => {
@ -160,15 +154,17 @@ const ServerDropdown = () => {
const statusBarHeight = insets?.top ?? 0;
const heightDestination = isMasterDetail ? headerHeight + statusBarHeight : 0;
const translateY = animatedValue.interpolate({
inputRange: [0, 1],
outputRange: [-initialTop, heightDestination]
});
const animatedTranslateY = useAnimatedStyle(() => ({
transform: [
{
translateY: interpolate(animatedValue.value, [0, 1], [-initialTop, heightDestination])
}
]
}));
const backdropOpacity = animatedValue.interpolate({
inputRange: [0, 1],
outputRange: [0, colors.backdropOpacity]
});
const animatedBackdropOpacity = useAnimatedStyle(() => ({
opacity: interpolate(animatedValue.value, [0, 1], [0, colors.backdropOpacity])
}));
return (
<>
@ -178,9 +174,9 @@ const ServerDropdown = () => {
styles.backdrop,
{
backgroundColor: colors.backdropColor,
opacity: backdropOpacity,
top: heightDestination
}
},
animatedBackdropOpacity
]}
/>
</TouchableWithoutFeedback>
@ -188,10 +184,10 @@ const ServerDropdown = () => {
style={[
styles.dropdownContainer,
{
transform: [{ translateY }],
backgroundColor: colors.backgroundColor,
borderColor: colors.separatorColor
}
},
animatedTranslateY
]}
testID='rooms-list-header-server-dropdown'
>

56
app/views/ThreadMessagesView/Dropdown/index.tsx
View File

@ -1,6 +1,7 @@
import React, { useEffect, useRef } from 'react';
import { Animated, Easing, TouchableWithoutFeedback } from 'react-native';
import React, { useEffect } from 'react';
import { TouchableWithoutFeedback } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import Animated, { Easing, interpolate, runOnJS, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
import styles from '../styles';
import { headerHeight } from '../../../lib/methods/helpers/navigation';
@ -11,6 +12,10 @@ import DropdownItemHeader from './DropdownItemHeader';
import { useTheme } from '../../../theme';
const ANIMATION_DURATION = 200;
const ANIMATION_PROPS = {
duration: ANIMATION_DURATION,
easing: Easing.inOut(Easing.quad)
};
interface IDropdownProps {
isMasterDetail?: boolean;
@ -20,39 +25,36 @@ interface IDropdownProps {
}
const Dropdown = ({ isMasterDetail, currentFilter, onClose, onFilterSelected }: IDropdownProps) => {
const animatedValue = useRef(new Animated.Value(0)).current;
const animatedValue = useSharedValue(0);
const { colors } = useTheme();
const insets = useSafeAreaInsets();
useEffect(() => {
Animated.timing(animatedValue, {
toValue: 1,
duration: ANIMATION_DURATION,
easing: Easing.inOut(Easing.quad),
useNativeDriver: true
}).start();
animatedValue.value = withTiming(1, ANIMATION_PROPS);
}, [animatedValue]);
const close = () => {
Animated.timing(animatedValue, {
toValue: 0,
duration: ANIMATION_DURATION,
easing: Easing.inOut(Easing.quad),
useNativeDriver: true
}).start(() => onClose());
const runOnClose = () => onClose();
animatedValue.value = withTiming(0, ANIMATION_PROPS, () => runOnJS(runOnClose)());
};
const heightDestination = isMasterDetail ? headerHeight + insets.top : 0;
const translateY = animatedValue.interpolate({
inputRange: [0, 1],
outputRange: [-300, heightDestination] // approximated height of the component when closed/open
});
const animatedTranslateY = useAnimatedStyle(() => ({
transform: [
{
translateY: interpolate(
animatedValue.value,
[0, 1],
[-300, heightDestination] // approximated height of the component when closed/open
)
}
]
}));
const backdropOpacity = animatedValue.interpolate({
inputRange: [0, 1],
outputRange: [0, colors.backdropOpacity]
});
const animatedBackdropOpacity = useAnimatedStyle(() => ({
opacity: interpolate(animatedValue.value, [0, 1], [0, colors.backdropOpacity])
}));
return (
<>
@ -62,9 +64,9 @@ const Dropdown = ({ isMasterDetail, currentFilter, onClose, onFilterSelected }:
styles.backdrop,
{
backgroundColor: colors.backdropColor,
opacity: backdropOpacity,
top: heightDestination
}
},
animatedBackdropOpacity
]}
/>
</TouchableWithoutFeedback>
@ -72,10 +74,10 @@ const Dropdown = ({ isMasterDetail, currentFilter, onClose, onFilterSelected }:
style={[
styles.dropdownContainer,
{
transform: [{ translateY }],
backgroundColor: colors.backgroundColor,
borderColor: colors.separatorColor
}
},
animatedTranslateY
]}
>
<DropdownItemHeader currentFilter={currentFilter} onPress={close} />