profile
viewpoint

asklar/XamlStraddle 1

A library to dual target system XAML and WinUI

ddalp/react-native-windows 0

A framework for building native Windows apps with React.

kmelmon/react-native 0

A framework for building native apps with React.

kmelmon/react-native-dualscreen 0

Prototype repo for developing TwoPaneView and supporting native modules

kmelmon/react-native-windows 0

A framework for building native Windows apps with React.

kmelmon/releases 0

React Native releases

kmelmon/RNGallery 0

This repo contains the react-native Gallery app created by Microsoft

issue openedmicrosoft/microsoft-ui-xaml

Proposal: Add tracing/tooling to aid in tracking focus state changes

<!-- This is a template for new feature or API proposals. For example you can use this to propose a new API on an existing type, or an idea for a new UI control. For feature proposals related to UWP or the app models, please open an issue on the Project Reunion repository: https://github.com/microsoft/ProjectReunion

It's fine if you don't have all the details: you can start with the Summary and Rationale.

This link describes the WinUI feature/API proposal process: https://github.com/Microsoft/microsoft-ui-xaml/blob/master/docs/feature_proposal_process.md -->

Proposal: Add tracing/tooling to aid in tracking focus state changes

<!-- Add a title for your feature or API proposal. Please be short and descriptive -->

Summary

<!-- Include 1-2 sentences summarizing your feature or API proposal --> This came out of root causing https://github.com/microsoft/react-native-windows/issues/6181 To debug this issue, I had to manually debug through FocusManager code, which is very time consuming and requires deep knowledge of the focus code. There are many scenarios (eg TabFocusNavigation behavior, apps changing focus in the middle of getting focus, etc), and no tooling to make the debugging process easier.

I am proposing adding tracing or other tooling to shed light on the process FocusManager goes through when focus is being changed. This tooling would shed light on why a given control is being given focus, thus making it easier to understand what factors influenced the algorithm, allowing customers to fix or workaround problems where focus is not working as expected.

Rationale

<!-- Create a list that describes WHY the feature should be added to WinUI for all developers and users. Proposals often have multiple motives for why we should do the work, so list each one as a separate bullet. If applicable you can also describe how the proposal aligns to the current WinUI roadmap and priorities in a separate paragraph: https://github.com/Microsoft/microsoft-ui-xaml/blob/master/docs/roadmap.md -->

  • Customers can unblock themselves when encountering issues
  • Time saver for the dev team

<!---------------------- The below sections are optional when submitting an idea or proposal. All sections are required before we'll accept a PR to master, but aren't necessary to start the discussion. ------------------------>

Scope

<!-- Please include a list of what the feature should and shouldn't do by filling in the table below. 'Must' implies that the feature should not ship without this capability.
'Should' is something we should push hard for, but is not absolutely required to ship. 'Could' is a nice-to-have; a good stretch goal that isn't painful if we don't achieve it. 'Won't' is a clear statement that the proposal/feature will intentionally not have that capability. This list will evolve and grow as the proposal becomes more refined over time. A good rule of thumb is to start your proposal with no more than 7 high-level requirements. -->

Capability Priority
This proposal will allow developers to more easily understand why a given control is receiving focus without debugging FocusManager code Must

Important Notes

<!-- Please include any other important details. This could include one or more of:

  • usage examples
  • an API proposal (any supported language or pseudocode is fine)
  • design mockups or example screenshots
  • other implementation notes -->

Open Questions

<!-- Please list any open issues that you think still need to be addressed. These could include areas you think would benefit from community or WinUI team input -->

created time in 2 days

push eventmicrosoft/react-native-windows

kmelmon

commit sha f9981681a4e202f2f936519c1be6fe7fb17aba52

