microsoft/react-native-dualscreen

React Native Dual screen module

React Native dual-screen

This repo contains Microsoft's offerings to streamline dual-screen cross-platform development using React Native. The modules in the repo will work on any platform, but only Android actually has a dual screen device (Duo).

Repo status

See below. We currently have three npm packages for dual screen devices.

Offerings

This repo provides three modules

• TwoPaneView layout component
• DualScreenInfo lower-level module
• TwoPane-Navigation navigation library for dual screen devices

Please find more details about the features as they were proposed and implemented. Feel free to chime in with comments about TwoPaneview, DualScreenInfo and TwoPane-Navigation!

React Native for Windows

In the meantime, for more information about React Native for Windows, including steps for getting started, please visit our website. And keep an eye on our blog or follow @ReactWindows on Twitter for new announcements!

react-native-dualscreen's Issues

Task :react-native-dualscreeninfo:compileDebugKotlin FAILED

When I add react-native-dualscreeninfo to my project:

  "dependencies": {
    ...
    "react-native-dualscreeninfo": "^0.3.2"
  },

The React Native fails to start:

> Task :react-native-dualscreeninfo:compileDebugKotlin FAILED
w: Runtime JAR files in the classpath should have the same version. These files were found in the classpath:
    C:/***/.gradle/caches/transforms-3/0cc2c87c50a91c241657c7bbcc18eaa9/transformed/jetified-kotlin-stdlib-jdk8-1.6.10.jar (version 1.6)
    C:/***/.gradle/caches/transforms-3/0ef692519a16046a76835cdd74636faf/transformed/jetified-kotlin-stdlib-jdk7-1.3.72.jar (version 1.3)
    C:/***/.gradle/caches/transforms-3/f713c139f4c7914776c902517e455c4f/transformed/jetified-kotlin-stdlib-1.3.72.jar (version 1.3)
    C:/***/.gradle/caches/transforms-3/5beb6206e8cf9cbeaeb2b3682ce09f72/transformed/jetified-kotlin-stdlib-common-1.3.72.jar (version 1.3)
w: Some runtime JAR files in the classpath have an incompatible version. Consider removing them from the classpath

Deprecated Gradle features were used in this build, making it incompatible with Gradle 8.0.

You can use '--warning-mode all' to show the individual deprecation warnings and determine if they come from your own scripts or plugins.

See https://docs.gradle.org/7.3.3/userguide/command_line_interface.html#sec:command_line_warnings
62 actionable tasks: 22 executed, 40 up-to-date
e: C:/***/.gradle/caches/transforms-3/0cc2c87c50a91c241657c7bbcc18eaa9/transformed/jetified-kotlin-stdlib-jdk8-1.6.10.jar!/META-INF/kotlin-stdlib-jdk8.kotlin_module: Module was compiled with an incompatible version of Kotlin. The binary version of its metadata is 1.6.0, expected version is 1.1.16.
e: C:/***/.gradle/caches/transforms-3/6be88576f4b7b1961ac7d162e1cbe754/transformed/jetified-react-native-0.69.2-debug-api.jar!/META-INF/ReactAndroid_debug.kotlin_module: Module was compiled with an incompatible version of Kotlin. The binary version of its metadata is 1.6.0, expected version is 1.1.16.

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':react-native-dualscreeninfo:compileDebugKotlin'.
> Compilation error. See log for more details

* Try:
> Run with --stacktrace option to get the stack trace.
> Run with --info or --debug option to get more log output.
> Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 5s

error Failed to install the app. Make sure you have the Android development environment set up: https://reactnative.dev/docs/environment-setup.
Error: Command failed: gradlew.bat app:installDebug -PreactNativeDevServerPort=8081
e: C:/***/.gradle/caches/transforms-3/0cc2c87c50a91c241657c7bbcc18eaa9/transformed/jetified-kotlin-stdlib-jdk8-1.6.10.jar!/META-INF/kotlin-stdlib-jdk8.kotlin_module: Module was compiled with an incompatible version of Kotlin. The binary version of its metadata is 1.6.0, expected version is 1.1.16.
e: C:/***/.gradle/caches/transforms-3/6be88576f4b7b1961ac7d162e1cbe754/transformed/jetified-react-native-0.69.2-debug-api.jar!/META-INF/ReactAndroid_debug.kotlin_module: Module was compiled with an incompatible version of Kotlin. The binary version of its metadata is 1.6.0, expected version is 1.1.16.

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':react-native-dualscreeninfo:compileDebugKotlin'.
> Compilation error. See log for more details

