callstack / callstack/react-native-bottom-tabs

Image url as icon is not working

Ouverte
#462 2 commentaires 1 réaction 0 personnes assignées Voir sur GitHub
bug
Langage dominant
TypeScript
Étoiles
1.5k
Forks
109
Merge moyen
11 h 44 min
PR mergées (30 j)
8

Description

### 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.
```

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par la configuration de Usage with expo-router, le fichier withLayoutContext et l’exemple _layout.tsx, puis reproduisez le résultat de la boîte noire sur iOS en utilisant la tabBarIcon uri fournie. Suivez le chemin de l’icône d’URL d’image depuis NativeTabs et vérifiez que l’image distante s’affiche à la place d’un carré noir.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
ios, react-native, typescript
Domaine
mobile
Type d'issue
Bug
Difficulté
3/5
Temps estimé
1-2 jours
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
38/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.