Implementing Both React Native for Web and Mobile: Example

Implementing Both React Native for Web and Mobile: React Native for Web is a framework that allows developers to use React Native components and APIs to build web applications, enabling code sharing between web and mobile platforms, streamlining development efforts, and improving cross-platform consistency.

There is a complete code at the end of the article which run both on web and mobile but we recommend you to go through each step so that you will know how things working also you need to install some libraries which is shown so go through the whole article. Enjoy Reading 🙂

Exploring the World of Cross-Platform Development

Cross-platform development is a dynamic and rapidly evolving field. As you continue your journey, consider exploring other cross-platform frameworks and technologies to expand your skill set and choose the best tools for each unique project. Whether you’re building for web, mobile, or beyond, the world of cross-platform development offers endless possibilities for innovation and creativity.

Introduction
What is React Native for Web?
Getting Started with React Native for Web
Building Components for Web and Mobile
Routing and Navigation
Styling for the Web and Mobile
Data Fetching and Management
- 7.1 Axios for Web
- 7.2 AsyncStorage (Mobile)
- 7.3 Shared Data Logic
Optimizing for Different Platforms
A Complete Code which work both on web and mobile

Pros and Cons of React Native for Web
Conclusion
Exploring the World of Cross-Platform Development

Introduction

React Native has revolutionized mobile app development by enabling developers to build native mobile applications using the same codebase for both iOS and Android. But what if you could take that a step further and use the same codebase to create web applications as well? This is where React Native for Web comes into play. In this comprehensive guide, we will explore React Native for Web in detail, from its fundamentals to advanced techniques, and discuss its pros and cons.

What is React Native for Web?

Unveiling React Native for Web

React Native for Web is an open-source library that allows you to build web applications using React Native components and APIs.
It extends the capabilities of React Native to web development, enabling code sharing between web and mobile platforms.

Why React Native for Web is Needed?

Building separate codebases for web and mobile applications can be time-consuming and challenging to maintain.
React Native for Web provides a unified solution, allowing developers to share code and streamline development efforts across platforms.

Getting Started with React Native for Web

We assume you have you Node.js and react-native installed. If not check the following for Node.js and for React Native.

Installation:

To start using React Native for Web, you need to install it in your project.

npm install react-native-web

yarn add react-native-web

All the libraries you need to install:

npm install @react-navigation/native @react-navigation/stack
npm install @react-native-async-storage/async-storage
npm install styled-components
npm install react-router-dom
npm install axios

Basic Setup:

After installation, you can configure your project to support both web and mobile platforms.

import { AppRegistry } from 'react-native';
import App from './App';
import { name as appName } from './app.json';

// Register the app for web and mobile
AppRegistry.registerComponent(appName, () => App);
AppRegistry.runApplication(appName, { rootTag: document.getElementById('root') });

This code is setting up the basic structure for a React Native app, allowing it to be run on both web and mobile platforms, and specifying where it should be rendered in the case of web integration.

Building Components for Web and Mobile

React Native Components

React Native offers a wide range of mobile-specific components for building iOS and Android apps.

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

