Skip to content

Support custom scale property for dynamically downloaded tab/toolbar icons #8330

@IsaacIsrael

Description

@IsaacIsrael

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions