Menu

React Native For Web: Merging the worlds of Mobile and Web

Category App Development, Product engineering

One of the hardest decisions to make when starting a new app is which platforms to target. A mobile app gives you more control and better performance but isn’t as universal as the web.

What about trying to build a mobile app and a responsive web app? Ultimately, the best experience for your customers is for your app to work everywhere, but the development and maintenance costs of that can be prohibitive.

We have seen how React Native can help you make iOS and Android apps with a shared codebase, without sacrifices in quality. But what about the web? React-native-web is one of the most amazing ideas I’ve stumbled upon in a while. For UI developers, it makes a longtime dream a reality: the ability to create an application that runs on both phones and browsers with just one codebase.

React Native as a Universal UI language

You might be thinking, “Wait! doesn’t React already work on the web?” You wouldn’t be wrong. Unfortunately, traditional React and React Native build on a different set of primitives. React uses <div>, <p> and <input>, whereas React Native uses <View>, <Text> and <TextInput>. There are good historical reasons for this since the building blocks of a web page and of a mobile app are quite different. Nonetheless, it would be great if we could use a single set of shared components.

One of the reason what really makes React Native superior to React for creating universal apps — is that React Native is a pure UI language. React Native for Web’s solution is to provide browser-compatible implementations of React Native’s components — meaning, for example, that the <View> of React Native has a DOM-based version that knows how to render to a <div>. While not every React Native component is supported, enough of them are that you could (hopefully) share the majority of your codebase.

Nonetheless, it’s possible to translate React Native primitives to the DOM language by using HTML tags — that (and more) is what react-native-web does for us.

React Native for Web

Repository — https://github.com/necolas/react-native-web

Compatibility: React Native >= 0.63.

“React Native for Web” makes it possible to run React Native components and APIs on the web using React DOM.

  • High-quality web interfaces: makes it easy to create fast, adaptive web UIs in JavaScript. It provides native-quality interactions, support for multiple input modes (touch, mouse, keyboard), optimized vendor-prefixed styles, built-in support for RTL layout, built-in accessibility, and integrates with React Dev Tools.
  • Write once, render anywhere: interoperates with existing React DOM components and is compatible with the majority of the React Native API. You can develop new components for native and web without rewriting existing code. React Native for Web can also render to HTML and critical CSS on the server using Node.js.

Big Giants using React Native for Web in production?

Twitter, Expo, Major League Soccer, Flipkart, Uber, The Times, DataCamp.

Getting started

This guide will help you render components and applications with React Native for Web.

If you’re not familiar with setting up a new React web project, please refer to the React documentation.

 

Install

npm install react react-dom react-native-web

Recommended starter kits

There are two ways to get started with a new React-native-web project. You can use either npm or yarn.

  1. Expo

Expo is a framework and a platform for universal React applications. Expo for Web uses React Native for Web and provides dozens of additional cross-platform APIs.

npm install expo-cli –global

expo init my-app

cd my-app

expo start

  1. Create React App

Create React App is a basic way to setup a simple, web-only React app with built-in support for aliasing react-native-web to react-native. However, it’s generally recommended that you use Expo.

npx create-react-app my-app

cd my-app

npm install react-native-web

npm start

Standalone configurations

Configuring a module bundler

If you have a custom setup, you may choose to configure your module bundler to alias the package to react-native.

For example, modify your webpack configuration as follows:

// webpack.config.js

module.exports = {

  // …the rest of your config

  resolve: {

    alias: {

      ‘react-native$’: ‘react-native-web’

    }

  }

}

Configuring Babel

Babel supports module aliasing using babel-plugin-module-resolver

{

  “plugins”: [

    [“module-resolver”, {

      “alias”: {

        “^react-native$”: “react-native-web”

      }

    }]

  ]

}

Configuring Jest

Jest can be configured using the provided preset. This will map react-native to react-native-web and provide appropriate mocks:

{

  “preset”: “react-native-web”

}

Please refer to the Jest documentation for more information.

Configuring Flow

Flow can be configured to understand the aliased module:

[options]

module.name_mapper=’^react-native$’ -> ‘react-native-web’

You may also need to include a custom libdef (example) in your config.

Configuring Node.js

Node.js can alias react-native to react-native-web using module-alias. This is useful if you want to pre-render the app (e.g., server-side rendering or build-time rendering).

// Install the `module-alias` package as a dependency first

const moduleAlias = require(“module-alias”);

moduleAlias.addAliases({

  “react-native”: require.resolve(“react-native-web”),

});

moduleAlias();

Configure Storybooks

Why would I want a storybook with react-native-web?

If you are using Storybook, having an explorer to see how to render your native mobile components matters to you. Why would it be different within the web?

Start by adding storybook/react to your project:

