Android crashes when dynamically setting `tabBarBadge`

[rgommezz]

Before submitting a new issue

• I tested using the latest version of the library, as the bug might be already fixed.
• I tested using a supported version of react native.
• I checked for possible duplicate issues, with possible answers.

Bug summary

I am experiencing an Android crash when setting a tabBarBadge dynamically.

I am using react-native-edge-to-edge and its Expo plugin to set the Material theme as per the instructions:

 ['react-native-edge-to-edge', { android: { parentTheme: 'Material3' } }]

Library version

0.7.3

Environment info

System:
  OS: macOS 14.6.1
  CPU: (12) arm64 Apple M3 Pro
  Memory: 268.52 MB / 36.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.11.0
    path: ~/.nvm/versions/node/v20.11.0/bin/node
  Yarn:
    version: 1.22.22
    path: ~/.nvm/versions/node/v20.11.0/bin/yarn
  npm:
    version: 10.2.4
    path: ~/.nvm/versions/node/v20.11.0/bin/npm
  Watchman:
    version: 2024.10.21.00
    path: /usr/local/bin/watchman
Managers:
  CocoaPods:
    version: 1.16.2
    path: /Users/raulgomezacuna/.rbenv/shims/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.1
      - iOS 18.1
      - macOS 15.1
      - tvOS 18.1
      - visionOS 2.1
      - watchOS 11.1
  Android SDK:
    API Levels:
      - "23"
      - "26"
      - "27"
      - "28"
      - "29"
      - "30"
      - "31"
      - "33"
      - "34"
      - "35"
    Build Tools:
      - 28.0.3
      - 29.0.2
      - 29.0.3
      - 30.0.2
      - 30.0.3
      - 31.0.0
      - 33.0.0
      - 33.0.1
      - 33.0.2
      - 34.0.0
      - 35.0.0
    System Images:
      - android-29 | Google APIs Intel x86 Atom
      - android-29 | Google Play Intel x86 Atom
      - android-30 | Google APIs Intel x86 Atom
      - android-33 | Google APIs Intel x86_64 Atom
      - android-34 | ARM 64 v8a
      - android-34 | Google Play ARM 64 v8a
    Android NDK: Not Found
IDEs:
  Android Studio: 2024.1 AI-241.15989.150.2411.11948838
  Xcode:
    version: 16.1/16B40
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.5
    path: /usr/bin/javac
  Ruby:
    version: 3.1.4
    path: /Users/raulgomezacuna/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 15.1.2
    wanted: ^15.1.2
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.76.2
    wanted: ^0.76.2
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true

Steps to reproduce

• Cold start the app
• Wait x seconds (like with setTimeout for instance)
• Crash happens when setting a badge and previously there wasn't any

Reproducible sample code

import { createNativeBottomTabNavigator } from '@bottom-tabs/react-navigation';
import {ExploreScreen, NotificationsScreen} from '@screens';
import { useTheme } from 'react-native-paper';

const Tab = createNativeBottomTabNavigator();

const TabNavigator = () => {
  const { colors } = useTheme();
  const [badge, setBadge] = useState<string | undefined>(undefined);

  useEffect(() => {
    setTimeout(() => {
      setBadge('3');
    } , 3000);
  }, []);

  return (
    <Tab.Navigator
      labeled
      barTintColor={colors.surface}
      tabBarActiveTintColor={colors.tertiary}
    >
      <Tab.Screen
        name="Explore"
        component={ExploreScreen}
        options={{
          title: 'Explore',
          tabBarActiveTintColor: colors.tertiary,
          tabBarIcon: ({ focused }) =>
            focused
              ? require('./assets/magnify-expand.png')
              : require('./assets/magnify.png'),
        }}
      />
      <Tab.Screen
        name="Notifications"
        component={NotificationsScreen}
        options={{
          title: 'Notifications',
          tabBarIcon: ({ focused }) =>
            focused
              ? require('./assets/bell.png')
              : require('./assets/bell-outline.png'),
          tabBarActiveTintColor: colors.tertiary,
          tabBarBadge: badge,
        }}
      />
    </Tab.Navigator>
  );
};

export default TabNavigator;

[okwasniewski]

Thanks for reporting the issue, it looks like it's related to edge-to-edge theme.

Can you test if it happens with the built in config plugin?

[rgommezz]

No problem!

The crash still happens after uninstalling react-native-edge-to-edge and using the built-in config plugin.

I have also disabled the new arch. This time the error screen seems slightly different though:

[okwasniewski]

Thanks for confirming it's not react-native-edge-to-edge, I will look into this

[okwasniewski]

Hey!

Can you check what value is inside of your android/app/src/main/res/values/styles.xml?

It should look something like this: <style name="AppTheme" parent="Theme.Material3.DayNight.NoActionBar">

I couldn't reproduce the issue:

CleanShot.2024-12-12.at.19.20.24.mp4

If the issue persists please create a reproduction repository.

[rgommezz]

I ended up implementing my own Tabs to have more customisation options. I'll close the issue!

[qwalker8408]

I am also getting this area when dynamically creating values. "expo": "52.0.41". Seems as if its only on start of the app or inserting something dynamically