Creepso/NuvioStreaming
1
0
Fork 0
mirror of https://github.com/tapframe/NuvioStreaming.git synced 2026-04-27 11:23:02 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

claudesome nice animation on tab change

Browse source
This commit is contained in:
tapframe 2025-07-05 19:34:32 +05:30
parent 2487ef892c
commit a32a2074a7
1 changed files with 30 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
src/navigation/AppNavigator.tsx
View file

@ -2,7 +2,7 @@ import React, { useEffect, useRef } from 'react';
import { NavigationContainer, DefaultTheme as NavigationDefaultTheme, DarkTheme as NavigationDarkTheme, Theme, NavigationProp } from '@react-navigation/native'; import { NavigationContainer, DefaultTheme as NavigationDefaultTheme, DarkTheme as NavigationDarkTheme, Theme, NavigationProp } from '@react-navigation/native';
import { createNativeStackNavigator, NativeStackNavigationOptions, NativeStackNavigationProp } from '@react-navigation/native-stack'; import { createNativeStackNavigator, NativeStackNavigationOptions, NativeStackNavigationProp } from '@react-navigation/native-stack';
import { createBottomTabNavigator, BottomTabNavigationProp } from '@react-navigation/bottom-tabs'; import { createBottomTabNavigator, BottomTabNavigationProp } from '@react-navigation/bottom-tabs';
import { useColorScheme, Platform, Animated, StatusBar, TouchableOpacity, View, Text, AppState } from 'react-native'; import { useColorScheme, Platform, Animated, StatusBar, TouchableOpacity, View, Text, AppState, Easing } from 'react-native';
import { PaperProvider, MD3DarkTheme, MD3LightTheme, adaptNavigationTheme } from 'react-native-paper'; import { PaperProvider, MD3DarkTheme, MD3LightTheme, adaptNavigationTheme } from 'react-native-paper';
import type { MD3Theme } from 'react-native-paper'; import type { MD3Theme } from 'react-native-paper';
import type { BottomTabBarProps } from '@react-navigation/bottom-tabs'; import type { BottomTabBarProps } from '@react-navigation/bottom-tabs';
@ -536,6 +536,35 @@ const MainTabs = () => {
<Tab.Navigator <Tab.Navigator
tabBar={renderTabBar} tabBar={renderTabBar}
screenOptions={({ route, navigation, theme }) => ({ screenOptions={({ route, navigation, theme }) => ({
transitionSpec: {
animation: 'timing',
config: {
duration: 200,
easing: Easing.inOut(Easing.ease),
},
},
sceneStyleInterpolator: ({ current }) => ({
sceneStyle: {
opacity: current.progress.interpolate({
inputRange: [-1, 0, 1],
outputRange: [0, 1, 0],
}),
transform: [
{
scale: current.progress.interpolate({
inputRange: [-1, 0, 1],
outputRange: [0.95, 1, 0.95],
}),
},
{
translateY: current.progress.interpolate({
inputRange: [-1, 0, 1],
outputRange: [8, 0, 8],
}),
},
],
},
}),
header: () => (route.name === 'Home' ? <NuvioHeader /> : null), header: () => (route.name === 'Home' ? <NuvioHeader /> : null),
headerShown: route.name === 'Home', headerShown: route.name === 'Home',
tabBarShowLabel: false, tabBarShowLabel: false,