npm install @storybook/react –save-dev

Now create a folder storybook-web at the root of your project. This is where we are gonna put all our configuration for the storybook web.

Create a file main.js in the folder storybook-web which contain the following code:

module.exports = {

  stories: [‘../src/components/**/*.stories.js’],

  webpackFinal: (config) => {

    config.resolve.alias = {

      …(config.resolve.alias || {}),      // Transform all direct `react-native` imports to `react-native-web`

      ‘react-native$’: ‘react-native-web’,

      ‘@storybook/react-native’: ‘@storybook/react’,

    };    config.resolve.extensions = [‘.web.js’, ‘.js’, ‘.json’];    // mutate babel-loader

    config.module.rules[0].use[0].options.plugins.push([‘react-native-web’, { commonjs: true }]);    return config;

  },

};

When building on the web, this will replace every react-native import into react-native-web import and doing the same with @storybook/react-native and @storybook/react.

If you use some native libs which are not supported by react-native-web, you can easily create your own alias.

Let’s now create the file addons.js which will add the addons you normally use on storybook mobile:

import ‘@storybook/addon-actions/register’;

import ‘@storybook/addon-knobs/register’;

import ‘@storybook/addon-links/register’;

The minimal configuration for our project is set! We just need to add a command in the package.json to launch a storybook on the web!

In the scripts object, add the following command:

“storybook:web”: “ln -s ../@storybook/react/bin/index.js storybookweb && mv storybookweb node_modules/.bin && storybookweb -p 6006 –config-dir storybook-web”

A quick explanation: @storybook/react-native and @storybook/react to have the same link name to launch their binary: start-storybook.

To be able to differentiate them, we have to create a new link for @storybook/react. This is what we do here:

ln -s ../@storybook/react/bin/index.js storybookweb

I named it storybook web but you can change it as you want.

After created, we move it in node_modules/.bin and we use our new command to launch @storybook/react, specifying the configuration directory:

mv storybookweb node_modules/.bin && storybookweb -p 6006 –config-dir storybook-web”

Now you can launch yarn storybook: web and enjoy your components on the web!

About the Author

Shikher Mishra, a brilliant software developer aims to bring technology a bit closer to non-tech savvy people by writing blogs that simplify and educate.

Recommended Reading

Explore our insightful articles, whitepapers, and case studies that delve deeper into the latest industry trends, best practices, and success stories. Gain valuable knowledge and stay informed about the ever-evolving landscape of digital transformation.

Navigating The Two Major Data Trends in 2024

As the data landscape continues to evolve rapidly, businesses are compelled to stay abreast of emerging trends to maintain competitiveness. In the year 2024, two prominent trends are poised to redefine data analytics: the proliferation of Generative AI and the adoption of modern data contracts. These trends not only reshape how organizations utilize data but also underscore the importance of ethical considerations and robust governance in data management. This article explores these trends in-depth, providing insights into effective strategies for implementation and the implications for businesses navigating the data landscape.Trend #1: The Ascendancy of Generative AIGenerative AI, characterized by its ability to create new content autonomously, has gained significant traction across industries. The advent of large language models (LLMs) has propelled Generative AI into the mainstream, with tech giants like Microsoft, Google, and Meta integrating Generative AI capabilities into their products. As businesses increasingly rely on AI-driven insights, Generative AI is poised to become an indispensable tool for enhancing productivity and driving innovation.Strategy for Effective Implementation:To leverage Generative AI effectively, businesses must develop a comprehensive strategy tailored to their specific needs and objectives. This strategy should encompass several key components:Identifying suitable use cases:Organizations should identify areas where Generative AI can augment existing processes and generate tangible value. Whether it’s automating content creation, personalizing customer experiences, employee training, or optimizing business operations, identifying the right use cases is essential for maximizing ROI.Comprehensive employee training:Implementing Generative AI requires upskilling employees to ensure they can effectively utilize AI tools while adhering to ethical guidelines and best practices. Training programs should cover topics such as data privacy, bias mitigation, and ethical AI usage to foster a culture of responsible AI adoption.Strong data governance:Robust data governance is critical for ensuring the accuracy, security, and ethical usage of AI-generated insights. Organizations must establish clear guidelines and protocols for data collection, storage, and usage to mitigate risks associated with data misuse or bias.Managing costs and licensing:While Generative AI offers immense potential, it also comes with significant costs, both in terms of technology investments and licensing fees. Organizations must develop a cost-effective strategy for scaling AI initiatives while ensuring compliance with budgetary constraints.Balancing automation and human judgment:While AI-driven insights can enhance decision-making processes, it’s essential to strike a balance between automation and human judgment. Human oversight is crucial for interpreting AI-generated insights, identifying biases, and ensuring ethical decision-making.Ethical considerations:As AI becomes increasingly integrated into business operations, organizations must prioritize ethical considerations and accountability. This includes addressing issues related to data privacy, algorithmic bias, and the potential societal impact of AI-driven decisions.Trend #2: Adoption of Modern Data ContractsModern data contracts have emerged as a solution to streamline data usage and sharing, effectively addressing the challenges associated with broken data integrations and communication gaps between application and analytics teams.Structured Data Interactions:Modern data contracts represent a paradigm shift in how organizations manage data interactions. Unlike traditional contracts, which are static and cumbersome to maintain, modern data contracts are dynamic agreements that evolve with changing data requirements and business needs.Integration into workflows:By integrating data contracts into existing workflows and development processes, organizations can ensure seamless data interactions across disparate systems and applications. This integration enables teams to collaborate more effectively, reducing friction and improving data quality and consistency.Implementation Strategies:Implementing modern data contracts requires a strategic approach focused on collaboration, standardization, and automation. Key strategies include:Developing clear standards:Organizations should establish clear standards and guidelines for data contracts, outlining key parameters such as data formats, schemas, and validation rules. These standards help ensure consistency and interoperability across data systems and applications.Instituting change controls:Change management processes are essential for managing versioning and ensuring smooth transitions between data contract iterations. By implementing robust change controls, organizations can minimize disruptions and maintain data integrity throughout the contract lifecycle.Training and tools:Equipping teams with the necessary training and tools is crucial for successful data contract implementation. Training programs should cover topics such as contract management, data governance, and compliance, while tools such as data modeling platforms and contract management software can streamline the contract development and deployment process.As businesses navigate the complexities of the data landscape in 2024, adapting to the rise of Generative AI and modern data contracts is essential for driving innovation and maintaining competitiveness. By developing comprehensive strategies for AI adoption and data governance, organizations can harness the transformative power of Generative AI while ensuring ethical and responsible data usage. Likewise, embracing modern data contracts enables organizations to streamline data interactions, improve collaboration, and enhance data quality and consistency. By embracing these trends and implementing best practices, businesses can unlock new opportunities for growth and success in the digital age.

