Skip to content

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

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

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions