Image url as icon is not working

[AlirezaHadjar]

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

Hi all,

I just tried the latest version (v1.0.2) and faced and issue while rendering image urls as the tab icon on iOS 26. It displays a black box instead of the actual image.

import { NativeTabs } from "apps/mobile/src/components/withLayoutContext"
import React from "react"

export default function TabLayout() {
    return (
        <NativeTabs
            hapticFeedbackEnabled
            translucent
            labeled={false}
            screenOptions={{
                tabBarActiveTintColor: "#008AFF"
            }}
        >
            <NativeTabs.Screen
                name="index"
                options={{
                    title: "Home",
                    tabBarIcon: () => ({ sfSymbol: "house" })
                }}
            />
            <NativeTabs.Screen
                name="search"
                options={{
                    title: "Search",
                    tabBarIcon: () => ({ sfSymbol: "magnifyingglass" })
                }}
            />
            <NativeTabs.Screen
                name="profile"
                options={{
                    title: "Profile",
                    // tabBarIcon: () => ({ sfSymbol: "person.crop.circle.fill" })
                    tabBarIcon: () => ({
                        uri: "https://file-examples.net/wp-content/uploads/2024/02/SamplePNGImage_200kbmb.png"
                    })
                }}
            />
        </NativeTabs>
    )
}

Library version

1.0.2

Environment info

System:
  OS: macOS 26.0.1
  CPU: (14) arm64 Apple M4 Max
  Memory: 160.53 MB / 36.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 22.15.0
    path: /Users/alirezahadjar/.nvm/versions/node/v22.15.0/bin/node
  Yarn: Not Found
  npm:
    version: 11.4.1
    path: /Users/alirezahadjar/.nvm/versions/node/v22.15.0/bin/npm
  Watchman: Not Found
Managers:
  CocoaPods:
    version: 1.16.2
    path: /Users/alirezahadjar/.rbenv/shims/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 25.0
      - iOS 26.0
      - macOS 26.0
      - tvOS 26.0
      - visionOS 26.0
      - watchOS 26.0
  Android SDK: Not Found
IDEs:
  Android Studio: 2025.1 AI-251.25410.109.2511.13752376
  Xcode:
    version: 26.0.1/17A400
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.16
    path: /usr/bin/javac
  Ruby:
    version: 2.6.10
    path: /Users/alirezahadjar/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react: Not Found
  react-native: Not Found
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true

Steps to reproduce

1. Follow Usage with expo-router section and create withLayoutContext file and then use it in the _layout.tsx file
2. Copy-Paste the reproduction code in the summary

Reproducible sample code

Let me know if the provided code is not sufficient and I'll create one, cheers.

[jtdaugh]

This is probably an iOS-side image masking issue.

If so, the following patch (on 0.11.2) disables image masking.

It would be great to get a tab item option like preserveImage or imageRenderingMode that will conditionally set this rendering mode on the TabItem image

diff --git a/node_modules/react-native-bottom-tabs/ios/TabItem.swift b/node_modules/react-native-bottom-tabs/ios/TabItem.swift
index 3866c59..771b305 100644
--- a/node_modules/react-native-bottom-tabs/ios/TabItem.swift
+++ b/node_modules/react-native-bottom-tabs/ios/TabItem.swift
@@ -11,7 +11,8 @@ struct TabItem: View {
 #if os(macOS)
       Image(nsImage: icon)
 #else
-      Image(uiImage: icon)
+      Image(uiImage: icon.withRenderingMode(.alwaysOriginal))
+        .renderingMode(.original) // ensure full-color PNGs
 #endif
     } else if let sfSymbol, !sfSymbol.isEmpty {
       Image(systemName: sfSymbol)

[dennisnjd]

The issue is on android also