callstack / callstack/react-native-bottom-tabs

Image url as icon is not working

オープン
#462 コメント 2 件 リアクション 1 件 担当者 0 名 GitHub で見る
bug
主要言語
TypeScript
スター
1.5k
フォーク
109
平均マージ
11時間 44分
マージ済み PR(30日)
8

説明

### Before submitting a new issue

- [x] I tested using the latest version of the library, as the bug might be already fixed.
- [x] I tested using a [supported version](https://github.com/reactwg/react-native-releases/blob/main/docs/support.md) of react native.
- [x] 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.

Image

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

export default function TabLayout() {
return (

({ sfSymbol: "house" })
}}
/>
({ sfSymbol: "magnifyingglass" })
}}
/>
({ sfSymbol: "person.crop.circle.fill" })
tabBarIcon: () => ({
uri: "https://file-examples.net/wp-content/uploads/2024/02/SamplePNGImage_200kbmb.png"
})
}}
/>

)
}

```

### Library version

1.0.2

### Environment info

```shell
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

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

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

Usage with expo-router のセットアップ、withLayoutContext ファイル、_layout.tsx の例から始め、次に、提供された tabBarIcon uri を使用して iOS でブラックボックスの結果を再現します。NativeTabs からの画像 URL アイコンのパスを追跡し、黒いボックスではなくリモート画像がレンダリングされることを確認します。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
ios, react-native, typescript
領域
mobile
issue の種類
バグ
難易度
3/5
見積もり時間
1〜2日
活発さ
停滞
明瞭さ
おおむね明確
初心者へのやさしさ
38/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。