Not able to set custom BottomNavigation backgroundColor with v3 theme.

[DomiR]

As you can see in the reference below, if the v3 theme is used it uses theme surface color no matter what backgroundColor one passes through the barStyle prop.

The NavigationBar Guidelines says:

The container can have a color fill to provide separation from the content behind it.

react-native-paper/src/components/BottomNavigation/BottomNavigation.tsx

Lines 602 to 605 in 6afa4fb

	const backgroundColor = isV3
	? theme.colors.surface
	: shifting
	? indexAnim.interpolate({

Also the elevation should probably be adjustable. According to the NavigationBar Spec it should actually have a default elevation of 2 but it is currently hardcoded to 0:

react-native-paper/src/components/BottomNavigation/BottomNavigation.tsx

Line 728 in 6afa4fb

{...(theme.isV3 && { elevation: 0 })}

One can barely see it in the example picture:

[github-actions]

Couldn't find version numbers for the following packages in the issue:

• react-native
• react-native-paper
• react-native-vector-icons

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

[github-actions]

Hey! Thanks for opening the issue. The issue doesn't seem to contain a link to a repro (a snack.expo.dev link or link to a GitHub repo under your username).

Can you provide a minimal repro which demonstrates the issue? A repro will help us debug the issue faster. Please try to keep the repro as small as possible and make sure that we can run it without additional setup.

[lukewalczak]

Hey @DomiR, thanks for your feedback!

If you want to use a custom background color you can always override it by the theme prop:

      <BottomNavigation
		...
        theme={{ colors: { surface: 'aquamarine' } }}
      />

Also the elevation should probably be adjustable. According to the NavigationBar Spec it should actually have a default elevation of 2 but it is currently hardcoded to 0:

In that case, the elevation prop applies background color and shadows, which in terms of BottomNavigation is hardcoded to 0, since there should be no shadow:

However, based on that information you provided and figma kit, the default background color should be theme.colors.elevation.level2, which I will correct in the next week along with passing custom bg color via barStyle

[DomiR]

Hey @lukewalczak. Thanks for looking into this 😊