React Native Web with Next JS and React Navigation

Question

I am trying to decide on the best way to set up routing in my React Native Web project. I am using expo and followed this guide to use Next JS https://docs.expo.io/versions/latest/guides/using-nextjs/ so I have App.js like this:

import index from "./pages/index";
import alternate from "./pages/alternate";
import { createStackNavigator } from "react-navigation-stack";
import { createAppContainer } from "react-navigation";
const AppNavigator = createStackNavigator(
  {
    index,
    alternate
  },
  {
    initialRouteName: "index"
  }
);

const AppContainer = createAppContainer(AppNavigator);
export default AppContainer;

My concern is how best to handle routing. I have my index.js page setup like this currently.

import * as React from 'react'
import { StyleSheet, Button, Text, View } from 'react-native'


export default function App ({navigation}) {
  return (
    <View style={styles.container}>

      {/* Native route */}
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate("alternate")}
      />

      {/* Web route */}
      <Text style={styles.link} accessibilityRole="link" href={`/alternate`}>
        A universal link
      </Text>
    </View>
  );
}

As you can see this is currently requiring separate code to render a Native vs Web route. I am wondering what is the best way to handle this sort of rendering. I looked into using React Navigation for web and wouldn't be opposed to this but it seems like I should probably stick with the Next Router.

Thanks in advance for any advice on handling conditional rendering like this.

Answer 1

Use reactnavigation web support for that

https://reactnavigation.org/docs/en/web-support.html

import { createSwitchNavigator } from "@react-navigation/core";
import { createBrowserApp } from "@react-navigation/web";

const MyNavigator = createSwitchNavigator(routes);

const App = createBrowserApp(MyNavigator);

// now you can render "App" normally

Answer 2

There is import { Platform } from 'react-native':

{Platform.OS === 'web' ? (
  <Text
    style={styles.link}
    accessibilityRole="link"
    href={`/alternate`}
  >
    A universal link
  </Text>
) : (
  <Button
    title="Go to Details"
    onPress={() => navigation.navigate("alternate")}
  />
)}