getImageSource error in android materialSymbol is not working

[monilraycha]

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 tested in ios it is working sf symbol but in android it throws error

Library version

0.84.1

Environment info

info Fetching system and libraries information...
System:
  OS: macOS 26.3.1
  CPU: (8) arm64 Apple M2
  Memory: 99.41 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 25.8.1
    path: /opt/homebrew/bin/node
  Yarn: Not Found
  npm:
    version: 11.11.0
    path: /opt/homebrew/bin/npm
  Watchman:
    version: 2026.03.16.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.16.2
    path: /Users/monilraycha/.rbenv/shims/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 25.2
      - iOS 26.2
      - macOS 26.2
      - tvOS 26.2
      - visionOS 26.2
      - watchOS 26.2
  Android SDK: Not Found
IDEs:
  Android Studio: 2025.3 AI-253.30387.90.2532.14935130
  Xcode:
    version: 26.3/17C529
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.18
    path: /usr/bin/javac
  Ruby:
    version: 3.2.2
    path: /Users/monilraycha/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 20.1.0
    wanted: 20.1.0
  react:
    installed: 19.2.3
    wanted: 19.2.3
  react-native:
    installed: 0.84.1
    wanted: 0.84.1
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: true

Steps to reproduce

   <Tab.Screen
    name="Home"
    component={Home}
    // options={{ tabBarImage: { systemName: 'house.fill' } }}
    options={{
      tabBarIcon: Platform.select({
        ios: {
          type: 'sfSymbol',
          name: 'house',
        },
        android: {
          type: 'materialSymbol',
          name: 'home',
          variant: 'filled',  // ← required
          weight: 400,
        },

        default:{
          type:'materialSymbol',
          name:'home',
          variant: 'filled',  // ← required
    weight: 400,
        }
      }),
    }}
  />

Reproducible sample code

<Tab.Screen
        name="Home"
        component={Home}
        // options={{ tabBarImage: { systemName: 'house.fill' } }}
        options={{
          tabBarIcon: Platform.select({
            ios: {
              type: 'sfSymbol',
              name: 'house',
            },
            android: {
              type: 'materialSymbol',
              name: 'home',
              variant: 'filled',  // ← required
              weight: 400,
            },

            default:{
              type:'materialSymbol',
              name:'home',
              variant: 'filled',  // ← required
        weight: 400,
            }
          }),
        }}
      />

[monilraycha]

Anyone have solution please let me know

[thiagobrez]

I reproduced the exact Cannot read property 'getImageSource' of undefined error on React Native 0.84.1 / React 19.2.3 / Hermes.

The issue is a React Navigation peer-version mismatch, not react-native-bottom-tabs code. The screenshot's BottomTabViewNativeImpl.js lines match @react-navigation/bottom-tabs@8.0.0-alpha.19 exactly. That alpha requires @react-navigation/native@^8.0.0-alpha.16; when it is forced to run with stable @react-navigation/native@7.2.0, MaterialSymbol is undefined and the shown getImageSource call fails.

The same tab options work after aligning the issue-date alpha versions and rebuilding Android:

@react-navigation/bottom-tabs 8.0.0-alpha.19
@react-navigation/native      8.0.0-alpha.16
@react-navigation/elements    3.0.0-alpha.17
@react-navigation/core        8.0.0-alpha.8
react-native-screens          4.24.0

Do not override the package manager's peer-dependency error. Use mutually compatible React Navigation versions (prefer the latest matching releases now), then rebuild the Android app because the matching native package contains the Material Symbol native module and fonts.

One environment note: React Native 0.84.1 no longer supports the legacy architecture. It warns that newArchEnabled=false has been unsupported since 0.82 and runs Fabric regardless.

Evidence:

• Exact error reproduction video
• Working Material Symbols video after aligning peers
• Working tab-switch video
• Full reproduction notes and screenshots

There is no applicable source patch in this repository: it does not implement or export the materialSymbol API in the reported stack.