React Native TwoPaneView for Surface Duo

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

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

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!).


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:



Once installed, give the samples a try.


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