Merge pull request #2193 from myxmaster/improve-animations

Improve animations (and more)
ZeusLN · May 22, 2024 · fc28dd2 · fc28dd2
2 parents 7abc7a9 + 1869818
commit fc28dd2
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 28 deletions.
diff --git a/App.tsx b/App.tsx
@@ -233,9 +233,12 @@ export default class App extends React.PureComponent {
                                             }}
                                         >
                                             <Stack.Navigator
-                                                screenOptions={{
-                                                    headerShown: false
-                                                }}
+                                                screenOptions={({ route }) => ({
+                                                    headerShown: false,
+                                                    animation: (
+                                                        route.params as any
+                                                    )?.animation
+                                                })}
                                                 screenListeners={({
                                                     navigation
                                                 }) => ({
@@ -299,10 +302,6 @@ export default class App extends React.PureComponent {
                                                 <Stack.Screen
                                                     name="Nodes"
                                                     component={Nodes}
-                                                    options={{
-                                                        animation:
-                                                            'slide_from_left'
-                                                    }}
                                                 />
                                                 <Stack.Screen
                                                     name="Privacy"
@@ -457,10 +456,6 @@ export default class App extends React.PureComponent {
                                                 <Stack.Screen
                                                     name="Activity"
                                                     component={Activity}
-                                                    options={{
-                                                        animation:
-                                                            'slide_from_bottom'
-                                                    }}
                                                 />
                                                 <Stack.Screen
                                                     name="ActivityFilter"

diff --git a/components/Header.tsx b/components/Header.tsx
@@ -13,6 +13,7 @@ import { themeColor } from '../utils/ThemeUtils';
 
 import ArrowLeft from '../assets/images/SVG/Arrow_left.svg';
 import Close from '../assets/images/SVG/Close.svg';
+import { StackNavigationProp } from '@react-navigation/stack';
 
 interface HeaderIcon extends IconObject {
     icon?: string;
@@ -32,7 +33,7 @@ interface HeaderProps {
     rightComponent?: React.ReactElement<{}> | TextProps | HeaderIcon;
     containerStyle?: ViewStyle;
     placement?: 'left' | 'center' | 'right' | undefined;
-    navigation?: any;
+    navigation?: StackNavigationProp<any, any>;
     onBack?: () => void;
     navigateBackOnBackPress?: boolean;
 }
@@ -46,7 +47,7 @@ function ZeusHeader(props: HeaderProps) {
             onPress={() => {
                 if (onBack) onBack();
                 if (navigateBackOnBackPress) {
-                    props.navigation.goBack();
+                    props.navigation!.goBack();
                 }
             }}
             accessibilityLabel={localeString('general.goBack')}
@@ -64,7 +65,7 @@ function ZeusHeader(props: HeaderProps) {
         <TouchableOpacity
             onPress={() => {
                 if (onBack) onBack();
-                props.navigation.goBack();
+                props.navigation!.goBack();
             }}
             accessibilityLabel={localeString('general.close')}
         >

diff --git a/components/WalletHeader.tsx b/components/WalletHeader.tsx
@@ -126,7 +126,9 @@ const SettingsBadge = ({
     navigation: StackNavigationProp<any, any>;
 }) => (
     <TouchableOpacity
-        onPress={() => navigation.navigate('Settings')}
+        onPress={() =>
+            navigation.navigate('Settings', { animation: 'slide_from_left' })
+        }
         accessibilityLabel={localeString('views.Settings.title')}
     >
         <Gear fill={themeColor('text')} width={33} height={33} />
@@ -252,7 +254,11 @@ export default class WalletHeader extends React.Component<
 
         const NodeButton = () => (
             <TouchableOpacity
-                onPress={() => protectedNavigation(navigation, 'Nodes')}
+                onPress={() =>
+                    protectedNavigation(navigation, 'Nodes', undefined, {
+                        animation: 'slide_from_right'
+                    })
+                }
                 accessibilityLabel={localeString('views.Settings.title')}
             >
                 {selectedNode && selectedNode.photo ? (
@@ -442,7 +448,7 @@ export default class WalletHeader extends React.Component<
                 leftComponent={
                     loading ? undefined : (
                         <Row>
-                            <NodeButton />
+                            <SettingsBadge navigation={navigation} />
                             {paid && paid.length > 0 && (
                                 <TouchableOpacity
                                     onPress={() =>
@@ -564,7 +570,7 @@ export default class WalletHeader extends React.Component<
                                 </View>
                             )}
                             <View>
-                                <SettingsBadge navigation={navigation} />
+                                <NodeButton />
                             </View>
                             {posEnabled !== PosEnabled.Disabled && (
                                 <View

diff --git a/utils/NavigationUtils.ts b/utils/NavigationUtils.ts
@@ -5,7 +5,8 @@ import stores from '../stores/Stores';
 const protectedNavigation = async (
     navigation: StackNavigationProp<any, any>,
     route: string,
-    disactivatePOS?: boolean
+    disactivatePOS?: boolean,
+    routeParams?: any
 ) => {
     const { posStatus, settings, setPosStatus } = stores.settingsStore;
     const loginRequired = settings && (settings.passphrase || settings.pin);
@@ -17,7 +18,7 @@ const protectedNavigation = async (
         });
     } else {
         if (disactivatePOS) setPosStatus('inactive');
-        navigation.navigate(route);
+        navigation.navigate(route, routeParams);
     }
 };
 

diff --git a/views/Activity/Activity.tsx b/views/Activity/Activity.tsx
@@ -214,7 +214,11 @@ export default class Activity extends React.PureComponent<
 
         const FilterButton = () => (
             <TouchableOpacity
-                onPress={() => navigation.navigate('ActivityFilter')}
+                onPress={() =>
+                    navigation.navigate('ActivityFilter', {
+                        animation: 'slide_from_right'
+                    })
+                }
                 accessibilityLabel={localeString('views.ActivityFilter.title')}
             >
                 <Filter fill={themeColor('text')} />

diff --git a/views/Wallet/Wallet.tsx b/views/Wallet/Wallet.tsx
@@ -452,7 +452,7 @@ export default class Wallet extends React.Component<WalletProps, WalletState> {
             }
         }
 
-        if (connecting) {
+        if (connecting && start != null) {
             console.log(
                 'connect time: ' + (new Date().getTime() - start) / 1000 + 's'
             );
@@ -490,7 +490,6 @@ export default class Wallet extends React.Component<WalletProps, WalletState> {
         const Tab = createBottomTabNavigator();
         const {
             NodeInfoStore,
-            UnitsStore,
             BalanceStore,
             SettingsStore,
             SyncStore,
@@ -551,8 +550,6 @@ export default class Wallet extends React.Component<WalletProps, WalletState> {
                         <>
                             <LayerBalances
                                 navigation={navigation}
-                                BalanceStore={BalanceStore}
-                                UnitsStore={UnitsStore}
                                 onRefresh={() => this.getSettingsAndNavigate()}
                                 locked={isSyncing}
                                 consolidated
@@ -576,7 +573,8 @@ export default class Wallet extends React.Component<WalletProps, WalletState> {
                                 <TouchableOpacity
                                     onPress={() =>
                                         this.props.navigation.navigate(
-                                            'Activity'
+                                            'Activity',
+                                            { animation: 'slide_from_bottom' }
                                         )
                                     }
                                     accessibilityLabel={localeString(
@@ -635,6 +633,7 @@ export default class Wallet extends React.Component<WalletProps, WalletState> {
             ...DefaultTheme,
             colors: {
                 ...DefaultTheme.colors,
+                background: themeColor('background'),
                 card: error ? themeColor('error') : themeColor('background'),
                 border: error ? themeColor('error') : themeColor('background')
             }
@@ -648,7 +647,6 @@ export default class Wallet extends React.Component<WalletProps, WalletState> {
                             <NavigationContainer
                                 theme={Theme}
                                 ref={this.tabNavigationRef}
-                                independent={true}
                             >
                                 <Tab.Navigator
                                     initialRouteName={
@@ -711,7 +709,10 @@ export default class Wallet extends React.Component<WalletProps, WalletState> {
                                             ? themeColor('error')
                                             : 'gray',
                                         tabBarShowLabel: false,
-                                        tabBarStyle: { display: 'flex' }
+                                        tabBarStyle: {
+                                            paddingBottom: 12
+                                        },
+                                        animation: 'shift'
                                     })}
                                 >
                                     {posEnabled !== PosEnabled.Disabled &&