Browse Source

Improve tab home button display

Arnaud Vergnet 3 years ago
parent
commit
5c1052fbd4
1 changed files with 6 additions and 24 deletions
  1. 6
    24
      src/components/Tabbar/TabHomeIcon.js

+ 6
- 24
src/components/Tabbar/TabHomeIcon.js View File

@@ -31,7 +31,6 @@ type PropsType = {
31 31
   focused: boolean,
32 32
   onPress: () => void,
33 33
   onLongPress: () => void,
34
-  theme: CustomThemeType,
35 34
   tabBarHeight: number,
36 35
 };
37 36
 
@@ -84,20 +83,9 @@ class TabHomeIcon extends React.Component<PropsType> {
84 83
     color: string,
85 84
   }): React.Node => {
86 85
     const {focused} = this.props;
87
-    if (focused)
88
-      return (
89
-        <Image
90
-          source={FOCUSED_ICON}
91
-          style={{
92
-            width: size,
93
-            height: size,
94
-            tintColor: color,
95
-          }}
96
-        />
97
-      );
98 86
     return (
99 87
       <Image
100
-        source={UNFOCUSED_ICON}
88
+        source={focused ? FOCUSED_ICON : UNFOCUSED_ICON}
101 89
         style={{
102 90
           width: size,
103 91
           height: size,
@@ -115,15 +103,7 @@ class TabHomeIcon extends React.Component<PropsType> {
115 103
           flex: 1,
116 104
           justifyContent: 'center',
117 105
         }}>
118
-        <TouchableRipple
119
-          onPress={props.onPress}
120
-          onLongPress={props.onLongPress}
121
-          borderless
122
-          rippleColor={
123
-            Platform.OS === 'android'
124
-              ? props.theme.colors.primary
125
-              : 'transparent'
126
-          }
106
+        <View
127 107
           style={{
128 108
             position: 'absolute',
129 109
             bottom: 0,
@@ -137,16 +117,18 @@ class TabHomeIcon extends React.Component<PropsType> {
137 117
             easing="ease-out"
138 118
             animation={props.focused ? 'fabFocusIn' : 'fabFocusOut'}
139 119
             icon={this.getIconRender}
120
+            onPress={props.onPress}
121
+            onLongPress={props.onLongPress}
140 122
             style={{
141 123
               marginTop: 15,
142 124
               marginLeft: 'auto',
143 125
               marginRight: 'auto',
144 126
             }}
145 127
           />
146
-        </TouchableRipple>
128
+        </View>
147 129
       </View>
148 130
     );
149 131
   }
150 132
 }
151 133
 
152
-export default withTheme(TabHomeIcon);
134
+export default TabHomeIcon;

Loading…
Cancel
Save