Turned out to be easier than I thought. Thank you @Drew Reese

If the following is your root navigator for instance -:

function RootNavigator() {

  return (
    <Stack.Navigator>
        <Stack.Screen name="authNav" component={AuthNavigator} />
        <Stack.Screen name="main" component={MainNavigator} />
    </Stack.Navigator>
  );
}

If you'd like for your web app to load the main navigator as a sidebar, and for your natives to load the main navigator as a bottom navigator, for example, create a bottom tabs navigator in MainNavigator.native.js and a sidebar(drawer navigator with drawerType set to permanent) in MainNavigator.js.

Even the import remains that same. Efficient!

import MainNavigator from './MainNavigator'

You can accomplish this in at least two different ways, though I think the better one is with media queries.

Media queries

One way to do that is with Media Queries, where you basically check against screen sizes.

You can render conditionally for current screen size being in a particular range, or smaller or larger than a particular size.

Here is a Guide to Media Queries from CSS Tricks

I'll abbreviate with xs, sm,md,lg,xl for certain sizes (extra-small, small, medium, large, extra-large).

In your scenario

So basically, you can then render the tabs (or any UI element, really) or hide them, or apply css conditionally.

User Agent

Another way you could do this is with the User Agent.

You could check for platform specific strings such as Android, iPhone, iPad, Macintosh etc.

const { userAgent } = window.navigator

console.log(userAgent)