* Try:
> Run with --stacktrace option to get the stack trace.
> Run with --info or --debug option to get more log output.
> Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 5s

    at makeError (C:\***\node_modules\@react-native-community\cli-platform-android\node_modules\execa\index.js:174:9)
    at C:\***\node_modules\@react-native-community\cli-platform-android\node_modules\execa\index.js:278:16
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
    at async runOnAllDevices (C:\***\node_modules\@react-native-community\cli-platform-android\build\commands\runAndroid\runOnAllDevices.js:109:5)
    at async Command.handleAction (C:\***\node_modules\@react-native-community\cli\build\index.js:192:9)
info Run CLI with --verbose flag for more details.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! ***@0.0.1 android: `react-native run-android --no-jetifier`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the ***@0.0.1 android script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\***\AppData\Roaming\npm-cache\_logs\2022-07-23T15_30_29_247Z-debug.log

Any idea how to solve it?

dualscreeninfo/twopaneview duplication

We still have a twopaneview folder inside the dualscreeninfo folder. It has another version of twopaneview. This version of the control isn't what we're promoting publicly, so we should consider removing this.

Also there's a Hinge component in this folder. Need to figure out what to do with this component. Ideally we'd move it into the twopaneview package alongside the public TwoPaneView.

RssReader sample needs to be updated to 0.1.0

We made some breaking changes in version 0.1.0. We should update the sample in this repo to work correctly with 0.1.0 and later:
https://github.com/qmatteoq/RssReader-DualScreen
Currently this sample uses version 0.0.1, which isn't feature complete but will stay working for now.

Publish react-native-dualscreeninfo

As a starting point we should publish an initial version of react-native-dualscreeninfo manually.

We should also setup the CI loop to have a publish pipeline so that whenever we make changes, the version is bumped and a new version is published to npm.

TwoPaneView example does not render correctly in vertical orientation

The TwoPaneView example app was designed for horizontal orientation (with panes left/right). If you turn the AutoRotate feature on in your Android device settings, then rotate the device to vertical orientation, the sample doesn't render correctly.

There are two problems here:

1. Issue ##35
2. There is an additional problem specific to this app, which this issue is tracking: The problem is that this app was designed with a "header" control (the orange bar across the top) which isn't part of the TwoPaneView. This control takes up layout space at the top of the window. So when you rotate the device vertical, the TwoPaneView control does its layout which is essentially like this:

Header => has fixed height
TwoPaneView => flexDirection: 'column'
--Pane1 => flex: 1
--Hinge => height: 34
--Pane2 => flex: 1

The problem here is that because the header control has taken some of the space at the top, the TwoPaneView cannot simply use flex:1 for the panes as this will result in the Hinge not landing in the correct place on screen. It will end up too far down.

This is an interesting problem! If you want a Header that goes all the way across the top in both horizontal and vertical orientations, this is a bit tricky to do with only one layout. I don't think TwoPaneView can do the math correctly - this is a well known problem of TwoPaneView not supporting full window layout.

TwoPaneView type information not available to app code

Something isn't correct with the way TwoPaneView Typescript type information is being published. This results in a runtime error if you try to use the type information.

For example:
<TwoPaneView paneMode = {PaneMode.Auto}>
doesn't work.

For now you can do this instead:
<TwoPaneView paneMode = 'Auto'>

Interestingly we did something similar for types in react-native-dualscreeninfo, but those types are working correctly. We just need to study how types.d.ts is being authored/built/published.

Need proper CI loop

This repo needs a proper CI loop with:
-automated tests
-automatic publishing

Confirm TwoPaneView gracefully falls back to one pane on non-dual-screen devices

A customer should be able to drop a TwoPaneView control into their app and have it work on windows, ios, or android single screen devices.

This issue is tracking verifying this works as expected. It should behave as if the app isn't spanned and just display one pane.

Fix outstanding issues from PR #2

Follow-up from this PR:
#2

There are a number of outstanding comments that need to be addressed.

dualscreeninfo windowRects are in physical pixels

DualScreenInfo.windowRects is returning rects in physical pixels. These rects should be in DIPs.

eventlistener not emiting on first mount

I found this issue in production with our application, and now am seeing it appear locally in our twopane-navigation example

dualscreeninfo windowRects doesn't report correct rects

DualScreenInfo has a windowRects prop, which is supposed to report the usable area of the device, but it actually reports the gap between the screens.

This repo is missing important files

There are important files that Microsoft projects should all have that are not present in this repository. A pull request has been opened to add the missing file(s). When the pr is merged this issue will be closed automatically.

Microsoft teams can learn more about this effort and share feedback within the open source guidance available internally.

Merge this pull request

Windows API alignment

The Windows implementation isn't currently aligned with the public API.

dualscreeninfo readme cleanup

The readme for dualscreeninfo has a few problems:
https://github.com/microsoft/react-native-dualscreen/blob/master/dualscreeninfo/README.md

1 The title says "react-native-dualscreen" => "react-native-dualscreeninfo"
2 The installation instructions are in a collapsed group box. This is causing confusion. Remove the collapsible box.
3 The example code is importing from 'react-native-dual-screen' => 'react-native-dual-screeninfo'

