title: Implementing UISplitViewController using React Navigation
body: <p>I need to implement tablet support in the React Native app I am working on. We decided that going with <code>UISplitViewController</code> makes the most sense for us, but React Navigation (<a href="https://reactnavigation.org" rel="noreferrer">https://reactnavigation.org</a>) does not have any support for it.</p>
  
  <p>I tried solving this problem in a straightforward way by putting 2 navigators side-by-side in a view and modifying their <code>getStateForAction</code> to open certain screens in the details view:</p>
  
  <pre><code>export interface Props {
    MasterNavigator: NavigationContainer;
    DetailNavigator: NavigationContainer;
    detailRouteNames: string[];
  }
  
  export class MasterDetailView extends React.Component&lt;Props&gt; {
    masterNavigator: any;
    detailNavigator: any;
  
    componentDidMount() {
      const { MasterNavigator, DetailNavigator, detailRouteNames } = this.props;
      const defaultMasterGetStateForAction = MasterNavigator.router.getStateForAction;
  
      MasterNavigator.router.getStateForAction = (action: any, state: any) =&gt; {
        if (action.type === NavigationActions.NAVIGATE &amp;&amp; detailRouteNames.indexOf(action.routeName) !== -1) {
          action.params.isRootScreen = true;
          this.detailNavigator.dispatch(NavigationActions.reset({ index: 0, actions: [action] }));
  
          return state;
        }
  
        return defaultMasterGetStateForAction(action, state);
      };
  
      const defaultDetailGetStateForAction = DetailNavigator.router.getStateForAction;
  
      DetailNavigator.router.getStateForAction = (action: any, state: any) =&gt; {
        if (action.type === NavigationActions.BACK &amp;&amp; state.routes.length === 1) {
          this.masterNavigator.dispatch(NavigationActions.back());
          return null;
        }
  
        return defaultDetailGetStateForAction(action, state);
      };
    }
  
    render() {
      const { MasterNavigator, DetailNavigator } = this.props;
  
      return (
        &lt;View style={styles.view}&gt;
          &lt;View style={styles.masterContainer}&gt;
            &lt;MasterNavigator ref={(mn: any) =&gt; this.masterNavigator = mn}/&gt;
          &lt;/View&gt;
          &lt;View style={styles.divider}/&gt;
          &lt;View style={styles.detailContainer}&gt;
            &lt;DetailNavigator ref={(dn: any) =&gt; this.detailNavigator = dn}/&gt;
          &lt;/View&gt;
        &lt;/View&gt;
      );
    }
  }
  </code></pre>
  
  <p>The master navigator is a <code>TabNavigator</code> with <code>StackNavigator</code>s in each tab, the detail navigator is a <code>StackNavigator</code>. Here's how it looks:
  <a href="https://i.stack.imgur.com/ToW8k.png" rel="noreferrer"><img src="https://i.stack.imgur.com/ToW8k.png" alt="result"></a></p>
  
  <p>This approach kind of works, but back button on Android behaves incorrectly. I want it to navigate back in the details navigator, then in the master navigator. It is possible to make it work with a couple of hacks, but then it becomes impossible to navigate back from the app using the back button (for some reason, nothing happens when I click it). I could try fix this by overriding the behavior of back button and dispatching back action to the master/detail navigators or closing the app, but when dispatching an action to the navigator, there is no way to know whether it responded to it or not (particularly with the master navigator, which is a <code>TabNavigator</code>), so it seems like I am stuck.</p>
  
  <p>Are there some special considerations when using navigators this way? Is React Navigation even suitable for this use case? If not, what are the other ways to emulate <code>UISplitViewController</code> in React Native apps?</p>