Skip to content

Cleanup NativeModuleSample code for use in docs #1037

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
May 29, 2025
+484 −543
Merged

Cleanup NativeModuleSample code for use in docs #1037

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
848fb5f
Cleanup NativeModuleSample code for use in docs
jonthysell May 28, 2025
0f45d06
Update CircleMaskNativeComponent.ts
jonthysell May 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion samples/NativeModuleSample/cpp-lib/src/CircleMaskNativeComponent.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,6 @@
import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
import type { ViewProps } from 'react-native';

interface CircleMaskProps extends ViewProps {}
export interface CircleMaskProps extends ViewProps {}

export default codegenNativeComponent<CircleMaskProps>('CircleMask');
1 change: 0 additions & 1 deletion samples/NativeModuleSample/cpp-lib/src/NativeDataMarshallingExamples.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ export type Line = {
};

export interface Spec extends TurboModule {

ExplicitPrimitiveArgs(b: boolean, i: Int32, d: number, s: string): void;

ReturnExplicitBoolean(callback: (value: boolean) => void): void;
Expand Down
113 changes: 57 additions & 56 deletions samples/NativeModuleSample/cpp-lib/windows/NativeModuleSample/CircleMask.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,29 +5,30 @@

#include "CircleMask.h"

namespace winrt::NativeModuleSample::implementation
{
namespace winrt::NativeModuleSample::implementation {

void RegisterCircleMaskNativeComponent(
winrt::Microsoft::ReactNative::IReactPackageBuilder const &packageBuilder) noexcept
{
winrt::Microsoft::ReactNative::IReactPackageBuilder const &packageBuilder) noexcept {
#ifdef RNW_NEW_ARCH
NativeModuleSampleCodegen::RegisterCircleMaskNativeComponent<CircleMaskComponentView>(packageBuilder, [](const winrt::Microsoft::ReactNative::Composition::IReactCompositionViewComponentBuilder& /*builder*/) {
// Once 0.76 includes SetViewFeatures - enable this code:
/*
// Turn off default border handling, as it overrides the Clip property of the visual
builder.SetViewFeatures(winrt::Microsoft::ReactNative::Composition::ComponentViewFeatures::Default & ~winrt::Microsoft::ReactNative::Composition::ComponentViewFeatures::NativeBorder);
*/
});
NativeModuleSampleCodegen::RegisterCircleMaskNativeComponent<CircleMaskComponentView>(
packageBuilder,
[](const winrt::Microsoft::ReactNative::Composition::IReactCompositionViewComponentBuilder &builder) {
// Turn off default border handling, as it overrides the Clip property of the visual and doesn't render
// correctly anyway This means we would have to implement drawing our own borders (which we don't do in this
// example)
builder.SetViewFeatures(
winrt::Microsoft::ReactNative::Composition::ComponentViewFeatures::Default &
~winrt::Microsoft::ReactNative::Composition::ComponentViewFeatures::NativeBorder);
});
#else
packageBuilder.AddViewManager(L"CircleMaskViewManager", []() { return winrt::make<CircleMaskViewManager>(); });
#endif
#endif
}

#ifdef RNW_NEW_ARCH

winrt::Microsoft::UI::Composition::Visual CircleMaskComponentView::CreateVisual(const winrt::Microsoft::ReactNative::ComponentView &view) noexcept
{
winrt::Microsoft::UI::Composition::Visual CircleMaskComponentView::CreateVisual(
const winrt::Microsoft::ReactNative::ComponentView &view) noexcept {
auto compositor = view.as<winrt::Microsoft::ReactNative::Composition::ComponentView>().Compositor();

m_visual = compositor.CreateSpriteVisual();
Expand All @@ -40,42 +41,47 @@ winrt::Microsoft::UI::Composition::Visual CircleMaskComponentView::CreateVisual(
return m_visual;
}

void CircleMaskComponentView::Initialize(const winrt::Microsoft::ReactNative::ComponentView &view) noexcept
{
m_layoutMetricChangedRevoker = view.LayoutMetricsChanged(
winrt::auto_revoke,
[wkThis = get_weak()](
const winrt::IInspectable &/*sender*/, const winrt::Microsoft::ReactNative::LayoutMetricsChangedArgs& args) {
if (auto strongThis = wkThis.get()) {
// Once 0.76 includes SetViewFeatures - remove this code, since the core border code will not override our clip:
{
auto compositor = strongThis->m_visual.Compositor();
auto ellipseGeometry = compositor.CreateEllipseGeometry();
auto clip = compositor.CreateGeometricClip();
clip.Geometry(ellipseGeometry);
strongThis->m_visual.Clip(clip);
}
// End of workaround for not being able to disable core clipping code


auto ellipseGeometry = strongThis->m_visual.Clip().as<winrt::Microsoft::UI::Composition::CompositionGeometricClip>().Geometry().as<winrt::Microsoft::UI::Composition::CompositionEllipseGeometry>();
winrt::Windows::Foundation::Numerics::float2 radius = {args.NewLayoutMetrics().Frame.Width * args.NewLayoutMetrics().PointScaleFactor / 2, args.NewLayoutMetrics().Frame.Height * args.NewLayoutMetrics().PointScaleFactor / 2};
ellipseGeometry.Center(radius);
ellipseGeometry.Radius(radius);
}
});
void CircleMaskComponentView::Initialize(const winrt::Microsoft::ReactNative::ComponentView &view) noexcept {
m_layoutMetricChangedRevoker = view.LayoutMetricsChanged(
winrt::auto_revoke,
[wkThis = get_weak()](
const winrt::IInspectable & /*sender*/, const winrt::Microsoft::ReactNative::LayoutMetricsChangedArgs &args) {
if (auto strongThis = wkThis.get()) {
auto visual = strongThis->m_visual;

// Turning off default border handling has the side-effect of also stopping the visual from being positioned,
// so unless that changes we have to position the visual ourselves
// See https://github.com/microsoft/react-native-windows/issues/14706
visual.Size(
{args.NewLayoutMetrics().Frame.Width * args.NewLayoutMetrics().PointScaleFactor,
args.NewLayoutMetrics().Frame.Height * args.NewLayoutMetrics().PointScaleFactor});
visual.Offset({
args.NewLayoutMetrics().Frame.X * args.NewLayoutMetrics().PointScaleFactor,
args.NewLayoutMetrics().Frame.Y * args.NewLayoutMetrics().PointScaleFactor,
0.0f,
});

auto ellipseGeometry = strongThis->m_visual.Clip()
.as<winrt::Microsoft::UI::Composition::CompositionGeometricClip>()
.Geometry()
.as<winrt::Microsoft::UI::Composition::CompositionEllipseGeometry>();
winrt::Windows::Foundation::Numerics::float2 radius = {
args.NewLayoutMetrics().Frame.Width * args.NewLayoutMetrics().PointScaleFactor / 2,
args.NewLayoutMetrics().Frame.Height * args.NewLayoutMetrics().PointScaleFactor / 2};
ellipseGeometry.Center(radius);
ellipseGeometry.Radius(radius);
}
});
}

#else

// IViewManager
winrt::hstring CircleMaskViewManager::Name() noexcept
{
winrt::hstring CircleMaskViewManager::Name() noexcept {
return L"CircleMask";
}

winrt::Windows::UI::Xaml::FrameworkElement CircleMaskViewManager::CreateView() noexcept
{
winrt::Windows::UI::Xaml::FrameworkElement CircleMaskViewManager::CreateView() noexcept {
auto const &view = winrt::Windows::UI::Xaml::Controls::Border();

auto const &binding = winrt::Windows::UI::Xaml::Data::Binding();
Expand All @@ -93,22 +99,21 @@ winrt::Windows::UI::Xaml::FrameworkElement CircleMaskViewManager::CreateView() n
void CircleMaskViewManager::AddView(
winrt::Windows::UI::Xaml::FrameworkElement const &parent,
winrt::Windows::UI::Xaml::UIElement const &child,
int64_t /*index*/) noexcept
{
int64_t /*index*/) noexcept {
if (auto const &border = parent.try_as<winrt::Windows::UI::Xaml::Controls::Border>()) {
border.Child(child);
}
}

void CircleMaskViewManager::RemoveAllChildren(winrt::Windows::UI::Xaml::FrameworkElement const &parent) noexcept
{
void CircleMaskViewManager::RemoveAllChildren(winrt::Windows::UI::Xaml::FrameworkElement const &parent) noexcept {
if (auto const &border = parent.try_as<winrt::Windows::UI::Xaml::Controls::Border>()) {
border.Child(nullptr);
}
}

void CircleMaskViewManager::RemoveChildAt(winrt::Windows::UI::Xaml::FrameworkElement const &parent, int64_t /*index*/) noexcept
{
void CircleMaskViewManager::RemoveChildAt(
winrt::Windows::UI::Xaml::FrameworkElement const &parent,
int64_t /*index*/) noexcept {
if (auto const &border = parent.try_as<winrt::Windows::UI::Xaml::Controls::Border>()) {
border.Child(nullptr);
}
Expand All @@ -117,8 +122,7 @@ void CircleMaskViewManager::RemoveChildAt(winrt::Windows::UI::Xaml::FrameworkEle
void CircleMaskViewManager::ReplaceChild(
winrt::Windows::UI::Xaml::FrameworkElement const &parent,
winrt::Windows::UI::Xaml::UIElement const & /*oldChild*/,
winrt::Windows::UI::Xaml::UIElement const &newChild) noexcept
{
winrt::Windows::UI::Xaml::UIElement const &newChild) noexcept {
if (auto const &border = parent.try_as<winrt::Windows::UI::Xaml::Controls::Border>()) {
border.Child(newChild);
}
Expand All @@ -128,8 +132,7 @@ winrt::Windows::Foundation::IInspectable HeightToCornerRadiusConverter::Convert(
winrt::Windows::Foundation::IInspectable const &value,
winrt::Windows::UI::Xaml::Interop::TypeName const & /*targetType*/,
winrt::Windows::Foundation::IInspectable const & /*parameter*/,
winrt::hstring const & /*language*/) noexcept
{
winrt::hstring const & /*language*/) noexcept {
double d = winrt::unbox_value<double>(value);

if (isnan(d)) {
Expand All @@ -143,13 +146,11 @@ winrt::Windows::Foundation::IInspectable HeightToCornerRadiusConverter::ConvertB
winrt::Windows::Foundation::IInspectable const &value,
winrt::Windows::UI::Xaml::Interop::TypeName const & /*targetType*/,
winrt::Windows::Foundation::IInspectable const & /*parameter*/,
winrt::hstring const & /*language*/) noexcept
{
winrt::hstring const & /*language*/) noexcept {
return value;
}

winrt::Windows::UI::Xaml::Data::IValueConverter HeightToCornerRadiusConverter::Instance() noexcept
{
winrt::Windows::UI::Xaml::Data::IValueConverter HeightToCornerRadiusConverter::Instance() noexcept {
static auto const &instance = winrt::make<HeightToCornerRadiusConverter>();
return instance;
};
Expand Down
27 changes: 12 additions & 15 deletions samples/NativeModuleSample/cpp-lib/windows/NativeModuleSample/CircleMask.h
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,34 +18,32 @@

#endif

namespace winrt::NativeModuleSample::implementation
{
namespace winrt::NativeModuleSample::implementation {

void RegisterCircleMaskNativeComponent(
winrt::Microsoft::ReactNative::IReactPackageBuilder const &packageBuilder) noexcept;

#ifdef RNW_NEW_ARCH

struct CircleMaskComponentView : winrt::implements<CircleMaskComponentView, winrt::IInspectable>,
NativeModuleSampleCodegen::BaseCircleMask<CircleMaskComponentView>
{
winrt::Microsoft::UI::Composition::Visual CreateVisual(const winrt::Microsoft::ReactNative::ComponentView &view) noexcept override;
void Initialize(const winrt::Microsoft::ReactNative::ComponentView &/*view*/) noexcept override;
NativeModuleSampleCodegen::BaseCircleMask<CircleMaskComponentView> {
winrt::Microsoft::UI::Composition::Visual CreateVisual(
const winrt::Microsoft::ReactNative::ComponentView &view) noexcept override;
void Initialize(const winrt::Microsoft::ReactNative::ComponentView & /*view*/) noexcept override;

private:
private:
winrt::Microsoft::ReactNative::ComponentView::LayoutMetricsChanged_revoker m_layoutMetricChangedRevoker;
winrt::Microsoft::UI::Composition::SpriteVisual m_visual{nullptr};
};

#else

struct CircleMaskViewManager : winrt::implements<
CircleMaskViewManager,
winrt::Microsoft::ReactNative::IViewManager,
winrt::Microsoft::ReactNative::IViewManagerWithChildren>
{
CircleMaskViewManager,
winrt::Microsoft::ReactNative::IViewManager,
winrt::Microsoft::ReactNative::IViewManagerWithChildren> {
public:
CircleMaskViewManager(){}
CircleMaskViewManager() {}

// IViewManager
winrt::hstring Name() noexcept;
Expand All @@ -70,10 +68,9 @@ struct CircleMaskViewManager : winrt::implements<
};

struct HeightToCornerRadiusConverter
: winrt::implements<HeightToCornerRadiusConverter, winrt::Windows::UI::Xaml::Data::IValueConverter>
{
: winrt::implements<HeightToCornerRadiusConverter, winrt::Windows::UI::Xaml::Data::IValueConverter> {
public:
HeightToCornerRadiusConverter(){}
HeightToCornerRadiusConverter() {}

winrt::Windows::Foundation::IInspectable Convert(
winrt::Windows::Foundation::IInspectable const &value,
Expand Down
Loading