krschacht-react-native-web-screen

React Native Web Screen

React Native Web Screen is an open source library that will allow you to easily bring your web application into the React Native mobile world. It allows you to render web views as if they were real native screens, caching the results and providing native animation between screens. You can easily move your entire web app, or embed a few screens that pretend to be native, without having to code them second time in React Native.

Installation

Install the library using:

npm install react-native-web-screen

or

yarn add react-native-web-screen

The library should be used alongside React Navigation library, follow these steps to install it.

Basic example

The library provides you with simple API to define the relationship between the web and native screens. The react-native-web-screen uses React Navigation configurable links to handle navigation within the app. To generate the desired linking configuration you can use the buildWebScreen(webScreenConfig) function. After that, all you need to do is to pass the generated objects to the Navigation Container and to the corresponding screens in the navigator tree.

Let's say you want to add a web Welcome screen to your React Native app.

import { NavigationContainer } from '@react-navigation/native';
import { buildWebScreen, WebScreenRuleConfig } from 'react-native-web-screen';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

const webScreenConfig: WebScreenRuleConfig = {
  baseURL: 'http://your-web-app-base-url/',
  routes: {
    Initial: {
      urlPattern: '',
    },
    Welcome: {
      urlPattern: 'welcome',
      title: 'Welcome!',
    },
  },
};

const webScreens = buildWebScreen(webScreenConfig);

const App: React.FC = () => {
  return (
    <NavigationContainer linking={webScreens.linking}>
      <Stack.Navigator>
        <Stack.Screen name="Initial" component={YourNativeComponent} />
        <Stack.Screen {...webScreens.screens.Welcome} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

Now you can easily navigate to the Welcome web screen using react navigation API. Navigating http://your-web-app-base-url in the webview will result in opening react native screen Initial.

Nested navigators

You are also able to use complex navigator structures inside your app. You can define the react-native-web-screen config with nested navigators.

const webScreenConfig: WebScreenRuleConfig = {
  baseURL: 'http://your-web-app-base-url/',
  routes: {
    Welcome: {
      urlPattern: 'welcome',
      title: 'Welcome!',
    },
    NestedStack: {
      routes: {
        NestedStackScreen: {
          urlPattern: 'nested',
          title: 'Nested Screen',
        },
      },
    },
  },
};

Example app

The repository contains example app directory and an example web app adapted from turbo-native-demo using react-native-web-screen.

yarn
yarn example server start
yarn example start
yarn example ios

https://user-images.githubusercontent.com/25584895/225870138-b034f335-a30f-4e25-92fd-06c19cdf6e04.mov

Advanced usage

This library under the hood uses react-native-turbo. You can use React Navigation support (described here) or standalone React VisitableView.tsx component for more advanced cases. You can also define your own WebScreen component.

Check out react-native-turbo for more info.

Using custom WebScreen component

You can use your custom WebScreen component by passing it to the buildWebScreen config. This can be useful if you want to define custom logic for each screen.

import { WebView } from 'react-native-webview';

const webScreens = buildWebScreen(webScreenConfig, {
  webScreenComponent: WebScreen,
});

To obtain url for current screen, use useCurrentUrl hook function

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

---

Made with create-react-native-library