Browse Source

Changed home button click effect and added tetris on long press

Arnaud Vergnet 3 years ago
parent
commit
f8363353c3

+ 13
- 6
src/components/Tabbar/CustomTabBar.js View File

@@ -65,6 +65,17 @@ class CustomTabBar extends React.Component<Props, State> {
65 65
         }
66 66
     }
67 67
 
68
+    onItemLongPress(route: Object) {
69
+        const event = this.props.navigation.emit({
70
+            type: 'tabLongPress',
71
+            target: route.key,
72
+            canPreventDefault: true,
73
+        });
74
+        if (route.name === "home" && !event.defaultPrevented) {
75
+            this.props.navigation.navigate('tetris');
76
+        }
77
+    }
78
+
68 79
     tabBarIcon = (route, focused) => {
69 80
     let icon = TAB_ICONS[route.name];
70 81
     icon = focused ? icon : icon + ('-outline');
@@ -93,12 +104,8 @@ class CustomTabBar extends React.Component<Props, State> {
93 104
 
94 105
         const onPress = () => this.onItemPress(route, state.index, index);
95 106
 
96
-        const onLongPress = () => {
97
-            this.props.navigation.emit({
98
-                type: 'tabLongPress',
99
-                target: route.key,
100
-            });
101
-        };
107
+        const onLongPress = () => this.onItemLongPress(route);
108
+
102 109
         if (isFocused) {
103 110
             const stackState = route.state;
104 111
             const stackRoute = route.state ? stackState.routes[stackState.index] : undefined;

+ 31
- 13
src/components/Tabbar/TabHomeIcon.js View File

@@ -4,6 +4,8 @@ import * as React from 'react';
4 4
 import {Image, View} from "react-native";
5 5
 import {FAB, withTheme} from 'react-native-paper';
6 6
 import * as Animatable from "react-native-animatable";
7
+import TouchableRipple from "react-native-paper/src/components/TouchableRipple/index";
8
+import CustomTabBar from "./CustomTabBar";
7 9
 
8 10
 type Props = {
9 11
     focused: boolean,
@@ -65,23 +67,39 @@ class TabHomeIcon extends React.Component<Props> {
65 67
     render(): React$Node {
66 68
         const props = this.props;
67 69
         return (
68
-            <View style={{
69
-                flex: 1,
70
-                justifyContent: 'center',
71
-            }}>
72
-                <AnimatedFAB
73
-                    duration={200}
74
-                    easing={"ease-out"}
75
-                    animation={props.focused ? "fabFocusIn" : "fabFocusOut"}
76
-                    useNativeDriver
70
+            <View
71
+                style={{
72
+                    flex: 1,
73
+                    justifyContent: 'center',
74
+                }}>
75
+                <TouchableRipple
77 76
                     onPress={props.onPress}
78 77
                     onLongPress={props.onLongPress}
79
-                    icon={this.iconRender}
78
+                    borderless={true}
79
+                    rippleColor={this.props.theme.colors.primary}
80
+                    underlayColor={this.props.theme.colors.primary}
80 81
                     style={{
81
-                        marginLeft: 'auto',
82
-                        marginRight: 'auto'
83
-                    }}/>
82
+                        position: 'absolute',
83
+                        bottom: 0,
84
+                        left: 0,
85
+                        width: '100%',
86
+                        height: CustomTabBar.TAB_BAR_HEIGHT + 30,
87
+                        marginBottom: -15,
88
+                    }}
89
+                >
90
+                    <AnimatedFAB
91
+                        duration={200}
92
+                        easing={"ease-out"}
93
+                        animation={props.focused ? "fabFocusIn" : "fabFocusOut"}
94
+                        icon={this.iconRender}
95
+                        style={{
96
+                            marginTop: 15,
97
+                            marginLeft: 'auto',
98
+                            marginRight: 'auto'
99
+                        }}/>
100
+                </TouchableRipple>
84 101
             </View>
102
+
85 103
         );
86 104
     }
87 105
 

+ 3
- 0
src/components/Tabbar/TabIcon.js View File

@@ -69,6 +69,9 @@ class TabIcon extends React.Component<Props> {
69 69
             <TouchableRipple
70 70
                 onPress={props.onPress}
71 71
                 onLongPress={props.onLongPress}
72
+                borderless={true}
73
+                rippleColor={this.props.theme.colors.primary}
74
+                underlayColor={this.props.theme.colors.primary}
72 75
                 style={{
73 76
                     flex: 1,
74 77
                     justifyContent: 'center',

Loading…
Cancel
Save