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 = () => {
+        const onLongPress = () => this.onItemLongPress(route);
-            this.props.navigation.emit({
+
-                type: 'tabLongPress',
-                target: route.key,
-            });
-        };
         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
-                flex: 1,
+                style={{
-                justifyContent: 'center',
+                    flex: 1,
-            }}>
+                    justifyContent: 'center',
-                <AnimatedFAB
+                }}>
-                    duration={200}
+                <TouchableRipple
-                    easing={"ease-out"}
-                    animation={props.focused ? "fabFocusIn" : "fabFocusOut"}
-                    useNativeDriver
                     onPress={props.onPress}
                     onLongPress={props.onLongPress}
-                    icon={this.iconRender}
+                    borderless={true}
+                    rippleColor={this.props.theme.colors.primary}
+                    underlayColor={this.props.theme.colors.primary}
                     style={{
-                        marginLeft: 'auto',
+                        position: 'absolute',
-                        marginRight: 'auto'
+                        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"}
+                        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',