Updating focused icon variant fails sometimes (Android only)

[Robert27]

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 use a different icon for active or non-active tabs. This usually works very well as well.
Only sometimes no update takes place and the non-active is still filled, while the new active is not filled.

Screen.Recording.2024-12-13.at.11.34.08.mov

Library version

0.7.6

Environment info

System:
  OS: macOS 15.2
  CPU: (10) arm64 Apple M1 Pro
  Memory: 196.36 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 23.4.0
    path: /opt/homebrew/bin/node
  Yarn:
    version: 4.0.1
    path: /opt/homebrew/bin/yarn
  npm:
    version: 10.9.2
    path: /opt/homebrew/bin/npm
  Watchman:
    version: 2024.12.02.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.16.2
    path: /Users/x/.rbenv/shims/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.2
      - iOS 18.2
      - macOS 15.2
      - tvOS 18.2
      - visionOS 2.2
      - watchOS 11.2
  Android SDK: Not Found
IDEs:
  Android Studio: 2024.2 AI-242.23339.11.2421.12483815
  Xcode:
    version: 16.2/16C5032a
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.1
    path: /usr/bin/javac
  Ruby:
    version: 3.2.2
    path: /Users/x/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 15.1.3
    wanted: ^15.1.3
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.76.5
    wanted: 0.76.5
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true

Steps to reproduce

1. set a different Android icon style based on the focused state
2. press the tabbar

Reproducible sample code

<Tabs.Screen
                name="map"
                options={{
                    title: t('navigation.map'),
                    tabBarIcon: ({ focused }: { focused: boolean }) =>
                        isAndroid
                            ? focused
                                ? require('../../assets/tabbar/map_fill.svg')
                                : require('../../assets/tabbar/map.svg')
                            : { sfSymbol: 'map.fill' },
                }}
            />

[pluscubed]

This happens to me too, only on new arch. New architecture also causes the ripple to immediately disappear when switching tabs quickly (re-mounting?).

Also, the tab text flickers, as if opacity is set to 0% then faded in to 100%. You can see it in @Robert27's above video, easier to see slowed down.

I'm not sure if these are related or separate issues.