Ripple Effect on BottomTabNavigator - react-native

Question

I'm trying to add Ripple Effect like this in BottomTabNavigator but don't know how?
I'm using createMaterialBottomTabNavigator for BottomTabNavigator.

Answer 1

To get the Material Bottom Tab Navigator to change color you need to use the tabBarColor property of the navigationOptions for each tab. You can see this in the documentation here. You also need to set shifting to be true in the navigator's config if you want the ripple effect.
You will need to make sure that you have the following dependencies installed:
react-navigation
react-navigation-material-bottom-tabs
react-native-paper
react-native-vector-icons, though if using Expo this is not required as it is already included
For more details on the dependencies that you need see the documentation
Here is a sample navigator:
import * as React from 'react';
import Screen1 from './Screen1';
import Screen2 from './Screen2';
import { createAppContainer } from 'react-navigation';
import { createMaterialBottomTabNavigator } from 'react-navigation-material-bottom-tabs'; // <- notice where we import createMaterialBottomTabNavigator from
import { MaterialIcons } from '#expo/vector-icons';
const tabBarIcon = name => ({ tintColor }) => (
<MaterialIcons
style={{ backgroundColor: 'transparent' }}
name={name}
color={tintColor}
size={24}
/>
);
const screens = {
Screen1: {
screen: Screen1,
navigationOptions: {
tabBarIcon: tabBarIcon('photo-album'),
tabBarColor: 'blue' // <- set this to the color you want
}
},
Screen2: {
screen: Screen2,
navigationOptions: {
tabBarIcon: tabBarIcon('favorite'),
tabBarColor: 'green' // <- set this to the color you want
}
}
};
const config = {
headerMode: 'none',
initialRouteName: 'Screen1',
shifting: true, // <- notice this has been set to true
activeColor: 'white',
inactiveColor: 'black'
};
const MainNavigator = createMaterialBottomTabNavigator(screens, config);
export default createAppContainer(MainNavigator);
I would have created a snack to show this working but unfortunately react-navigation-material-bottom-tabs doesn't play nice in a snack, but it does play nice in a local Expo or react-native app.