Windows: First instance of action sheet display gets cut off

[MaxPMagee]

We're trying to use react-native to drive a Windows app as well as our Android and iOS apps. This bug only appears on Windows.

The first time we open an action sheet (again, on Windows only), we only see about the first 1/5 of the content of the sheet. The next (and subsequent) clicks open the full content as expected.

We've debugged the content, what we call lookups, it's there and available before the first click. We've played with the height styling to see if we can hardcode it—setting height via actionSheetOptions' containerStyle, and although we can hardcode the size however we want (setting it to 100%, for example), the first click is always different/missing content, as if the offset or vertical anchor point is calculated incorrectly to begin with, and the location is the problem, but somehow this gets corrected after the initial display of the actionSheet.

  const showEditApiUrlModal = useCallback(() => {
    if (config.config.debugMode) {
      const lookups: Array<string> = [
        "Prod",
        "Stack 2",
        "Stack 3",
        "Stack 8",
        "Stack 22",
        "Custom",
      ];
      showActionSheetWithOptions(
        {
          title: common_t(['chooseStack']),
          options: [...lookups, "Cancel"],
          cancelButtonIndex: 6,
        },
        (buttonIndex: number) => {
          if (buttonIndex < 5) {
            setApiUrl(lookups[buttonIndex][1]!, config);
          } else if (buttonIndex === 5) {
            showApiUrlOverlay();
          }
        }
      );
    }
  }, [showActionSheetWithOptions, setApiUrl, showApiUrlOverlay, config]);

This is the final display result (after the pop-up animation is complete) of the initial showActionSheetWithOptions call (only 1.5 of the 8 options are visible/clickable):

This is what all subsequent displays look like (and what we would expect for all of them):

If I set the containerStyle height to 100%, the first window shows more but it still only fills about 50% of the screen on the first display. For all subsequent clicks, the sheet takes up the full screen.

...
        showActionSheetWithOptions(
        {
          title: common_t(['chooseStack']),
          options: [...lookups, "Cancel"],
          cancelButtonIndex: 6,
          containerStyle: {height: "100%"},
        },
...

This is the first instance of ActionSheet with height: 100%

And this is how all subsequent clicks look:

[emmanuj]

Looked into this a little bit. Looks like useNativeDriver does not have full support on Windows.

Would you be open to a PR that exposes a useNativeDriver props on the ActionSheetProvider so as to allow setting this prop to false?

[bradbyte]

@emmanuj Yes, as long as it defaults to the current behavior. Thank you!

[emmanuj]

Created a PR for this that will allow Windows users to set useNativeDriver=false on ActionSheetProvider. I'll log a ticket to react-native-windows to take care of the animation issue.

[bradbyte]

🎉 This issue has been resolved in version 3.9.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