App crashing with “Stub!” error

I'm playing around with trying to add the react-native-dualscreeninfo to my existing React Native project. However, when adding the gradle requirements to get it running (just the Kotlin version, and I've also added the maven for the SDK feed), I annoyingly just get a crash that says "Stub!". I can't screenshot it in the app- it just crashes- but here's a stack from Android Studio:

Frustratingly, I can get the example projects to build and run, so I think it's something in my proj
ect setup, and not the emulator.

Has anyone run into this and been able to get around it? Very excited to start developing, but this roadblock is a big one.

package.json for DualScreenInfo does not export windows

The files list under package.json does not export the windows folder, making this not compatible with react-native-windows without adding the files yourself.

Windows event handling

The Windows implementation currently doesn't raise events when spanning/window rects change.

DualScreenInfo & TwoPaneView could be re-based on Jetpack Window Manager for broader compatibility

The DualScreenInfo and TwoPaneView describe functional specs for behavior on a dual-screen device like Surface Duo.

The original implementation was done using a Microsoft-provided DisplayMask package, which only works on Surface Duo.

Jetpack Window Manager

Google has been working on a more generic library for dual-screen and foldable devices - Jetpack Window Manager - which provides similar functionality to DisplayMask (ie. reports on application layout changes that include interaction with a hinge/fold on the device). It recently (September 2021) reached beta status, which generally indicates a stable API shape.

Updating react-native-dualscreen to use Window Manager instead of DisplayMask would mean React Native apps would be able to detect and adapt to dual-screen and foldable devices from other manufacturers that support Google's API (eg. Samsung Galaxy Fold and Flip).

Implementation

The existing DualScreenInfo.kt code is relatively self-contained because DisplayMask is an on-demand style API. Jetpack Window Manager is event driven and should be 'set up' early in the application lifecycle - see this blog and docs.

Broadly speaking the same data is available (screen and hinge/fold coordinates, which can be used to pass visible Rect values to the app). Other cross-platform frameworks are also doing this migration for Surface Duo and other device support: Xamarin, Flutter, Unity, Uno.

Fix outstanding issues from PR #5

See: #5

[Feature] No-op for iOS

It makes sense that this SDK only works for Android and Windows. There are no dual screen iOS devices today.

But from a developer API niceness perspective, it would be nice if this API worked on iOS in the sense that if I call getIsDualScreen() or something like that, it won't cause a crash because this SDK just returns sensible defaults instead of trying to call native code that isn't there.

TwoPaneView layout issue in vertical orientaiton

When the dual-screen device has Auto-Rotate feature turned on, and you rotate the device to vertical orientaiton, if PaneMode == 'Double' the content does not render correctly. The hinge is in the "wrong place" and you can see the separator visible in the second pane's content area, instead of lining up nicely where the hinge area is.

Screenshot from modified version of the sample app:

The issue here is that the Android statusbar is taking up some of the layout space at the top of the window. We're using a layout like this:

TwoPaneView => flexDirection: 'column'
--Pane1 => flex: 1
--Hinge => height: 34
--Pane2 => flex: 1

This layout give half the remaining space to Pane1 and half to Pane2. This will only work correctly if the Hinge is exactly in the middle of the window vertically. But in this case it is not because the window rect does not include the status bar. In other words the Hinge isn't in the center of the window.

It looks like we'll need to account for the presence of the StatusBar. If it's visible, then we need to shift everything to account for it. The easiest way to accomplish this would be to not use flex:1 for Pane1 and Pane2, but instead compute heights based on Dimensions.window and the StatusBar height, which you can get from an expo module called Constants. See:
https://reactnative.dev/docs/statusbar#__docusaurus

Capture API docs more formally than the original issue markdown

The APIs for these components lives in these issues:

• TwoPaneview
• DualScreenInfo

As opposed to TwoPane-Navigation which has more robust documentation:

• TwoPane-Navigation

The other components should receive similar stable documentation here on the repo.

twopaneview samples package.json cleanup

This package.json needs some cleanup:
https://github.com/microsoft/react-native-dualscreen/blob/master/twopaneview/examples/package.json