Learn More >

The Journey from System Admin to DevOps Superstar

According to a report by the Economic Times, when organizations cultivate a better work environment, the overall experience improves exponentially. They find true meaning in their jobs by prioritizing employees’ mettle, exceeding expectations, and work allocation.Employees seek exposure and opportunities in their jobs. By building productivity and customer satisfaction they enhance their portfolio.Radhakrishnan one of our DevOps superstars, has contributed with his service and time for over 8 years. To commemorate this everlasting relationship we got into a candid conversation with him. Here’s what he had to say about his journey before and with Nineleaps.Radhakrishnan is originally from a small town near Bengaluru, Hosur. After completing his MBA, his interest developed in computers and networking. He successfully gained appropriate knowledge by undertaking network courses and embarked on a journey to becoming a system admin. He enjoyed working for various companies as a system admin.Then came Nineleaps which gave new horizons of opportunities to his mettle. When we asked him about his transition from a system admin to a DevOps engineer, he fondly remembered a quote given to him by our CEO on the day of his selection.“You are on the flight now, just fly,” — Divy Shrivastava.And, so he did.Divy’s words of confidence boosted his resolve. The walk towards DevOps became a sprint, as multiple iterations of knowledge and experience suffused him. The arena of his work leaped and much to his admiration, he realized DevOps to be his passion and soul.Right from the get-go, an intensive training regimen, honing his skills, immersing himself in countless hours of study, and shadowing esteemed senior members of our organization he grasped the crucial importance of comprehending tasks and prioritizing them effectively. Driven by an unwavering desire to learn and prove his mettle, his transition from a system admin to a DevOps maestro was seamless. Multiple training sessions helped him get a deeper understanding of internal and external projects as well as the product, giving him never-to-dull confidence.Learning and development, knowledge transfers, and peer learning are certainly at the core of Nineleaps which helped him become the super engineer he is today. These trainings were both from the client’s side as well as in-house learning at Nineleaps.“In my opinion what sets Nineleaps apart is our dynamic and flexible approach to projects, with extensive focus on Agile methodology we are trained and nourished to build quality solutions for our clients, and also are facilitated with high-tech exposure by working with industry giants and rewarded with the utmost respect and growth opportunities.”To understand more closely we asked him about the challenges he faced at times, and according to him, documentation was a challenge. He feels all the work that the employee is doing must be documented and organized in a proper way as it will help them in the future. He also informed about instances where a person working on a specific problem might face similar challenges later in the same week and not be able to recall what the solution was properly, in such cases documenting everything became important. The organization’s culture was very open and asking questions or requesting help was never an issue which facilitated collaboration in resolving such challenges.Nineleaps became the crucible to test his mettle and with each strike of the hammer, a superstar was born.

