Changed home button click effect and added tetris on long press

src/components/Tabbar/CustomTabBar.js

@@ -65,6 +65,17 @@ class CustomTabBar extends React.Component<Props, State> {
         }
     }
 
+    onItemLongPress(route: Object) {
+        const event = this.props.navigation.emit({
+            type: 'tabLongPress',
+            target: route.key,
+            canPreventDefault: true,
+        });
+        if (route.name === "home" && !event.defaultPrevented) {
+            this.props.navigation.navigate('tetris');
+        }
+    }
+
     tabBarIcon = (route, focused) => {
     let icon = TAB_ICONS[route.name];
     icon = focused ? icon : icon + ('-outline');
@@ -93,12 +104,8 @@ class CustomTabBar extends React.Component<Props, State> {
 
         const onPress = () => this.onItemPress(route, state.index, index);
 
-        const onLongPress = () => {
-            this.props.navigation.emit({
-                type: 'tabLongPress',
-                target: route.key,
-            });
-        };
+        const onLongPress = () => this.onItemLongPress(route);
+
         if (isFocused) {
             const stackState = route.state;
             const stackRoute = route.state ? stackState.routes[stackState.index] : undefined;

src/components/Tabbar/TabHomeIcon.js

@@ -4,6 +4,8 @@ import * as React from 'react';
 import {Image, View} from "react-native";
 import {FAB, withTheme} from 'react-native-paper';
 import * as Animatable from "react-native-animatable";
+import TouchableRipple from "react-native-paper/src/components/TouchableRipple/index";
+import CustomTabBar from "./CustomTabBar";
 
 type Props = {
     focused: boolean,
@@ -65,23 +67,39 @@ class TabHomeIcon extends React.Component<Props> {
     render(): React$Node {
         const props = this.props;
         return (
-            <View style={{
+            <View
+                style={{
                     flex: 1,
                     justifyContent: 'center',
                 }}>
+                <TouchableRipple
+                    onPress={props.onPress}
+                    onLongPress={props.onLongPress}
+                    borderless={true}
+                    rippleColor={this.props.theme.colors.primary}
+                    underlayColor={this.props.theme.colors.primary}
+                    style={{
+                        position: 'absolute',
+                        bottom: 0,
+                        left: 0,
+                        width: '100%',
+                        height: CustomTabBar.TAB_BAR_HEIGHT + 30,
+                        marginBottom: -15,
+                    }}
+                >
                     <AnimatedFAB
                         duration={200}
                         easing={"ease-out"}
                         animation={props.focused ? "fabFocusIn" : "fabFocusOut"}
-                    useNativeDriver
-                    onPress={props.onPress}
-                    onLongPress={props.onLongPress}
                         icon={this.iconRender}
                         style={{
+                            marginTop: 15,
                             marginLeft: 'auto',
                             marginRight: 'auto'
                         }}/>
+                </TouchableRipple>
             </View>
+
         );
     }
 

src/components/Tabbar/TabIcon.js

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