wix / wix/react-native-navigation

Support custom scale property for dynamically downloaded tab/toolbar icons

Open
#8,330 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
MDX
Stars
13.2k
Forks
2.6k
Avg merge
6d 2h
Merged PRs (30d)
1

Description

Description

When using dynamically downloaded images (e.g. user avatars fetched from a CDN) as tab-bar or toolbar icons, there is no way to specify the image scale factor. ImageParser delegates to [RCTConvert UIImage:], which defaults to scale = 1.0 for URI-based images. This causes icons to render at their full pixel size on Retina displays instead of the intended logical size.

The standard @2x/@3x filename suffix convention does not apply here because images are downloaded to the cache directory at runtime with arbitrary filenames.

Steps to reproduce

  1. Download an image to the local filesystem (e.g. a 60×60 px avatar for a 20pt tab icon on a 3x device)
  2. Pass it as a bottom tab icon: { uri: 'file:///path/to/avatar.png' }
  3. Observe the icon renders at 60×60 points instead of 20×20 points

Expected behavior

Callers should be able to pass an optional scale property in the image source dictionary:

icon: { uri: 'file:///path/to/avatar.png', scale: 3 }

ImageParser would then re-create the UIImage at the requested scale using [UIImage imageWithCGImage:scale:orientation:], so the icon renders at the correct logical size.

Proposed fix

PR #8329 adds this support in a backwards-compatible way — the scale key is only read when explicitly provided.

Environment

  • react-native-navigation: 8.8.8
  • React Native: 0.85.3
  • Platform: iOS

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start at the ImageParser entry point and review PR #8329, which the issue identifies as adding this support. Confirm the optional scale behavior for URI image sources and that existing sources retain their current behavior; done means the requested icon sizing works without regressions.

Written by the indexing model from the issue text.

Assessment

Tech stack
objective-c, react-native
Domain
mobile
Issue type
Feature
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.