''tabBarActiveBackgroundColor' not working in 'react-native material top tabs'

I'm using React navigation 6

import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';

const renderCourses = () => {
const Tab = createMaterialTopTabNavigator();
    return (
      <View style={{paddingTop: 20, flex: 1}}>
        <Tab.Navigator
          screenOptions={({route}) => ({
            tabBarStyle: {
              width: '65%',
            },
            tabBarLabelStyle: {
              fontFamily: fonts.proximaNovaMedium,
              fontSize: 12,
              fontWeight: '500',
              letterSpacing: 0,
              lineHeight: 15,
              textAlign: 'center',
            },
            tabBarActiveTintColor: colors.phoneNumberActive,
            tabBarIndicatorStyle: {
              backgroundColor: null,
            },
          })}>
          <Tab.Screen
            name="Ongoing"
            component={OngoingScreen}
            options={{
              tabBarLabel: 'Ongoing',
              tabBarActiveBackgroundColor: 'green',
            }}
          />
          <Tab.Screen name="Completed" component={CompletedScreen} />
        </Tab.Navigator>
      </View>
    );
  };

I want to change the active tab background color but tabBarActiveBackgroundColor is not working. And I have to change the label to title case it's setting to uppercase by default I cannot change that. How to do this?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source