CODEWITHSUNDEEP
react-nativereact-navigationreact-native-web
Otto
Otto

Reputation: 1685

Best practices for universal app using RN, React Navigation, and React Native Web

The recent release of Expo makes it simple, or at least possible, to add support for web to a React Native app. Assuming one is using RNW and React Navigation, what are best practices for building an app that will work as both a mobile app and a web app? At what point(s) in the code should one branch the logic between mobile app and web?

I'm providing a partial answer and a few resources below. Additional resources and responses are appreciated.

Upvotes: 3

Views: 1044

Answers (1)

Otto
Otto

Reputation: 1685

Here are a partial answer, important considerations, and possible starting points for further research.

Screen Size

Unless you have the resources to create completely separate views for small and large screens, one way to make your app look reasonable on a desktop/laptop screen is to add horizontal margins. This can be accomplished by wrapping your app Navigator with a View like: 

<View
  onLayout={this._handleLayout}
  style={[styles.appContainer, this.state.isWide && styles.wide]}>

and 

  _handleLayout = ({ nativeEvent }) => {
    const { width } = nativeEvent.layout;
    this.setState(() => ({ isWide: width > 600 }));
  };

Tab bar, Header, and other navigation elements

React Navigation has built-in support for headers and tab bars, however, a standard mobile layout with on a desktop/laptop screen looks ugly. Since you are probably using navigator components designed for mobile, like createBottomTabNavigator and createDrawerNavigator, one option is to make custom navigator(s) for the desktop layout. This may require some work since there are no standard navigator components for desktop layouts.

Another problem is that you may want your header bar to be different, since there's more space to add navigation elements, search bar, etc. React Navigation doesn't provide examples on how to do this, so it may be difficult.

Web URLs, router, server rendering, etc.

React Navigation 3.x docs say that web support should be considered experimental and provides sparse guidance on these issues. The react-navigation/web module provides "Tools for react-navigation on web browsers and servers" but little documentation. An example for setting up a simple web app using SwitchRouter can be found here. However, I could not find any info on using URL parameters with routes.

Upvotes: 2

Related Questions