Skip to content

Conversation

@anupriya13
Copy link

@anupriya13 anupriya13 commented Dec 16, 2025

Overview

This PR upgrades the Windows implementation of the Picker component to use the new architecture based on XAML Islands. The goal is to modernize the component, improve compatibility with recent React Native Windows changes, and ensure better long-term support.

Design and Implementation

XAML Islands Integration

  • The Windows Picker now leverages XAML Islands, enabling seamless integration of modern XAML controls within React Native Windows apps.
  • This approach decouples the UI rendering from older Win32 components, allowing richer user interfaces and smoother theming.

Architecture Changes

  • The refactored Picker internally communicates with native modules using updated bridges compatible with the latest React Native Windows architecture.
  • State synchronization between JavaScript and native code has been streamlined for improved reliability and performance.
  • Legacy code and obsolete workarounds tied to the previous implementation have been removed to reduce technical debt.

Spec File Changes

  • All the code in “js” directory are for ios and android which remain untouched and as it is while all the code in “src” directory are for windows.
    I have removed the old implementation of windows in “js” directory for Picker.

Testing Instructions

  1. Build the Windows solution in both Debug and Release modes.
  2. Run the sample app and verify that Picker behaves as expected:
    • Options render correctly
    • User can select items
    • No regressions in input methods (keyboard, mouse, touch)

Note

  • It has Windows changes only!
  • Needs react-native 0.82+ and react-native-windows 0.82+ versions. As RNW 0.82 is not released yet, I have used canary version of RNW. Feel free to block this PR till RNW 0.82 is released for stable build.

Screenshots and videos

image image image
picker_3p_windows.mp4

@anupriya13 anupriya13 marked this pull request as ready for review December 17, 2025 06:39
@anupriya13
Copy link
Author

@Naturalclar Please review - windows new arch picker implementation

Copy link

@sundaramramaswamy sundaramramaswamy left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Signing off with some comments. Please address them. LGTM otherwise!

Comment on lines +61 to +64
m_comboBox.HorizontalAlignment(winrt::Microsoft::UI::Xaml::HorizontalAlignment::Stretch);

// For editable ComboBox, trigger selection change always (not just on commit)
m_comboBox.SelectionChangedTrigger(winrt::Microsoft::UI::Xaml::Controls::ComboBoxSelectionChangedTrigger::Always);

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
m_comboBox.HorizontalAlignment(winrt::Microsoft::UI::Xaml::HorizontalAlignment::Stretch);
// For editable ComboBox, trigger selection change always (not just on commit)
m_comboBox.SelectionChangedTrigger(winrt::Microsoft::UI::Xaml::Controls::ComboBoxSelectionChangedTrigger::Always);
m_comboBox.HorizontalAlignment(
winrt::Microsoft::UI::Xaml::HorizontalAlignment::Stretch);
// For editable ComboBox, trigger selection change always (not just on commit)
m_comboBox.SelectionChangedTrigger(
winrt::Microsoft::UI::Xaml::Controls::ComboBoxSelectionChangedTrigger::Always);

Minor: fix formatting

// For editable ComboBox, add items as strings for proper autocomplete behavior
// For non-editable, use ComboBoxItem for testID support
if (newProps->editable) {
m_comboBox.Items().Append(winrt::box_value(winrt::to_hstring(item.label)));

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
m_comboBox.Items().Append(winrt::box_value(winrt::to_hstring(item.label)));
m_comboBox.Items()
.Append(winrt::box_value(winrt::to_hstring(item.label)));

Minor: fix formatting.

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants