CODEWITHSUNDEEP
react-nativereact-navigationreact-tabs
Ali Mahmoudi
Ali Mahmoudi

Reputation: 83

How can I change shadow color of active top Tab

I want to change the shadow color of the active top tab. How can I do that? Like the following picture, I want to change the blue color to red color.

enter image description here

My Code

import {Image, View, Text} from 'react-native';
import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';
import StudyingScreen from './StudyingScreen';
import CollectionScreen from './CollectionScreen';

const Tab = createMaterialTopTabNavigator();

const MyCourses = () => {
  return (
    <View style={{flex: 1, backgroundColor: 'white'}}>
      <Text style={{fontSize: 20, marginLeft: 15, marginBottom: 15}}>
        My Courses
      </Text>
      <Tab.Navigator
        screenOptions={{
          tabBarIndicatorStyle: {backgroundColor: 'red'},
        }}>
        <Tab.Screen name="STUDYING" component={StudyingScreen} />
        <Tab.Screen name="COLLECTION" component={CollectionScreen} />
      </Tab.Navigator>
    </View>
  );
};

export default MyCourses;

Upvotes: 1

Views: 1069

Answers (1)

Mohsen
Mohsen

Reputation: 1555

A super simple prop is there, just read the doc carefully.

<Tab.Navigator
  screenOptions={{
    tabBarIndicatorStyle: {backgroundColor: 'red'}
  }}
>
  {/* ... */}
</Tab.Navigator>

Example: https://snack.expo.dev/SiW0Hun-I

Notice: your code seems right, check your react-navigation version.

Upvotes: 2

Related Questions