DOCSEARCHbyAlgolia
Submit Docs

React Native for Web

repository·master·Indexed 12 days ago

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

A development monorepo for React Native for Web and its ecosystem. It allows running React Native components and APIs on the web using React DOM. The repository includes babel-plugin-react-native-web for import aliasing and optimization, dom-event-testing-library for pointer interaction testing, performance benchmarks, and the useResponderEvents hook for gesture management.

Tokens
95.3K
Snippets
314
Records
392
Agent score
97%

What's inside React Native for Web

  1. What is React Native for Web

    master

    React Native for Web is a compatibility layer between React DOM and React Native. It allows developers to render React Native compatible JavaScript code in a web browser by using React DOM as the underlying rendering engine.

    It is designed for:

    • New and existing apps.
    • Web-only applications.
    • Multi-platform applications.

    Key abstractions provided include:

    • A simple styles-in-JavaScript API.
    • Built-in layout localization.
    • A high-level gesture system (the responder system).

  4. Check browser compatibility for react-native-web

    master

    react-native-web is designed and tested for recent mobile and desktop browsers, supporting both touch and mouse/keyboard interactions.

    Known supported browsers include:

    • Chrome 60+
    • Safari 10.1+ / iOS Safari 10.1+
    • Edge 12+
    • Firefox ESR+
    • Opera

    Note that specific exports may have different browser support expectations, which will be documented alongside those individual exports.

  5. ARIA and Accessibility Props API

    master

    React Native for Web provides a platform-agnostic accessibility API that maps directly to W3C ARIA attributes. This allows you to provide structure, purpose, and interactivity information to assistive technologies like VoiceOver and TalkBack.

    For compatibility with existing React Native code, React Native-specific accessibility* props are also supported, but using the aria-* props is the standard way to express semantics in React Native for Web.

  6. Understand CSS vendor prefixing and polyfills in react-native-web

    master

    react-native-web automatically provides vendor prefixes for CSS properties where necessary. For example, using userSelect: 'none' in a style object will result in both -webkit-user-select: none; and user-select: none; in the generated CSS.

    Additionally, react-native-web polyfills certain CSS properties that are not supported across all browsers.

    const style = {
  userSelect: 'none'
}

    // Resulting CSS:

    .r-userSelect-24jds {
  -webkit-user-select: none;
  user-select: none;
}

  9. Handle responder lifecycle and transfer events

    master

    Once negotiation is complete, the system triggers lifecycle methods to manage the state of the interaction.

    Responder Transfer (Called during negotiation)

    • onResponderGrant: The view has successfully become the responder. Use this to provide initial visual feedback.
    • onResponderReject: The view was denied responder status because another view is already the responder and refused to release it.
    • onResponderTerminate: The responder was taken from the view (e.g., via onResponderTerminationRequest or browser events like window blur). Use this to clean up or provide feedback that the interaction was cancelled.

    Responder Lifecycle (Called while the view IS the responder)

    These methods are always bookended by onResponderGrant (start) and either onResponderRelease or onResponderTerminate (end).

    • onResponderStart: Triggered on pointer down. May be called multiple times if additional pointers are used.
    • onResponderMove: Triggered on pointer move. May be called multiple times.
    • onResponderEnd: Triggered on pointer up. May be called multiple times.
    • onResponderRelease: Triggered when no more pointers that started inside descendants of the responder are active. This releases the interaction lock. Use this to provide final visual feedback.

  11. How babel-plugin-react-native-web rewrites imports

    master

    The plugin automatically transforms imports from react-native to the appropriate optimized paths within react-native-web.

    Warning: react-native-web internal paths are not stable. Do not import from them directly; always use the Babel plugin to handle these transformations to ensure build stability.

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

// After
import StyleSheet from 'react-native-web/dist/exports/StyleSheet';
import View from 'react-native-web/dist/exports/View';

  12. Use direction-independent style properties for localization

    master

    To ensure layouts automatically flip correctly for different writing directions (LTR vs RTL), use non-standard direction-independent style properties and values. react-native-web will automatically flip these properties within subtrees based on the writing direction of the ancestor tree.

    Instead of using marginLeft or marginRight, use properties like marginStart or paddingInlineStart.

    // "start" is "left" for LTR and "right" for RTL
const style = { paddingInlineStart: 10, marginInlineStart: 10 };
return (
  <View style={style} />
);