Change files (#6320)

view details

push time in 2 days

PR merged microsoft/react-native-windows

Fix default tab order for ScrollView + a couple other controls Area: Keyboard Area: ScrollView

Fixes #6181

This issue was discovered by Facebook. With a simple setup like this:

function ScrollViewBugExample() {
  return (
    <View>
      <Button title="Button 1" />
      <ScrollView>
        <Button title="Button 2" />
      </ScrollView>
      <Button title="Button 3" />
    </View>
  );
}

the tab order goes in the reverse order from what you would expect (Button 3 => Button 2 => Button 1, oops! should be Button 1 => Button 2 => Button 3)

The issue here was caused by a simple bug in RNW code - we're setting the TabIndex on ScrollViewer to 0. This is not the default tab index in XAML, which is max int. Thus when XAML's FocusManager goes through the search algorithm, it compares max int to 0 and this throws off the algorithm.

The fix is simple: Don't bother setting a TabIndex on ScrollViewer. It is ALREADY being set to max int by XAML.

I also noticed two other controls have the same bug, so I went ahead and fixed those as well.

Microsoft Reviewers: Open in CodeFlow
+8 -4

0 comment

4 changed files

kmelmon

pr closed time in 2 days

issue closedmicrosoft/react-native-windows

Unexpected tab order with ScrollView and components around it

Environment

Run the following in your terminal and copy the results here.

  1. npx react-native --version: 4.13.0
  2. npx react-native run-windows --info:
  System:
    OS: Windows 10 10.0.19041
    CPU: (40) x64 Intel(R) Xeon(R) Gold 6248 CPU @ 2.50GHz
    Memory: 157.00 GB / 190.60 GB
  Binaries:
    Node: 12.18.3 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.17.0-20190429.1820 - C:\open\fbsource\xplat\third-party\yarn\yarn.BAT
    npm: 6.14.6 - C:\Program Files\nodejs\npm.CMD
    Watchman: 20200724.030019 - C:\tools\watchman\watchman.EXE
  Installed UWP SDKs:
    10.0.18362.0
  1. reg query "HKLM\SOFTWARE\Microsoft\Windows\CurrentVersion\AppModelUnlock"
HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\AppModelUnlock
    AllowDevelopmentWithoutDevLicense    REG_DWORD    0x1
    AllowAllTrustedApps    REG_DWORD    0x1

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

  1. Clone this repo
  2. Run playground app (UWP or Win32)
  3. Modify one of the RNTester examples to:
function ScrollViewBugExample() {
  return (
    <View>
      <Button title="Button 1" />
      <ScrollView>
        <Button title="Button 2" />
      </ScrollView>
      <Button title="Button 3" />
    </View>
  );
}
  1. Use tab to cycle focus in the app

Expected Results

Tab order expected: Button 1, Button 2, Button 3 Tab order actual: Button 2, Button 1, Button 3

I also verified this isn't a Xaml bug as the following Xaml has the expected tab order:

    <StackPanel>
        <Button Content="Button 1" />
        <ScrollViewer Height="20">
            <Button Content="Button 2" />
        </ScrollViewer>
        <Button Content="Button 3" />
    </StackPanel>

closed time in 2 days

lyahdav

pull request commentmicrosoft/react-native-windows

Implement backgroundColor prop for Text.

I'm confident we can find a way to dump the tree without making the tree dumping control part of the pages. Tree dumping gives us a ton of coverage without a lot of effort, and we can dump things like the runs and the colors (provided we add that code to the tree dumper utility). So this is my top priority in terms of next steps in additional coverage.

A potential longer term goal would be to generalize native tree dumping and bring that to other platforms. But we first need to tackle some fundamental issues such as how to make each platform generate consistent tree dumps, waiting for the tree to stabilizie, how to expose the format of the tree in an extensible way, and likely more.

We can also explore the possibility of extending our test infrastructure to do arbitrary things, as I eluded to above. That would allow us more freedom, and may be necessary to implement WaitForIdle (investigation pending).

rectified95

comment created time in 2 days

PullRequestReviewEvent

Pull request review commentmicrosoft/react-native-windows

Integrate RNTester Redesign (8/26 Nightly Build)

 let pages = [   'Timers',   'WebSocket',   'Transforms',-  //  '<LegacyControlStyleTest>',-  //  '<LegacyTransformTest>',-  //  '<LegacyTextInputTest>',-  //  '<LegacyLoginTest>',-  //  '<LegacyDirectManipulationTest>',-  //  '<LegacyImageTest>',-  //  '<LegacyAccessibilityTest>', ];  describe('VisitAllPagesTest', () => {-  pages.forEach(function(page) {-    it(page, () => {-      console.log('loading page ' + page);-      HomePage.goToTestPage(page);-      HomePage.backToHomePage();-    });-  });+  componentExamples.forEach(ex => addTestPage(ex, 'component'));+  apiExamples.forEach(ex => addTestPage(ex, 'api')); });++function addTestPage(name: string, type: 'api' | 'component') {

addTestPage [](start = 9, length = 11)

nit: consider renaming addTestPage => visitTestPage

NickGerleman

comment created time in 2 days

PullRequestReviewEvent

Pull request review commentmicrosoft/react-native-windows

Integrate RNTester Redesign (8/26 Nightly Build)

 class FlyoutExample extends React.Component<{}, IFlyoutExampleState> { }  export const displayName = (_undefined?: string) => {};-export const title = '<Flyout>';+export const title = 'Flyout';

add category?

NickGerleman

comment created time in 2 days

PullRequestReviewEvent

Pull request review commentmicrosoft/react-native-windows

Integrate RNTester Redesign (8/26 Nightly Build)

 const RNTesterExampleListViaHook = ({ }) => {   const colorScheme: ?ColorSchemeName = useColorScheme();   const theme = colorScheme === 'dark' ? themes.dark : themes.light;+  const exampleTitle =+    screen === 'component'+      ? 'Component Store'+      : screen === 'api'+      ? 'API Store'+      : 'Bookmarks';   return (     <RNTesterThemeContext.Provider value={theme}>-      <View style={styles.exampleContainer}>-        <Header title="RNTester" />-        <RNTesterExampleList onNavigate={onNavigate} list={list} />-      </View>+      <RNTesterBookmarkContext.Provider value={bookmark}>+        <View style={styles.exampleContainer}>+          <Header title={exampleTitle} />+          <RNTesterExampleList+            onNavigate={onNavigate}+            recentComponents={recentComponents}+            recentApis={recentApis}+            updateRecentlyViewedList={UpdateRecentlyViewedList}+            list={list}+            screen={screen}+          />+        </View>+      </RNTesterBookmarkContext.Provider>     </RNTesterThemeContext.Provider>   ); };  class RNTesterApp extends React.Component<Props, RNTesterNavigationState> {   _mounted: boolean; +  constructor() {+    super();++    // RNTester App currently uses Async Storage from react-native for storing navigation state+    // and bookmark items.+    // TODO: Add Native Async Storage Module in RNTester

// TODO: Add Native Async Storage Module in RNTester [](start = 4, length = 52)

File issue to track this.

NickGerleman

comment created time in 2 days

PullRequestReviewEvent

pull request commentmicrosoft/react-native-windows

Implement backgroundColor prop for Text.

It's very easy to add a test to visit any page, we already have several of them. All you need is the description string for the page which appears in the RNTester list.

Appium is an out-of-proc technology. It uses the webdriver w3c protocol to communicate with the client app. Most of webdriver is simply wrapping UIA-like concepts from Selenium so for the most part you are limited to what UIA can do. That means currently we don't have direct access to things like the color of a webdriver "uielement". There is an ExecuteScript API in the protocol as well, which could allow more flexibility, but I honestly don't know too much about it yet. I plan to dig deeper into this as I figure out how to implement WaitForIdle.

rectified95

comment created time in 2 days

PR opened microsoft/react-native-windows

Fix default tab order for ScrollView + a couple other controls

Fixes #6181

This issue was discovered by Facebook. With a simple setup like this:

function ScrollViewBugExample() { return ( <View> <Button title="Button 1" /> <ScrollView> <Button title="Button 2" /> </ScrollView> <Button title="Button 3" /> </View> ); }

the tab order goes in the reverse order from what you would expect (Button 3 => Button 2 => Button 1).

The issue here was caused by a simple bug in RNW code - we're setting the TabIndex on ScrollViewer to 0. This is not the default tab index in XAML, which is max int. Thus when XAML's FocusManager goes through the search algorithm, it compares max int to 0 and this throws off the algorithm.

The fix is simple: Don't bother setting a TabIndex on ScrollViewer. It is ALREADY being set to max int by XAML.

I also noticed two other controls have the same bug, so I went ahead and fixed those as well.

+8 -4

0 comment

4 changed files

pr created time in 2 days

create barnchkmelmon/react-native-windows

branch : taborder-fix

created branch time in 3 days

issue commentmicrosoft/react-native-windows

Unexpected tab order with ScrollView and components around it

Bug understood. We mistakenly set a default TabIndex for ScrollView to 0 instead of int_max, which is the default TabIndex for XAML. This causes confusion for FocusManager and the result is wacky tab ordering.

Simple fix, will have PR soon.

lyahdav

comment created time in 3 days

issue commentmicrosoft/react-native-windows

Unexpected tab order with ScrollView and components around it

XAML tree looks like this:

**CRootVisual 0x010659f8, comp node 0x04bbe858 CGrid 0x04ba88d0 CXamlIslandRootCollection 0x04b95e98 CConnectedAnimationRoot 0x080971b0 CPopupRoot 0x04ba9000 CPrintRoot 0x04b65030 CTransitionRoot 0x04b95bf8 CFullWindowMediaRoot 0x04b65c90 CRootScrollViewer 0x08075428 CScrollContentPresenter 0x0802a308 CBorder 0x04b631b0, comp node 0x04bbad28 CFrame 0x08086b18 CContentPresenter 0x04ba8480 CPage 0x04b8f1c0 CGrid 0x0802a478 "ReactRootView" CGrid 0x0802aba8, comp node 0x04bdde78 CPanel 0x11b8f2d0 "<reacttag>: 43" CPanel 0x11b8fff0 "<reacttag>: 39" CPanel 0x11b8f6c0 "<reacttag>: 37" CContentControl 0x0104b3e0 CContentPresenter 0x11ab3a40 CPanel 0x11a19920 "<reacttag>: 9" CBorder 0x11ac20b0, comp node 0x0103e128 CPanel 0x11a19d10 "<reacttag>: 7" CTextBlock 0x11a09c68 "<reacttag>: 5", text {Button 1} CScrollViewer 0x08075a28 "<reacttag>: 25" CBorder 0x11ac1ab0 "Root" CGrid 0x11ab3d20 CScrollContentPresenter 0x11ab45c0 "ScrollContentPresenter" CContentControl 0x01053c30, comp node 0x0104a060 CContentPresenter 0x11ab4b80 CPanel 0x11a19530 "<reacttag>: 23" CContentControl 0x0103ebe0 CContentPresenter 0x11ab4e60 CPanel 0x11a197d0 "<reacttag>: 19" CBorder 0x11ac1c30, comp node 0x0104a250 CPanel 0x11a19e60 "<reacttag>: 17" CTextBlock 0x11a09aa8 "<reacttag>: 15", text {Button 2} CTransitionRoot 0x11b46810, comp node 0x01002118 CLayoutTransitionElement 0x11ab1fa0, target 0x11b46ff0, comp node 0x11b1def0 CGrid 0x11ab3030 CScrollBar 0x11a09568 "VerticalScrollBar" CScrollBar 0x11a09728 "HorizontalScrollBar" CBorder 0x11ac1630 "ScrollBarSeparator" CContentControl 0x04be0408 CContentPresenter 0x11ab4cf0 CPanel 0x11a19a70 "<reacttag>: 35" CBorder 0x11ac26b0, comp node 0x11a2bcd0 CPanel 0x11a19680 "<reacttag>: 33" CTextBlock 0x11a09e28 "<reacttag>: 29", text {Button 3} CTransitionRoot 0x11b46960 **

lyahdav

comment created time in 3 days

pull request commentmicrosoft/react-native-windows

Implement backgroundColor prop for Text.

We will eventually have automated tests for all the ViewManagers and props via RNTester automation. There is already an RNTester page for Text, and this page does have a small test case for backgbroundColor, but the nested cases may not be fully covered. I think in this case it makes sense to add any missing coverage to this page and upstream the change (open to discussion on this).

rectified95

comment created time in 3 days

PullRequestReviewEvent

push eventmicrosoft/react-native-windows

kmelmon

commit sha 848cbeef4c1d0d293bcd5dddc87dc032fc3b4d5f

Change files (#6286)

view details

push time in 4 days

PR merged microsoft/react-native-windows

Bugfix: Dimensions never fires change events Area: DeviceInfo

Fixes #6269

This regression crept in when DeviceInfoModule was migrated to the new module system. Super simple bug: when the dimensions change, we update everything but forget to fire the change event. This fix adds the missing line of code.

You can verify the scenario in the already existing Dimensions RNTester page. We'll want to eventually add an automated test for this, but that can be done later.

Note that this fix also requires https://github.com/microsoft/react-native-windows/pull/6285. Any app with a Dimensions listener will throw a redbox when the window is resized without that fix. Will wait for that fix before submitting this.

Microsoft Reviewers: Open in CodeFlow
+9 -0

0 comment

2 changed files

kmelmon

pr closed time in 4 days

issue closedmicrosoft/react-native-windows

Dimensions change event never fires

This issue was discovered by a partner in PAX team, currently blocking with no workaround.

The issue is that the Dimensions object never fires any change events. So if you resize the window or change the DPI, any listeners to Dimensions will not receive the new dimensions.

To Repro: Load RNTester Go to Dimensions page Resize the window

RESULT the text showing the current dimensions does not update.

I dug a bit into the code, which led me here: https://github.com/microsoft/react-native-windows/blob/958ebb9ceb5cab3241369c7305cab0d82e1c01a0/vnext/Microsoft.ReactNative/Modules/DeviceInfoModule.cpp#L60

void DeviceInfoHolder::notifyChanged() noexcept {
  if (m_notifyCallback) {
    m_notifyCallback(getDimensions());
  }
}

This is supposed to get called whenever we're supposed to fire the change event, but nobody is calling it.

This used to work so it is a regression.

closed time in 4 days

kmelmon

issue closedmicrosoft/react-native-windows

Upstream change to add TestID to RNTester Buttons

Added in #5555 as part of RNTester E2ETest Work

closed time in 5 days

NickGerleman

PR opened microsoft/react-native-windows

Bugfix: Dimensions never fires change events

Fixes #6269

This regression crept in when DeviceInfoModule was migrated to the new module system. Super simple bug: when the dimensions change, we update everything but forget to fire the change event. This fix adds the missing line of code.

You can verify the scenario in the already existing Dimensions RNTester page. We'll want to eventually add an automated test for this, but that can be done later.

+9 -0

0 comment

2 changed files

pr created time in 5 days

create barnchkmelmon/react-native-windows

branch : dimsfix

created branch time in 5 days

issue commentmicrosoft/react-native-windows

Dimensions change event never fires

Priority understood. Chatted with Andrew, I found there is actually a straightforward fix that can be made. I'll take a shot at fixing this.

kmelmon

comment created time in 5 days

issue commentmicrosoft/react-native-windows

Upstream change to add TestID to RNTester Buttons

Nope - the testID change was all. We'll need to upstream more stuff if there are other changes in this file.

NickGerleman

comment created time in 5 days

issue commentmicrosoft/react-native-windows

Migrate CI Loop to use Azure scale set

Instructions on how to create a scale set agent: https://docs.microsoft.com/en-us/azure/devops/pipelines/agents/scale-set-agents?view=azure-devops

kmelmon

comment created time in 5 days

issue commentmicrosoft/react-native-windows

Upstream change to add TestID to RNTester Buttons

Still waiting for a review 12 days later

NickGerleman

comment created time in 5 days

push eventmicrosoft/react-native-dualscreen

John Slevinsky

commit sha 826165c50c405fe8caa8e5de11291ab89cd75f26

Bug fix: DisplayMask may not be initialized before onResume

view details

kmelmon

commit sha a8d86b7694b3c0f956356d2f0dec15c74669fda1

Merge pull request #60 from joslevin/joslevin/resume_fix Bug fix: DisplayMask may not be initialized before onResume

view details

push time in 5 days

PR merged microsoft/react-native-dualscreen

Bug fix: DisplayMask may not be initialized before onResume

Bug: After closing (i.e. back out all the way, NOT force-quit) the app, then reopening it, DisplayMask won't be initialized properly. I have a consistent repro in my client app - window rects have zero dimension, spanning isn't detected, etc.

Fix: Only query DisplayMask on/after onResume.

+11 -7

1 comment

1 changed file

joslevin

pr closed time in 5 days

PullRequestReviewEvent

pull request commentmicrosoft/react-native-dualscreen

Bug fix: DisplayMask may not be initialized before onResume

Sorry about the delay. Thanks a ton for fixing this! Looks good

joslevin

comment created time in 5 days

PullRequestReviewEvent

pull request commentfacebook/react-native

add testID, helps tests find items in the list

@TheSavior can you help get someone to review this? Should be trivial and allows us to un-fork a file in windows.

kmelmon

comment created time in 5 days

PullRequestReviewEvent
PullRequestReviewEvent

Pull request review commentmicrosoft/react-native-gallery

Add page for DateTimePicker component

 App::App() noexcept      PackageProviders().Append(make<ReactPackageProvider>()); // Includes all modules in this project     PackageProviders().Append(winrt::CheckboxWindows::ReactPackageProvider());+    PackageProviders().Append(winrt::DateTimePicker::ReactPackageProvider());

Please add a TODO to remove these lines of code once issue https://github.com/microsoft/react-native-gallery/issues/9 is fixed.

chiaramooney

comment created time in 6 days

PullRequestReviewEvent

issue commentmicrosoft/react-native-gallery

fix auto-linking of checkbox

@jonthysell we're seeing more modules being added to the app and they're all doing the same workaround. If you can shed some light on this that would be great.

kmelmon

comment created time in 6 days

issue commentmicrosoft/react-native-windows

Dimensions change event never fires

Nope, this issue is RNW-specific as the bug is in our C++ code which isn't shared with any other platform. FWIW it seems like the Android bug is also in native code.

kmelmon

comment created time in 6 days

issue commentmicrosoft/react-native-windows

Dimensions change event never fires

There are 2 issues here:

  • We introduced a regression when we refactored DeviceInfoModule.cpp, this caused us to stop firing the event when dimensions change. That happens here:
void DeviceInfoHolder::updateDeviceInfo() noexcept {
  if (xaml::Window::Current()) {
    auto const window = xaml::Window::Current().CoreWindow();

    m_windowWidth = window.Bounds().Width;
    m_windowHeight = window.Bounds().Height;
  } else {
    /// TODO: WinUI 3 Island - mock for now
    m_windowWidth = 600;
    m_windowHeight = 800;
  }
  winrt::Windows::UI::ViewManagement::UISettings uiSettings;
  m_textScaleFactor = uiSettings.TextScaleFactor();
  auto const displayInfo = winrt::Windows::Graphics::Display::DisplayInformation::GetForCurrentView();
  m_scale = static_cast<float>(displayInfo.ResolutionScale()) / 100;
  m_dpi = displayInfo.LogicalDpi();
  m_screenWidth = displayInfo.ScreenWidthInRawPixels();
  m_screenHeight = displayInfo.ScreenHeightInRawPixels();
}

This function is supposed to call notifyChanged() at the bottom, but it doesn't, and thus we don't raise the event.

I fixed this but it exposed another bug:

  • Once we start firing the event, the JS code is receiving an array instead of an object and throws an exception. This is in Vlad’s area. Fixing this has implications across a variety of scenarios (C# vs C++, native modules vs JSI). In the RNTester repro, I see this code in Dimensions.js getting confused:
static set(dims: $ReadOnly<{[key: string]: any, ...}>): void {
    // We calculate the window dimensions in JS so that we don't encounter loss of
    // precision in transferring the dimensions (which could be non-integers) over
    // the bridge.
    let {screen, window} = dims;

dims gets sent to JS as an array with one entry instead of an object: image

The code that produces the param in the event looks like this:

React::JSValueObject DeviceInfoHolder::getDimensions() noexcept {
  return React::JSValueObject{
      {"window",
       React::JSValueObject{{"width", m_windowWidth * m_scale},
                            {"height", m_windowHeight * m_scale},
                            {"scale", m_scale},
                            {"fontScale", m_textScaleFactor},
                            {"densityDpi", m_dpi}}},
      {"screen",
       React::JSValueObject{{"width", m_screenWidth},
                            {"height", m_screenHeight},
                            {"scale", m_scale},
                            {"fontScale", m_textScaleFactor},
                            {"densityDpi", m_dpi}}},
  };
}

So somehow JSValueObject is generating an array when it should generate an object. This code used to work back before we moved in the direction of specs/codegen. So something in there needs to change.

kmelmon

comment created time in 6 days

issue closedmicrosoft/react-native-windows

Dimensions is not firing window/screen size-changed events

It looks like DeviceInfo/DeviceInfoModule only grabs the dimensions up-front, doesn't subscribe to Xaml updates, and doesn't fire the events to ReactNative. This makes it difficult for our app to respond to window resizing.

closed time in 6 days

jaredhms

issue commentmicrosoft/react-native-windows

Dimensions is not firing window/screen size-changed events

I tracked this back to a regression from Di's fix, which was working. Filed a separate issue #6269 to track fixing the regression.

jaredhms

comment created time in 6 days

issue openedmicrosoft/react-native-windows

Dimensions change event never fires

This issue was discovered by a partner team in PAX, currently blocking with no workaround.

The issue is that the Dimensions object never fires any change events. So if you resize the window or change the DPI, any listeners to Dimensions will not receive the new dimensions.

To Repro: Load RNTester Go to Dimensions page Resize the window

RESULT the text showing the current dimensions does not update.

I dug a bit into the code, which led me here: https://github.com/microsoft/react-native-windows/blob/958ebb9ceb5cab3241369c7305cab0d82e1c01a0/vnext/Microsoft.ReactNative/Modules/DeviceInfoModule.cpp#L60

void DeviceInfoHolder::notifyChanged() noexcept { if (m_notifyCallback) { m_notifyCallback(getDimensions()); } } This is supposed to get called whenever we're supposed to fire the change event, but nobody is calling it.

This used to work so it is a regression.

created time in 6 days

issue openedmicrosoft/react-native-windows

Master task: Add tests for every ViewManager, and test setting every prop/event

This is a master task to track adding test coverage of ViewManagers that are part of core.

Can leverage some RNTester pages. Will need to create more RNTester pages as well.

Will likely need more infrastructural support as we discover requirements (eg controlling animations, enhancing tree dumps, etc).

created time in 15 days

issue openedmicrosoft/react-native-windows

Migrate CI Loop to use Azure scale set

WinDev is bringing up a pool of VMs with better hardware to share across the WinDev teams. Using this pool will solve a major pain point for our CI loop - running out of memory.

This task is tracking moving our CI loop off of the "free" Microsoft hosted agents onto this pool when it comes online (ETA is ~2 weeks).

High level list of work: -Change yml to use the new pool -Install components that will not come installed by default. Currently known set of components includes node.js and yarn -Cut down on the total work being done to save $. We currently build the product binaries ~20 times across all the jobs that run in PR.

Keith Mahoney is on point from WinDev and is bringing up the pool.

created time in 15 days

issue commentmicrosoft/react-native-windows

Upstream change to add TestID to RNTester Buttons

Change has been out for PR in the RN repo for a couple days now: https://github.com/facebook/react-native/pull/30138 Still waiting for someone to review.

NickGerleman

comment created time in 15 days

pull request commentfacebook/react-native

add testID, helps tests find items in the list

This is a trivial one line change that will help react-native-windows remove a forked file. Can someone please review?

kmelmon

comment created time in 15 days

issue openedmicrosoft/react-native-windows

Due diligence: Declare correct dependencies in community modules

In the past, when adding support for Windows to community modules, we've accidentally made the community module package depend on a specific version of react-native-windows, or a specific major version. This isn't the best way to declare the dependency as it ties the module to a specific version. The preferred way to declare the dependency as a peer dependency, and should use the >= specifier and begin at some min version, typically 0.62.0 (if it works with the module).

Example of doing it the "right" way (taken from https://github.com/react-native-community/react-native-checkbox/blob/ee84209e1a45454401894523654fa763fc924974/src/package.json#L45):

"peerDependencies": { "react": "*", "react-native": ">= 0.62", "react-native-windows": ">=0.62" },

This task is tracking going back through every community module we've added windows support for and making sure we've declared the react-native-windows dependency in the preferred way.

created time in 16 days

issue commentmicrosoft/react-native-windows

Unexpected tab order with ScrollView and components around it

This is almost certainly due to the structure of the XAML tree we generate when we render it... The default focus search algorithm derives the order from the structure, which is the case when you don't set any tab index.

lyahdav

comment created time in 17 days

PR opened facebook/react-native

add testID, helps tests find items in the list

<!-- Thanks for submitting a pull request! We appreciate you spending the time to work on these changes. Please provide enough information so that others can review your pull request. The three fields below are mandatory. -->

Summary

<!-- Explain the motivation for making this change. What existing problem does the pull request solve? --> This change adds a testID to each item in the RNTester list. This helps Appium find items in the list for automated tests. The change was added in react-native-windows as part of end-to-end test infrastructure changes. See https://github.com/microsoft/react-native-windows/pull/5555

Changelog

<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see: https://github.com/facebook/react-native/wiki/Changelog -->

[General] [Changed] - add testID to items in RNTester test list, helps test automation tools find the items

Test Plan

<!-- Demonstrate the code is solid. Example: The exact commands you ran and their output, screenshots / videos if the pull request changes the user interface. --> Change is currently running in react-native-windows CI loop.

+1 -0

0 comment

1 changed file

pr created time in 17 days

create barnchkmelmon/react-native

branch : add-testID

created branch time in 17 days

issue commentmicrosoft/react-native-windows

Build react-native-windows controls gallery app

@cameronmaske see: https://github.com/microsoft/react-native-gallery

kmelmon

comment created time in 17 days

issue commentmicrosoft/react-native-windows

Popups do not render correctly in RTL mode

@kmelmon need to confirm if this still repros

xboxdavchi

comment created time in 18 days

issue closedmicrosoft/react-native-windows

onMouseEnter/Leave do not get called when layout changes what is under cursor

<!-- Your issue will be triaged by the RNW team according to this process: https://github.com/microsoft/react-native-windows/wiki/Triage-Process -->

Environment

Run the following in your terminal and copy the results here.

  1. npx react-native --version: 4.9.0
  2. npx react-native run-windows --info: System: OS: Windows 10 10.0.19041 CPU: (40) x64 Intel(R) Xeon(R) Gold 6248 CPU @ 2.50GHz Memory: 154.88 GB / 190.60 GB Binaries: Node: 12.15.0 - C:\open\fbsource\xplat\third-party\node\bin\node.BAT Yarn: 1.17.0-20190429.1820 - C:\open\fbsource\xplat\third-party\yarn\yarn.BAT npm: 6.10.2 - C:\Program Files\nodejs\npm.CMD Watchman: 20200430.030054 - C:\tools\watchman\watchman.EXE Installed UWP SDKs: 10.0.17763.0 10.0.18362.0
  3. reg query "HKLM\SOFTWARE\Microsoft\Windows\CurrentVersion\AppModelUnlock" HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\AppModelUnlock AllowDevelopmentWithoutDevLicense REG_DWORD 0x1

<!-- Consider including this information as well: What SDK version are you building for? Choose from 10.0.15063, 10.0.16299, 10.0.18362, etc.

  • Target Platform Version(s): 10.0.18362 What device(s) are you targeting? Choose any from Desktop, Xbox, Hololens)
  • Target Device(s): Desktop Which version of Visual Studio are you using? Specify Visual Studio 2017 or Visual Studio 2019
  • Visual Studio Version: Visual Studio 2019 Which build configuration are you running? Choose from Debug, DebugBundle, Release, ReleaseBundle
  • Build Configuration: Debug -->

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

  1. For the sample below we have a rect that moves every couple seconds. It will turn red on mouse enter and blue on mouse leave.
  2. Move your cursor onto the rect and it will become red.

Expected Results

When the rect moves away by itself, the rect should turn blue. It stays red. If you move your mouse to where rect would appear, it should turn red when under the cursor.

This is how onMouseEnter/onMouseLeave works on the web (including the RNW renderer for the snack below). It is also how Xaml works with PointerEntered/Exited events since it was fixed in Windows 8.1 https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.uielement.pointerexited?view=winrt-19041#windows8-behavior Mac RN behaves this way as well, i.e. if a layout change causes what is under the cursor to change, appropriate mouse enter/leaveevents will be raised...

<!-- Troubleshooting If you see build failure on react-native run-windows, please try again with 'react-native run-windows --logging' and provide the output. -->

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

https://snack.expo.io/@cenkergan/3302f6

You can run the following sample in playground-win32 by overriding one of the other Samples*.tsx files:

import React, {useState, useEffect} from 'react';
import {AppRegistry, View} from 'react-native';

export default function Bootstrap() {
  const [mbgcl, setBgcl] = useState('green');
  const [left, setLeft] = useState(100);
  useEffect(() => {
    setTimeout(() => {
      setLeft((left + 100) % 500);
    }, 2000);
  }, [left]);

  return (
    <View
      style={{flex:1}}>
      <View
        style={{
          backgroundColor: mbgcl,
          width: 60,
          height: 60,
          position: 'absolute',
          left,
        }}
        onMouseEnter={() => {
          setBgcl('red');
        }}
        onMouseLeave={() => {
          setBgcl('blue');
        }}
      />
    </View>
  );
}

AppRegistry.registerComponent('Bootstrap', () => Bootstrap);

--- For Xaml you can create a new blank UWP CS project, change Grid to Canvas, add a MyRect rect with a white background and paste this code to MainPage.xaml.cs
    public sealed partial class MainPage : Page
    {
        DispatcherTimer dispatcherTimer = new DispatcherTimer();
        public MainPage() {
            this.InitializeComponent();
            dispatcherTimer.Interval = new TimeSpan(0, 0, 1);
            dispatcherTimer.Tick += dispatcherTimer_Tick;
            dispatcherTimer.Start();
        }
        void dispatcherTimer_Tick(object sender, object e) {
            Canvas.SetLeft(MyRect, (Canvas.GetLeft(MyRect) + 100) % 500);
        }
        private void MyRect_PointerEntered(object sender, PointerRoutedEventArgs e) {
            MyRect.Fill = new SolidColorBrush(Windows.UI.Colors.DarkRed);
        }
        private void MyRect_PointerExited(object sender, PointerRoutedEventArgs e) {
            MyRect.Fill = new SolidColorBrush(Windows.UI.Colors.Blue);
        }
    }

closed time in 18 days

jackerghan

issue commentmicrosoft/react-native-windows

onMouseEnter/Leave do not get called when layout changes what is under cursor

Update: George is amazing! He found a fix for WinUI 3, which is now checked in. I think it's safe to close this as there's no specific action we need to take on this issue, it will come when we re-target to WinUI 3.

jackerghan

comment created time in 18 days

issue closedmicrosoft/react-native-windows

E2ETest BasePage.treeDumpResult() Has Faulty Wait

#5980 turned on extra eslint rules to catch cases where we have an async function but forget the await operator. One of these cases is in E2ETest, where BasePage defines an async Wait function that it doesn't await for.

I.e. the call to wait 100ms effectively no-ops.

Adding await and converting callers to async functions seems to cause ControlStyle tests to fail. Leaving the faulty code as-is for now with a suppression. We should either fix the tests or just remove the wait.

We're using a version of Jasmine that should support async functions, but the switch of callers to async functions might have side effects.

closed time in 18 days

NickGerleman

issue commentmicrosoft/react-native-windows

E2ETest BasePage.treeDumpResult() Has Faulty Wait

Not worth the effort.

NickGerleman

comment created time in 18 days

issue closedmicrosoft/react-native-windows

Build react-native-windows controls gallery app

We should build a "react-native-windows controls gallery" app. It would serve several purposes: -Help us validate quality, API completeness, Store deployment, etc. -Give us a place to show off the full capabilities of the framework (including Windows-specific stuff) -Acts as a forcing function for the team to wear their customer hat and use the framework end-to-end

closed time in 18 days

kmelmon

issue commentmicrosoft/react-native-windows

Build react-native-windows controls gallery app

First version of app now complete.

kmelmon

comment created time in 18 days

push eventkmelmon/HelloUno

Keith Melmon

commit sha e892d7cfe88579b46dab2b2aaa54d43c5e7be517

hello!

view details

push time in 19 days

create barnchkmelmon/HelloUno

branch : main

created branch time in 19 days

created repositorykmelmon/HelloUno

created time in 19 days

PullRequestReviewEvent

pull request commentmicrosoft/react-native-dualscreen

Ka/horizontal

Thanks a ton for fixing this!

keilwastaken

comment created time in 25 days

PullRequestReviewEvent

Pull request review commentmicrosoft/react-native-dualscreen

Ka/horizontal

 class DualScreenInfo constructor(context: ReactApplicationContext) : ReactContex 				Rect(0, 0, 0, 0) 			} else boundings[0] 		}+	private val isStatusBarVisible: Boolean+		get() {+			val rectangle = Rect()+			val window: Window? = currentActivity?.window;+			window?.decorView?.getWindowVisibleDisplayFrame(rectangle)+			val statusBarHeight = rectangle.top+			return statusBarHeight != 0+		}+	private val mStatusBarHeight: Int+		get() {+			var statusBarHeight: Int = 0;+			if(isStatusBarVisible)+			{+				val resourceId: Int = reactApplicationContext.resources.getIdentifier("status_bar_height", "dimen", "android")+				if (resourceId > 0) {+					statusBarHeight = reactApplicationContext.resources.getDimensionPixelSize(resourceId)+				}+				return statusBarHeight;+			}+			return statusBarHeight;+		} 	private val windowRects: List<Rect> 		get() { 			val boundings = mDisplayMask?.getBoundingRectsForRotation(rotation) 			val windowBounds = windowRect;-			return if (boundings == null  || boundings.size == 0) {+			return if (boundings == null || boundings.size == 0) {+				windowBounds.bottom = windowBounds.bottom - mStatusBarHeight; 				listOf(windowBounds) 			} else { 				val hingeRect = boundings[0]+				hingeRect.bottom = hingeRect.bottom - mStatusBarHeight;

hingeRect.bottom = hingeRect.bottom - mStatusBarHeight; [](start = 4, length = 55)

This line of code should move to inside the else block (for clarity as it's only necessary for that case), and you should also subtract the status bar height from hingeRect.top, otherwise the top rect will remain too tall and go under the hinge.

keilwastaken

comment created time in a month

PullRequestReviewEvent

issue commentmicrosoft/react-native-windows

Component Governance failed, need to update `bl` dependency

It would be best if we can get winappdriver 1.2 out of RC and officially released. I asked the owners about this recently and they said they would be willing to do so. I'll spin up a thread with Dustin about it.

jonthysell

comment created time in a month

issue openedmicrosoft/react-native-windows

Validate for 0.64: textInput.onPressIn/onPressOut

Two new APIs were added to textInput in RN version 0.64: onPressIn onPressOut See: https://github.com/facebook/react-native/commit/b7b0e23

The new APIs are events that fire when the pointer goes down/up.

Although the new APIs are just leveraging pressable, there is a possibility that XAML TextBox will process the pointer events and not propagate them up to the JS layer.

This issues is tracking verifying if these APIs work when we do the upgrade to 0.64

created time in a month

PullRequestReviewEvent

issue openedmicrosoft/RNGallery

Publish app to App Store

The app is currently not being published to the App Store. This task is tracking publishing it.

created time in a month

issue openedmicrosoft/RNGallery

Add CI Loop to repo

We need to add a CI Loop to verify: -Typescript compiles, lint rules pass -Native app builds without errors -App launches (?)

created time in a month

push eventmicrosoft/RNGallery

kmelmon

commit sha 1aec290f6c8bf93d76395486b478ec7a710f2596

type check tsx, fix ts errors (#8)

view details

push time in a month

PR merged microsoft/RNGallery

type check tsx, fix ts errors

get typescript compiler to typecheck all our ts and get ts compile without errors

+5 -2

0 comment

2 changed files

kmelmon

pr closed time in a month

issue openedmicrosoft/RNGallery

fix auto-linking of checkbox

When we upgraded to 0.63, we were unable to get auto-linking working for the @react-native-community/checkbox module.

To remove the manual linking I did this:

remove: PackageProviders().Append(winrt::CheckboxWindows::ReactPackageProvider()); from App.cpp

This generated a redbox error. Probably need help from @jonthysell to figure this one out.

created time in a month

PR opened microsoft/RNGallery

type check tsx, fix ts errors

get typescript compiler to typecheck all our ts and get ts compile without errors

+5 -2

0 comment

2 changed files

pr created time in a month

create barnchmicrosoft/RNGallery

branch : ts-clean

created branch time in a month

issue closedmicrosoft/RNGallery

Upgrade to 0.63

Currently the app is built against RNW version 62. Upgrade to 63.

Known issues: -Will need to remove the manual linking of @react-native-communit/checkbox and letting auto-linking do its thing

closed time in a month

kmelmon

issue commentmicrosoft/RNGallery

Upgrade to 0.63

fixed by https://github.com/microsoft/RNGallery/pull/7

kmelmon

comment created time in a month

PullRequestReviewEvent

pull request commentmicrosoft/RNGallery

Update to 0.63

k let's do that


In reply to: 695091709 [](ancestors = 695091709)

acoates-ms

comment created time in a month

pull request commentmicrosoft/RNGallery

Update to 0.63

PackageProviders().Append(winrt::CheckboxWindows::ReactPackageProvider());

Auto-linking should be taking care of this now, so shouldn't we remove this? I also added #include <winrt/CheckboxWindows.h> to pch.h, which we should also be able to remove.


Refers to: windows/rngallery/App.cpp:43 in c07c6a4. [](commit_id = c07c6a4769ad21e91cd2d15329a7c05e33e2f0b6, deletion_comment = False)

acoates-ms

comment created time in a month

issue openedmicrosoft/RNGallery

Add hyperlink to checkbox page

Each community module should have a hyperlink in the example page. Add a hyperlink to the Checkbox sample page.

created time in a month

issue closedmicrosoft/RNGallery

Upgrade to 0.63

Currently the app is built against RNW version 62. Upgrade to 63.

Known issues: -Will need to remove the manual linking of @react-native-communit/checkbox and letting auto-linking do its thing

closed time in a month

kmelmon

issue commentmicrosoft/RNGallery

Upgrade to 0.63

github is weird. closing

kmelmon

comment created time in a month

issue openedmicrosoft/RNGallery

Upgrade to 0.63

Currently the app is built against RNW version 62. Upgrade to 63.

Known issues: -Will need to remove the manual linking of @react-native-communit/checkbox and letting auto-linking do its thing

created time in a month

issue openedmicrosoft/RNGallery

Upgrade to 0.63

Currently the app is built against RNW version 62. Upgrade to 63.

Known issues: -Will need to remove the manual linking of @react-native-communit/checkbox and letting auto-linking do its thing

created time in a month

push eventmicrosoft/RNGallery

kmelmon

commit sha 7ecbb398403374a17e00728accb3e547a8cadb94

Update README.md Add instructions for adding sample pages

view details

push time in a month

PR closed react-native-community/releases

first trial run of building a running changelog off master enhancement

This is a trial run at gathering up the changelog from facebook master as we go, rather than after cutting a release branch.

This first version includes changes between these two commits: 4ae2de211ee8435f1dfc6f2816c21d34ade0c1d7 f4815fbad3da368bead34c3b1c1391a83c983aae It also includes some "internal" changes, marked with [INTERNAL]

+129 -0

2 comments

1 changed file

kmelmon

pr closed time in a month

pull request commentreact-native-community/releases

first trial run of building a running changelog off master

The release notes process was handled really nicely, this is no longer needed, closing

kmelmon

comment created time in a month

PullRequestReviewEvent
PullRequestReviewEvent
PullRequestReviewEvent

issue commentmicrosoft/react-native-windows

Not able to find app.js when app.tsx is present

The RN guidance on adding typescript is here: https://reactnative.dev/docs/typescript#docsNav

manohargss

comment created time in a month

issue commentmicrosoft/react-native-windows

Root-level perspective transform causes blurry Popups and Flyouts

I debugged through this. The JS code doesn't actually add any perspective... The TransformExample test page has a couple examples that provide a perspective property in the transform, and that explains why perspective showed up even with our root perspective disabled. This puts us back to square 1, but at least I understand now.

aschultz

comment created time in a month

issue commentmicrosoft/react-native-windows

Root-level perspective transform causes blurry Popups and Flyouts

I'm only suggesting that we possibly reuse whatever technique is being used by the JS to automatically detect a 3d transform and apply a perspective to the matrix. I don't care if useNativeDriver is being deprecated, and would actually be happy if that happened.

aschultz

comment created time in a month

issue commentmicrosoft/react-native-windows

Root-level perspective transform causes blurry Popups and Flyouts

An interesting comment from Alex as he investigated the TransformExample RNTester page:

So I wanted to validate whether the perspective transform could be removed at all so I launched RNTester and navigated to the TransformExample page which is the page I had used to validate the original fix to add the transform. But then I noticed that even without the perspective transform at the root, the rotating block example still drew with perspective!! Very unexpected 😊 so I wanted to find out why that was. Long story short I tracked it down to the fact that the TransformExample doesn’t use the native driver for animations.

This commit added useNativeDriver: false: _animate = () => { this.state.theta.setValue(0); Animated.timing(this.state.theta, { toValue: 360, duration: 5000, useNativeDriver: false, }).start(this._animate); };

What this means is that when useNativeDriver is false, the JS code is computing a perspective matrix and sending it to native. This could be how we solve this issue - reuse that code for the non-animating case as well. This would add perspective only to nodes that use a 3d transform.

aschultz

comment created time in a month

more