resize animation ok
This commit is contained in:
+16
-3
@@ -5,7 +5,7 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
|||||||
import { NativeStackNavigationProp } from '@react-navigation/native-stack';
|
import { NativeStackNavigationProp } from '@react-navigation/native-stack';
|
||||||
import { MaterialIcons } from '@expo/vector-icons';
|
import { MaterialIcons } from '@expo/vector-icons';
|
||||||
import { Gesture, GestureDetector } from 'react-native-gesture-handler';
|
import { Gesture, GestureDetector } from 'react-native-gesture-handler';
|
||||||
import { runOnJS } from 'react-native-reanimated';
|
import Animated, { runOnJS, useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';
|
||||||
import { useAddTags, useMoveResources, useFolders, useFiles, useFreeLocalSpace } from '../hooks/useFiles';
|
import { useAddTags, useMoveResources, useFolders, useFiles, useFreeLocalSpace } from '../hooks/useFiles';
|
||||||
import { UnifiedFileItem, isFolder } from '../types';
|
import { UnifiedFileItem, isFolder } from '../types';
|
||||||
import { SearchBar, SearchFilters, MediaFilter } from '../components/SearchBar';
|
import { SearchBar, SearchFilters, MediaFilter } from '../components/SearchBar';
|
||||||
@@ -119,6 +119,12 @@ export function HomeScreen() {
|
|||||||
const { pendingCount, isSyncing } = useSyncQueue();
|
const { pendingCount, isSyncing } = useSyncQueue();
|
||||||
useAutoSync();
|
useAutoSync();
|
||||||
|
|
||||||
|
const pinchScale = useSharedValue(1);
|
||||||
|
|
||||||
|
const gridAnimatedStyle = useAnimatedStyle(() => ({
|
||||||
|
transform: [{ scale: pinchScale.value }],
|
||||||
|
}));
|
||||||
|
|
||||||
const itemSize = (SCREEN_WIDTH - PADDING_H * 2 - (numColumns - 1) * ITEM_GAP) / numColumns;
|
const itemSize = (SCREEN_WIDTH - PADDING_H * 2 - (numColumns - 1) * ITEM_GAP) / numColumns;
|
||||||
|
|
||||||
const loadMore = useCallback(() => {
|
const loadMore = useCallback(() => {
|
||||||
@@ -209,7 +215,14 @@ export function HomeScreen() {
|
|||||||
|
|
||||||
const pinchGesture = useMemo(() =>
|
const pinchGesture = useMemo(() =>
|
||||||
Gesture.Pinch()
|
Gesture.Pinch()
|
||||||
|
.onBegin(() => {
|
||||||
|
pinchScale.value = 1;
|
||||||
|
})
|
||||||
|
.onChange((event) => {
|
||||||
|
pinchScale.value = event.scale;
|
||||||
|
})
|
||||||
.onEnd((event) => {
|
.onEnd((event) => {
|
||||||
|
pinchScale.value = withSpring(1);
|
||||||
runOnJS(handlePinchEnd)(event.scale);
|
runOnJS(handlePinchEnd)(event.scale);
|
||||||
}),
|
}),
|
||||||
[]
|
[]
|
||||||
@@ -469,7 +482,7 @@ export function HomeScreen() {
|
|||||||
</View>
|
</View>
|
||||||
)}
|
)}
|
||||||
<GestureDetector gesture={pinchGesture}>
|
<GestureDetector gesture={pinchGesture}>
|
||||||
<View style={styles.listWrapper}>
|
<Animated.View style={[styles.listWrapper, gridAnimatedStyle]}>
|
||||||
<FlatList
|
<FlatList
|
||||||
key={numColumns}
|
key={numColumns}
|
||||||
data={sortedFiles}
|
data={sortedFiles}
|
||||||
@@ -513,7 +526,7 @@ export function HomeScreen() {
|
|||||||
}
|
}
|
||||||
renderItem={renderItem}
|
renderItem={renderItem}
|
||||||
/>
|
/>
|
||||||
</View>
|
</Animated.View>
|
||||||
</GestureDetector>
|
</GestureDetector>
|
||||||
|
|
||||||
{!selectionMode && (
|
{!selectionMode && (
|
||||||
|
|||||||
Reference in New Issue
Block a user