Why my navbar backgorund color is not changed?

Question

I am kinda new to React Native, and I try to change the background color of my navbar as wel as the color of the name that's selected. Why this all does not work and what can I do to make it work?

      <NavigationContainer>
        <Tab.Navigator
          screenOptions={{
            tabBarOptions: {
              style: {
                backgroundColor: 'red',
              },
            },
          }}
        >
          <Tab.Screen
            name="My Family"
            component={Family}
            options={{
              tabBarIcon: () => (
                <Ionicons style={styles.icon} name="people-outline" />
              ),
            }}
          />
          <Tab.Screen
            name="Edit Family"
            component={EditFamily}
            options={{
              tabBarIcon: () => (
                <Ionicons style={styles.icon} name="create-outline" />
              ),
            }}
          />
          <Tab.Screen
            name="My Profile"
            component={MyProfile}
            options={{
              tabBarIcon: () => (
                <Ionicons style={styles.icon} name="person-outline" />
              ),
            }}
          />
        </Tab.Navigator>
      </NavigationContainer>