android/app/src/main/java/fr/amicaleinsat/application/MainActivity.java

@@ -23,7 +23,7 @@ public class MainActivity extends ReactActivity {
 
    @Override
     protected void onCreate(Bundle savedInstanceState) {
-        SplashScreen.show(this, R.style.SplashScreenTheme);
+        SplashScreen.show(this);
         super.onCreate(savedInstanceState);
     }
 

android/app/src/main/res/values/styles.xml

@@ -7,8 +7,4 @@
     <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
     <item name="colorPrimary">@color/colorPrimary</item>
   </style>
-  <style name="SplashScreenTheme" parent="SplashScreen_SplashTheme">
-    <item name="android:navigationBarColor">@color/activityBackground</item>
-    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
-  </style>
 </resources>

src/components/Tabbar/TabHomeIcon.js

@@ -20,16 +20,18 @@
 // @flow
 
 import * as React from 'react';
-import {Image, View} from 'react-native';
+import {Image, Platform, View} from 'react-native';
-import {FAB} from 'react-native-paper';
+import {FAB, TouchableRipple, withTheme} from 'react-native-paper';
 import * as Animatable from 'react-native-animatable';
 import FOCUSED_ICON from '../../../assets/tab-icon.png';
 import UNFOCUSED_ICON from '../../../assets/tab-icon-outline.png';
+import type {CustomThemeType} from '../../managers/ThemeManager';
 
 type PropsType = {
   focused: boolean,
   onPress: () => void,
   onLongPress: () => void,
+  theme: CustomThemeType,
   tabBarHeight: number,
 };
 
@@ -82,9 +84,20 @@ class TabHomeIcon extends React.Component<PropsType> {
     color: string,
   }): React.Node => {
     const {focused} = this.props;
+    if (focused)
       return (
         <Image
-        source={focused ? FOCUSED_ICON : UNFOCUSED_ICON}
+          source={FOCUSED_ICON}
+          style={{
+            width: size,
+            height: size,
+            tintColor: color,
+          }}
+        />
+      );
+    return (
+      <Image
+        source={UNFOCUSED_ICON}
         style={{
           width: size,
           height: size,
@@ -102,7 +115,15 @@ class TabHomeIcon extends React.Component<PropsType> {
           flex: 1,
           justifyContent: 'center',
         }}>
-        <View
+        <TouchableRipple
+          onPress={props.onPress}
+          onLongPress={props.onLongPress}
+          borderless
+          rippleColor={
+            Platform.OS === 'android'
+              ? props.theme.colors.primary
+              : 'transparent'
+          }
           style={{
             position: 'absolute',
             bottom: 0,
@@ -116,18 +137,16 @@ class TabHomeIcon extends React.Component<PropsType> {
             easing="ease-out"
             animation={props.focused ? 'fabFocusIn' : 'fabFocusOut'}
             icon={this.getIconRender}
-            onPress={props.onPress}
-            onLongPress={props.onLongPress}
             style={{
               marginTop: 15,
               marginLeft: 'auto',
               marginRight: 'auto',
             }}
           />
-        </View>
+        </TouchableRipple>
       </View>
     );
   }
 }
 
-export default TabHomeIcon;
+export default withTheme(TabHomeIcon);

src/components/Tabbar/TabIcon.js

@@ -94,12 +94,11 @@ class TabIcon extends React.Component<PropsType> {
       <TouchableRipple
         onPress={props.onPress}
         onLongPress={props.onLongPress}
-        rippleColor={props.theme.colors.primary}
         borderless
+        rippleColor={props.theme.colors.primary}
         style={{
           flex: 1,
           justifyContent: 'center',
-          borderRadius: 10
         }}>
         <View>
           <Animatable.View