"dependencies": {
"@react-native-community/masked-view": "^0.1.6",
"react": "16.9.0",
"react-native": "0.61.5",
"react-native-dualscreeninfo": "0.0.1",
"react-native-elements": "^1.2.7",
"react-native-gesture-handler": "^1.5.3",
"react-native-reanimated": "^1.7.0",
"react-native-safe-area-context": "^0.6.2",
"react-native-screens": "^2.0.0-alpha.29",
"react-native-twopaneview": "0.0.2",
"react-native-vector-icons": "^6.6.0",
"react-native-windows": "^0.60.0-vnext.127",
"react-navigation": "^4.0.10",
"react-navigation-stack": "^2.0.16"

A bunch of these dependencies aren't needed:
"react-native-elements": "^1.2.7",
"react-native-gesture-handler": "^1.5.3",
"react-native-reanimated": "^1.7.0",
"react-native-safe-area-context": "^0.6.2",
"react-native-screens": "^2.0.0-alpha.29",
"react-native-windows": "^0.60.0-vnext.127",
"react-navigation": "^4.0.10",
"react-navigation-stack": "^2.0.16"

And:
"react-native-dualscreeninfo": "0.0.1",
This should have a ~0.0.1. Weirdly if we use ^0.0.1 it doesn't work because of strange semver rules, and the fact that we only published a 0.0.2.

twopaneview readme cleanup

This readme needs some cleanup:
https://github.com/microsoft/react-native-dualscreen/blob/master/twopaneview/README.md

This bit:
Please refer to the react-native-dualscreen page to install the latest version of DualScreenInfo first.

should be reworked as a dependency and tell authors to take special care to follow the setup instructions for Duo as this stuff is required for TwoPaneView to work correctly/

And

onModeChanged={()=>{console.log('onModeChanged');}
How to run sample app
0. Clone the repo
$ git clone https://github.com/microsoft/react-native-dualscreen.git and
cd /twopaneview/examples

1. npm install
   $ npm install

2. (Optional) Clean build android
   $ cd android then $ gradlew clean

3. npm run android
   Start emulator, then run $ npm run run:android

This stuff is below the screenshots - this makes it less discoverable - move to above screenshots

dualscreenInfo does not work when included as a dependency from another npm package

Example:

for twopane-navigation I included dualscreeninfo as a dependency to be included when published

expected result: after the user sets up their gradle.build file correctly dualscreeninfo should be working in the background for the twopane-navigation library

actual result; dualscreeninfo stays in onepane mode because no events are trigger ie like the ispanning eventhandler. This means the user has to download dualscreeninfo independent of twopane-navigation for the twopane-navigation library to function properly

Need to implement TwoPaneView onModeChanged event

The spec calls for TwoPaneView to raise on onModeChanged event when the layout changes. This currently isn't implemented.

See: react-native-community/discussions-and-proposals#197

Document dualscreeninfo deviceOrientation property

This PR introduced a new prop for react-native-dualscreeninfo:
#34

The prop is DualScreenInfo.orientation

It has values from the below enum:

export enum DeviceOrientation {
Portrait = 'portrait',
Landscape = 'landscape',
PortraitFlipped = 'portraitFlipped',
LandscapeFlipped = 'landscapeFlipped',
};

We should update the spec with this prop.

Pane Renderer does not cover entire screen for translucent or hidden Status Bar

Hi

One of the components in my app requires the status bar to be translucent and I am making it happen using the following code:

Although the app covers the area of the status bar, there appears a white line at the bottom of the app. The page looks something like this:

The white line also appears for the "hidden" state of status bar. I suspect that pane renderer does not take into account the state of the status bar. It considers the dimension of the area except the status bar and renders using the height of that dimension. I tried changing the paneRects manually and it did cover the entire screen but could not come up with something that can adjust the paneRects based on the state of the status bar("hidden" or "translucent" ). Is there any solution to this situation ?

react-native-twopane-navigation

Hi community!

Can you help me to understand how can I combine react-navigation with react-native-twopane-navigation?

Documentation:

But I don’t understand how can I use TwoPaneHub. Should I extract TwoPaneHub from react-native-twopane-navigation?

Thanks!

dualscreeninfo package.json cleanup

There's an issue in:
https://github.com/microsoft/react-native-dualscreen/blob/master/dualscreeninfo/package.json

"repository": {
"type": "git",
"url": "git+https://github.com/microsoft/react-native-dualscreeninfo.git",
"baseUrl": "https://github.com/microsoft/react-native-dualscreeninfo"

These URLs are incorrect. They should point to https://github.com/microsoft/react-native-dualscreen

twopaneview package.json cleanup

This package.json needs some cleanup:
https://github.com/microsoft/react-native-dualscreen/blob/master/twopaneview/package.json

"description": "TODO",
needs a proper description

"author": {
"name": "Homero Roman Roman",
"email": "[email protected]"
},
change the author to someone on the RNW crew

"peerDependencies": {
"@babel/runtime": "",
"react": "",
"react-native": "",
"react-native-windows": ""
},

The react and react-native peer dependencies should be more specific semver selections.
The dependency on react-native-windows is unnecessary and should be removed.

Passing params in two pane navigation

Hi,

I am making an app for dual screen devices using the TwoPaneApp component of twopane navigation. At some of the places in my app I need to pass values as params but I don't see any way to do that using this library. If there is a way please help me out by posting a solution. If it's not possible currently, it will be great enhancement to this library.