Introduction to React Native for Web

React Native for Web uses React DOM to accurately render React Native compatible JavaScript code in a web browser. This brings several powerful abstractions to web developers include a simple styles in JavaScript API, built-in layout localization, and a high-level gesture system.

Modern React

React Native for Web is made with modern React APIs including function components and hooks. It builds upon React DOM, making it straight-forward for React DOM apps to incrementally adopt the framework (as was done by Twitter and Flipkart.) The project aims to provide broad compatibility with React alternatives, but will continue to evolve with React as APIs like Concurrent Mode and Server Components are introduced.

Modern Web

React Native for Web makes direct use of native DOM APIs to implement specific features. As the Web platform improves, so does React Native for Web. Although certain APIs in the project have remained unchanged since inception, the implementations have become smaller and faster by migrating to new DOM APIs as they became broadly available in browsers.

Components

React Native for Web provides all the core components you’d expect from React Native. You will mostly work with View, Image, Text, TextInput, and ScrollView. The core components include props for working with interactions, including the advanced gesture responder system. Each component’s documentation contains live and editable examples to try out.

React Native for Web exports many different modules to support a variety of use cases. Your application can use as many or as few of these modules as needed. The babel plugin will help you to only bundle the modules that you are using.

Styles

React Native for Web components use JavaScript to author styles which are converted to native CSS. The design of this styling system avoids all the problems with CSS at scale and produces highly optimized CSS without the need to learn a domain-specific styling language and without the need for specialized tooling that parses markup to remove unused styles.

Reliable and tested

React Native for Web is thoroughly unit and production tested. Significant changes are first published as canary releases to limit regressions and gather feedback from partners. Pull requests record changes to the compressed file size of each module in the library.