React Native TwoPaneView for Surface Duo

  • Article

You can create a dynamic layout with the markup shown here:

<TwoPaneView panePriority={this.state.panePriority} panePriorityVerticalSpanning={this.state.panePriority} >
    {/* Pane A */}
    <MasterContent/>
    {/* Pane B */}
    <DetailContent/>
</TwoPaneView>

The panePriority and other features of the layout let you control what is shown in each screen configuration. The Windows TwoPaneView documentation and API reference provide some hints about how the control works (although remember it's still in preview!).

Installation

Follow the react-native-twopaneview installation instructions:

  1. Modify android/build.gradle to add Kotlin support:

    buildscript {
  ext {
    ...
+   kotlinVersion = "1.3.50"
  }
...

  dependencies {
+   classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:${kotlinVersion}")
...

  2. Run npm install react-native-twopaneview to add the package.

  3. Modify android:configChanges by including these options:

    android:configChanges="keyboard|keyboardHidden|orientation|screenSize|smallestScreenSize|screenLayout"

Samples

Once installed, give the samples a try.

Source

TwoPaneView is an open-source component, available on GitHub.