Skip to content

Standard layout of ComponentViews is dependent on ComponentViewFeatures::NativeBorder #14706

Open
@jonthysell

Description

@jonthysell

Problem Description

We have the ComponentViewFeatures::NativeBorder feature which is supposed to control whether a (custom) ComponentView inherits the standard built-in handling of processing border props and rendering them.

However, disabling that feature also disables the standard built-in handling of processing and applying layout props

Here's what happens when we disable NativeBorder for the CircleMask example:

Image

Here's what it's supposed to look like:

Image

Steps To Reproduce

  1. Create a custom ComponentView which disables ComponentViewFeatures::NativeBorder with
builder.SetViewFeatures(
            winrt::Microsoft::ReactNative::Composition::ComponentViewFeatures::Default &
            ~winrt::Microsoft::ReactNative::Composition::ComponentViewFeatures::NativeBorder);
  1. Use the custom Component View in your UI

Expected Results

The component renders in the correct location even though NativeBorder handling is disabled.

CLI version

15.0.0

Environment

info Fetching system and libraries information...
System:
  OS: Windows 11 10.0.26417
  CPU: (20) x64 13th Gen Intel(R) Core(TM) i7-13800H
  Memory: 14.17 GB / 31.83 GB
Binaries:
  Node:
    version: 18.18.0
    path: C:\Program Files\nodejs\node.EXE
  Yarn:
    version: 3.6.1
    path: C:\Program Files (x86)\Yarn\bin\yarn.CMD
  npm:
    version: 9.8.1
    path: C:\Program Files\nodejs\npm.CMD
  Watchman: Not Found
SDKs:
  Android SDK: Not Found
  Windows SDK:
    AllowDevelopmentWithoutDevLicense: Enabled
    AllowAllTrustedApps: Enabled
    Versions:
      - 10.0.19041.0
      - 10.0.22000.0
      - 10.0.22621.0
      - 10.0.26100.0
IDEs:
  Android Studio: Not Found
  Visual Studio:
    - 17.14.36109.1 (Visual Studio Enterprise 2022)
Languages:
  Java: Not Found
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli":
    installed: 15.0.0
    wanted: 15.0.0
  react:
    installed: 19.0.0
    wanted: 19.0.0
  react-native:
    installed: 0.78.0
    wanted: 0.78.0
  react-native-windows:
    installed: 0.78.4
    wanted: 0.78.4
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

info React Native v0.79.2 is now available (your project is running on v0.78.0).
info Changelog: https://github.com/facebook/react-native/releases/tag/v0.79.2
info Diff: https://react-native-community.github.io/upgrade-helper/?from=0.78.0&to=0.79.2
info For more info, check out "https://reactnative.dev/docs/upgrading?os=windows".

Community Modules

No response

Target Platform Version

10.0.22621

Target Device(s)

Desktop

Visual Studio Version

Visual Studio 2022

Build Configuration

Debug

Snack, code example, screenshot, or link to a repository

The CircleMask example hits this: https://github.com/microsoft/react-native-windows-samples/blob/main/samples/NativeModuleSample/cpp-lib/windows/NativeModuleSample/CircleMask.cpp

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

Status

No status

Relationships

None yet

Development

No branches or pull requests

Issue actions