React Native for Web

React Native for Web is a fascinating technology that allows developers to use the same codebase to build apps for Android, iOS, and the web. React Native for Web is an emphatic expansion plan for React Native, providing additional opportunity for cross-platform app development from a single JavaScript codebase.

If developers want to build smooth, responsive, and navigable apps, React Native for Web is an ideal option. In this tutorial, we'll be building a small movie-themed application to demonstrate how you can write code that runs on both the web and native platforms.

Firstly, let's start by installing the packages we need. Assuming we already have React Native set up, we can add React Native for Web to it:

npm install react-native-web

After successful installation, let's start building our movie-themed application. For this tutorial, we will focus on building a simple app listing Star Wars characters and detail pages for each one of them.

We start by creating a new file named CharacterList.js and include the following code to list various characters hosted locally in our app.

import React, {useState} from 'react';
import {Text, View, Button} from 'react-native';

const characters = [
  {name: 'Luke Skywalker', id: 1},
  {name: 'Darth Vader', id: 2},
  {name: 'Yoda', id: 3},
];

export default function CharacterList({navigation}) {
  return (
    <View>
      {characters.map((character) => 
        (<View key={character.id}>
           <Text>{character.name}</Text>
           <Button title="View Details"
            onPress={() => navigation.navigate('CharacterDetails', {character})} />
         </View>)
      )}
    </View>
  );
}

In the above code, we have a character list component which receives the navigation prop from react-navigation. Each character has a button that, when clicked, navigates to the CharacterDetails screen along with the character's data.

Next, we'll set up the CharacterDetails.js file. This file will receive character data from the CharacterList file and display more detailed information about this character.

import React from 'react';
import {View, Text} from 'react-native';

export default function CharacterDetails({route}) {
  const {character} = route.params;
  return (
    <View>
      <Text>{character.name}</Text>
    </View>
  );
}

The file above extracts the passed character data from the route prop and displays the name on the details screen. One could certainly expand this functionality to include more character data and more advanced formatting.

With these components in place, the remainder of our work will be setting navigations between the two components with react-navigation library by creating a new file App.js.

import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import CharacterList from './CharacterList';
import CharacterDetails from './CharacterDetails';

const Stack = createStackNavigator();

export default function App() {
  return(
    <NavigationContainer>
      <Stack.Navigator initialRouteName="CharacterList">
        <Stack.Screen name="CharacterList" component={CharacterList} />
        <Stack.Screen name="CharacterDetails" component={CharacterDetails} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Now, if you run the app on an iOS or Android emulator, you can flip through character details pages, but you can’t yet run it on the web. To set up web support, let's use react-native-web. Here, we'll need to install another package called react-app-rewired that allows us to tweak the create-react-app webpack config without ejecting.

npm install --save-dev react-app-rewired

Then, replace the scripts part in your package.json with the following:

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-scripts eject"
}

And create a file in the project root named config-overrides.js to apply some specific configuration override:

module.exports = function override(config, env) {
  config.resolve.alias = {
    'react-native$': 'react-native-web',
  };
  return config;
};

With these configurations, you should be able to run your application both on the web and on native devices, allowing you to maximize your productivity by reusing a significant portion of your codebase.

React Native for Web might not be the perfect solution for all projects, but for those aimed at multiple platforms, it's an incredibly potent tool for reducing workload and increasing the consistency across platforms. Remember, with great power comes great responsibility. Start small, iterate, and continuously improve your skills in using this formidable tool.

We hope this tutorial has provided a solid introduction to React Native for Web and inspired you to consider its potential for your development projects. Happy coding!