Microsoft/react-native-windows

Implement overflow property for Image for fabric

Open

#13165 opened on Apr 30, 2024

View on GitHub
 (3 comments) (0 reactions) (1 assignee)C# (6,114 stars) (544 forks)batch import
API: CompletionArea: Component ViewsArea: FabricArea: ImageArea: Layout PropsArea: View Style PropsNew ArchitectureParity: Fabric vs. PaperWorkstream: Component Parityenhancementgood first issue

Description

Implement the overflow property for the fabric implementation of Image.

Note: This property appears in both Layout Props and Image Style Props.

This property was available in RNW Paper via NativeUIManager.

See https://reactnative.dev/docs/image-style-props#overflow for details.

Contributor guide

Tech stack
reactnodejscpp
Domain
frontendmobile
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
needs maintainer response
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
React Native basicsC++ familiarityRNWindows architecture overview
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
45
Research direction
First, review the React Native documentation for the overflow property on Image style props (https://reactnative.dev/docs/image style props#overflow). Then examine the current fabric implementation of Image in the react native windows repository (likely in vnext/Microsoft.ReactNative/Views/Image.cpp). Check how other similar style properties are implemented, e.g., the 'resizeMode' property. The issue notes that overflow was previously available via NativeUIManager in RNW Paper, so you may need to understand how the fabric bridge works. Look at comments in the issue for any additional guidance from maintainers. The assignee may have started work, so check for any linked branches or draft PRs.