Learn More >

Performance Testing Trends: Future of Software Optimization

Performance testing is an integral part of the software development lifecycle as it helps determine the scalability, stability, speed, and responsiveness of an application as compared to the workload given. It is not a standalone process and should be run throughout the software development process.It serves the purpose of assessing various aspects of an application’s performance, such as application output, processing speed, data transfer velocity, network bandwidth usage, maximum concurrent users, memory utilization, workload efficiency, and command response times. By evaluating these metrics, performance testers can gain valuable insights into the application’s capabilities and identify any areas that require improvementUsing AI to automate testing:Performance testing encompasses various stages, each posing unique challenges throughout the testing lifecycle. These challenges include test preparation, execution, identifying performance bottlenecks, pinpointing root causes, and implementing effective solutions. AI can help reduce or even eliminate these differences. AI-powered systems can handle the mountains of data collected during performance testing and be able to produce efficient and accurate analyses. AI can also identify the sources of performance slowdowns in complex systems, which can otherwise be tedious to pinpoint. With AI-driven automation, performance testers can streamline the testing process, ultimately saving time and resources while ensuring reliable results.Open Architecture:Performance testing, which evaluates how well a system performs, is undergoing a significant shift away from relying solely on browser-based evaluations. Instead, internet protocols like TCP/IP are being adopted for comprehensive performance monitoring. This approach emphasizes the need for system components to work together harmoniously while assessing their performance individually. The integration of cloud-based environments has become crucial, as cloud computing is an integral part of modern technology infrastructure. Cloud-based environments provide a flexible and reliable platform that enables seamless integration and coordination of various components, ultimately leading to enhanced system performance. It is crucial to prioritize comprehensive performance testing, which involves evaluating individual component performance, managing loads, monitoring in real-time, and debugging, to ensure optimal system performance.Self Service:When adopting the aforementioned trends, it’s essential to consider practical implementation tips for successful outcomes. For instance, performance engineers can use AI-powered tools to analyze performance data more effectively, leading to more accurate and actionable insights. Integrating cloud-based solutions can provide the flexibility and scalability required for modern performance testing demands. As stakeholders implement these trends, the collaboration between development, testing, and IT operations teams becomes crucial for successful integration and improved application performance.SaaS-based Tools:Testers can now easily set up and execute tests at cloud scale within minutes, thanks to the convergence of self-service, cloud-based testing, SaaS, and open architecture. Unlike older desktop-based tools that demand extensive setup, the emerging tools simplify the process with just a few clicks. Furthermore, these modern technologies offer seamless interoperability, significantly enhancing performance capabilities.Changing Requirements:In classic app testing, testers had to make educated guesses about the software’s use and create requirements and service-level agreements accordingly. However, in DevOps-oriented environments, performance requirements are seen as dynamic and evolving. Traditional requirements are now driven by complex use cases, accommodating different user experiences across various devices and locations. Performance engineering plays a critical role in continuously monitoring systems and proactively identifying and resolving issues before they can negatively impact customer retention or sales.Sentiment analysis:Monitoring production provides insight into server response times but does not capture the true customer experience. Synthetic transactions, on the other hand, simulate real user actions in production continuously. They can range from basic interactions like logging into an e-commerce site and adding products to a cart, to more complex transactions that track performance end to end without actually completing real orders or charging credit cards. Tracking the actual user experience is crucial for identifying bottlenecks, delays, and errors in real-time, as some issues may go unreported by users. Sentiment analysis is a powerful technology that evaluates customer responses based on emotions, providing valuable insights from customers’ reactions expressed in plain text and assigning numerical sentiment scores.Chaos Testing:Chaos testing is a disciplined methodology that proactively simulates and identifies failures in a system to prevent unplanned downtime and ensure a positive user experience. By understanding how the application responds to failures in various parts of the architecture, chaos testing helps uncover uncertainties in the production environment. The main objective is to assess the system’s behavior in the event of failures and identify potential issues. For instance, if one web service experiences downtime, chaos testing ensures that the entire infrastructure does not collapse. This approach helps identify system weaknesses and addresses them before reaching the production stage.Conclusion:As software development continues to evolve, performance testing must keep pace with emerging trends and technologies. By leveraging AI-driven automation, open architecture with cloud integration, and practical implementation tips, stakeholders can optimize their performance testing processes to deliver high-performing and responsive software applications. Real-world examples and a focus on key performance metrics ensure that these trends are not only understood but effectively implemented to achieve the desired outcomes. Embracing these trends empowers software development teams to elevate the user experience, enhance customer satisfaction, and drive business success.

Learn More >

Ready to embark on a transformative journey? Connect with our experts and fuel your growth today!

Explore Now