const MobileComponent = () => {
  return (
    <View style={styles.container}>
      <Text>Hello, Mobile!</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default MobileComponent;

Web Components

React Native for Web extends React Native components to work seamlessly on the web.

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

const WebComponent = () => {
  return (
    <View style={styles.container}>
      <Text>Hello, Web!</Text>
    </View>
  );
};

// Styles can be shared with mobile components
const styles = {
  container: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  },
};

export default WebComponent;

Routing and Navigation

React Navigation (Mobile)

React Navigation is a popular library for handling navigation in React Native apps.

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

const MobileNavigation = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={MobileComponent} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

React Router (Web)

React Router is a widely used library for handling web navigation.

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const WebNavigation = () => {
  return (
    <Router>
      <Switch>
        <Route path="/" exact component={WebComponent} />
      </Switch>
    </Router>
  );
};

Seamless Navigation

Create a shared navigation logic that adapts to the platform.

import { Platform } from 'react-native';

const Navigation = () => {
  return Platform.OS === 'web' ? <WebNavigation /> : <MobileNavigation />;
};

Styling for the Web and Mobile

React Native Styles

React Native uses a StyleSheet API for styling mobile components.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

CSS-in-JS for Web

On the web, you can use CSS-in-JS libraries like styled-components.

import styled from 'styled-components';

const Container = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
`;

Compatibility

Use conditional styles to ensure compatibility between web and mobile components.

const styles = Platform.select({
  ios: {
    backgroundColor: 'lightblue',
  },
  android: {
    backgroundColor: 'lightcoral',
  },
  web: {
    backgroundColor: 'lightseagreen',
  },
});

Data Fetching and Management

Axios for Web

Axios is a popular library for making HTTP requests in web applications.

import axios from 'axios';

const fetchData = async () => {
  try {
    const response = await axios.get('https://api.example.com/data');
    return response.data;
  } catch (error) {
    console.error('Error fetching data:', error);
  }
};

AsyncStorage (Mobile)

React Native provides AsyncStorage for simple data storage on mobile.

import AsyncStorage from '@react-native-async-storage/async-storage';

const storeData = async (key, value) => {
  try {
    await AsyncStorage.setItem(key, value);
  } catch (error) {
    console.error('Error storing data:', error);
  }
};

Shared Data Logic

Create shared data management logic that works across platforms.

import { Platform } from 'react-native';

const storeData = async (key, value) => {
  if (Platform.OS === 'web') {
    // Use web data storage logic
  } else {
    // Use mobile data storage logic
  }
};

Optimizing for Different Platforms

Conditional Rendering

Use conditional rendering to display platform-specific components or styles.

const PlatformSpecificComponent = () => {
  return Platform.OS === 'web' ? <WebComponent /> : <MobileComponent />;
};

Platform-specific Code

Write platform-specific code blocks using Platform.select.

const platformStyles = Platform.select({
  ios: {
    backgroundColor: 'lightblue',
  },
  android: {
    backgroundColor: 'lightcoral',
  },
  web: {
    backgroundColor: 'lightseagreen',
  },
});

Complete Code for both Web and Mobile:

Creating a single React Native codebase that works for both web and mobile development involves several considerations, including conditional rendering, styling, and navigation. Here’s a complete example that demonstrates how to create a basic app that runs on both platforms:

// Import necessary dependencies
import React from 'react';
import { Platform, View, Text, StyleSheet } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import styled from 'styled-components/native';

// Define shared components
const SharedComponent = ({ platform }) => {
  return (
    <Container platform={platform}>
      <Text>Hello, {platform}!</Text>
    </Container>
  );
};

// Define platform-specific styles using StyleSheet
const styles = Platform.select({
  ios: {
    container: {
      backgroundColor: 'lightblue',
    },
  },
  android: {
    container: {
      backgroundColor: 'lightcoral',
    },
  },
  web: {
    container: {
      backgroundColor: 'lightseagreen',
    },
  },
});

// Define a shared navigation component
const Navigation = () => {
  return Platform.OS === 'web' ? <WebNavigation /> : <MobileNavigation />;
};

// Define mobile navigation using React Navigation
const Stack = createStackNavigator();
const MobileNavigation = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={SharedComponent} initialParams={{ platform: 'Mobile' }} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

// Define web navigation using React Router
const WebNavigation = () => {
  return (
    <Router>
      <Switch>
        <Route path="/" exact render={() => <SharedComponent platform="Web" />} />
      </Switch>
    </Router>
  );
};

// Styled-component for web
const Container = styled(View)`
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: ${(props) => props.platform === 'Web' ? 'lightseagreen' : 'transparent'};
`;

// Main App component
const App = () => {
  return (
    <View style={styles.container}>
      <Text>Hello from React Native for Web and Mobile!</Text>
      <Navigation />
    </View>
  );
};

export default App;

Explanation:

This code demonstrates the following:

The use of conditional rendering to display the appropriate navigation based on the platform (web or mobile).
Platform-specific styling using Platform.select and StyleSheet for consistency in the UI.
Shared components (SharedComponent) that adapt to the platform and display a greeting message.
Navigation components (MobileNavigation and WebNavigation) for mobile and web using React Navigation and React Router, respectively.
The use of styled-components for web-specific styling.
A main App component that renders the shared greeting message and navigation.

To run this code, you’ll need to have the necessary dependencies installed, as mentioned in the previous response. Additionally, you should have a development environment set up for both React Native and web development, including the necessary tools and configurations.

Please note that this is a basic example, and for more complex applications, you may need to handle other aspects like routing, state management, and component optimization specific to your project requirements.

Start the Development Server:

Now, you can start the development server to run your application. Depending on whether you’re using Expo CLI or React Native CLI:
- Expo CLI (Recommended for Web Support): expo start This command will start the Expo development server, and you’ll be able to run your app on both web and mobile.
- React Native CLI: For React Native CLI, you can run your app on Android or iOS devices/emulators. Make sure you have a device connected or an emulator running. Then, run:

# For Android react-native run-android # For iOS react-native run-ios

Web (Optional):If you want to run the web version separately, you can navigate to the web folder (created by react-native-web) and run a web server: npm start

Access Your App:
- For mobile: If you’re using React Native CLI, your app should automatically open on your Android or iOS device/emulator. If you’re using Expo CLI, you can access your app by scanning the QR code with the Expo Go app on your mobile device.
- For web: If you’re running the web version separately, you can access your app by opening a web browser and navigating to http://localhost:3000 or the URL specified by the web server.

Pros and Cons of React Native for Web

Pros of React Native for Web

Code Reusability: Share a significant portion of your codebase between web and mobile platforms.
Efficiency: Streamline development efforts by using a single codebase for multiple platforms.
Ecosystem: Benefit from the rich ecosystem of React Native and its libraries.

Cons of React Native for Web

Platform Differences: Handling platform-specific differences can be challenging.
Web Limitations: Not all React Native components and APIs are available for web.
Complexity: Integrating web-specific technologies may introduce complexity.

Conclusion

React Native for Web is a powerful tool for achieving cross-platform development efficiency. It allows developers to leverage the strengths of React Native while targeting web and mobile platforms with a shared codebase. By understanding the fundamentals and mastering the techniques discussed in this guide, you can create robust applications that work seamlessly across different platforms.