React Native Components and APIs for the Web

Overview

React Native for Web

npm version Build Status PRs Welcome

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

Documentation

The documentation site covers installation, guides, and APIs.

Example

And here is a simple example to get you started. The example app includes interactive examples and the source code is also available.

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

class App extends React.Component {
  render() {
    return (
      <View style={styles.box}>
        <Text style={styles.text}>Hello, world!</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  box: { padding: 10 },
  text: { fontWeight: 'bold' }
});

AppRegistry.registerComponent('App', () => App);
AppRegistry.runApplication('App', { rootTag: document.getElementById('react-root') });

This example will render the App into a container on the page.

You'll notice that there is no reference to react-dom; the App component is defined using the platform-agnostic APIs and Components introduced by React Native. This allows the app to be rendered to web and native platforms.

Contributing

The main purpose of this repository is to help evolve React web and native development towards the platform-agnostic design of React Native, and in the process make it faster and easier to build high-quality experiences for the web with React. Development happens in the open on GitHub, and we are grateful for contributing bugfixes and improvements. Read below to learn how you can take part in improving React Native for Web.

Code of conduct

Facebook has adopted a Code of Conduct that this project expects all participants to adhere to. Please read the full text so that you can understand what actions will and will not be tolerated.

Contributing guide

Read the contributing guide to learn about the development process, how to propose bugfixes and improvements, and how to build and test your changes to React Native for Web.

Good first issues

To help you get you familiar with the contribution process, there is a list of good first issues that contain bugs which have a relatively limited scope. This is a great place to get started.

License

React Native for Web is MIT licensed. By contributing to React Native for Web, you agree that your contributions will be licensed under its MIT license.

Comments
  • Implement BackHandler for web

    Implement BackHandler for web

    I got that idea while working on a problem a bit similar in my RN + RNW app.

    I don't know if this can be useful to other people.

    I let it as a draft as I didn't test this exact version of the code, but I can do it if it has a chance to be accepted.

    The idea is to push a fake duplicate of the app url on load, so that when we press "back", we detect that the history has changed, and we can take actions.

    opened by Sharcoux 68
  • The future of React Native for Web

    The future of React Native for Web

    Over the next few months I'll be working through some significant changes to React Native for Web. These changes will be made on the next branch. The motivation for these changes is to:

    1. Update the library to use modern React features (e.g., Hooks) in preparation for Concurrent Mode.
    2. Move away from depending on ReactDOM's unstable-native-dependencies export, which we'd like to remove from ReactDOM.
    3. Resolve long-standing issues with the Responder Event Plugin.
    4. Prototype high-level gesture systems for ReactDOM.
    5. Simplify and improve the performance of the Touchable/Pressable components.

    Hooks rewrite (done)

    Rewriting components to use Hooks is a prerequisite for all the other changes. Hooks simplify the implementations of components and offer an opportunity to resolve many existing bugs.

    Responder system rewrite (done)

    Replacing the Responder Event System with a user-space implementation. See #1568 for more details.

    Touchables rewrite (done)

    Better integrating the PressResponder with DOM expectations, to improve the UX of Touchables. See #1591 for more details.

    Canary releases

    Most up-to-date canary is shown below. Please report regressions caused by canary releases. Post a comment below and include the canary version, as well as a codesandbox that reproduces the issue if possible.

    0.0.0-d33e107ba (5 June 2020)

    • Changed: Remove hitSlop prop handling. Let browsers use their own automatic hitslop for touch interactions.
    • Changed: Remove TabBarIOS and TimePickerAndroid exports
    • Changed: Rewrite of the gesture responder system
    • Changed: All components (except vendor ones) implemented using React Hooks. This build regresses Image caching, which will be reintroduced before a stable release.
    • Changed: The onLayout prop now requires a ResizeObserver polyfill to work, and does not fallback to window resize events.
    • Changed: Forwarding of data-* props is no longer supported. Use dataSet props, e.g., dataSet={{ 'some-key': 1 }}.
    • Changed: Each component explicitly forwards supported props.
    • Added: Pressable
    • Added: View support for accessibilityValue.
    • Fixed: Image support for variable resolution images (requires bundler integration).
    • Fixed: TextInput support for onContentSizeChange to allow auto-grow textareas.
    • Fixed: A limitation in setting styles using ref.setNativeProps.

    Open canary issues

    • [ ] Remove use of findNodeHandle in ScrollResponder
    • [ ] Unit tests for PressResponder.
    • [ ] Image loading doesn't use a cache.
    priority: high 
    opened by necolas 63
  •  Can't resolve 'react-native-web/dist/exports/ViewPropTypes' after upgrading to 0.12.1

    Can't resolve 'react-native-web/dist/exports/ViewPropTypes' after upgrading to 0.12.1

    I have tried to upgrade from react-native-web v0.11.7 to 0.12.1 and it breaks my app:

     Module not found: Can't resolve 'react-native-web/dist/exports/ViewPropTypes' in '/home/dka/workspace/test-native/node_modules/react-native-swipe-list-view/components'
    

    See:

    https://github.com/jemise111/react-native-swipe-list-view/blob/6f22515c1d404d51bf8a6d1591ec51d241b77b9b/components/SwipeRow.js#L11

    Related to:

    • https://github.com/jemise111/react-native-swipe-list-view/issues/412
    opened by kopax 53
  • [art]: ReferenceError: document is not defined

    [art]: ReferenceError: document is not defined

    After upgrading to the latest version of RNW that includes the ART module, I started getting this error on application startup:

    W20171220-14:45:17.615(-5)? (STDERR) ReferenceError: document is not defined
    W20171220-14:45:17.615(-5)? (STDERR)     at hasCanvas (/Users/joncursi/Sites/joncursi/redbird-web/node_modules/art/modes/fast-noSideEffects.js:3:16)
    W20171220-14:45:17.615(-5)? (STDERR)     at Object.<anonymous> (/Users/joncursi/Sites/joncursi/redbird-web/node_modules/art/modes/fast-noSideEffects.js:8:5)
    W20171220-14:45:17.616(-5)? (STDERR)     at Module._compile (module.js:635:30)
    W20171220-14:45:17.616(-5)? (STDERR)     at Object.Module._extensions..js (module.js:646:10)
    W20171220-14:45:17.616(-5)? (STDERR)     at Module.load (module.js:554:32)
    W20171220-14:45:17.616(-5)? (STDERR)     at tryModuleLoad (module.js:497:12)
    W20171220-14:45:17.616(-5)? (STDERR)     at Function.Module._load (module.js:489:3)
    W20171220-14:45:17.616(-5)? (STDERR)     at Module.require (module.js:579:17)
    W20171220-14:45:17.616(-5)? (STDERR)     at require (internal/module.js:11:18)
    W20171220-14:45:17.617(-5)? (STDERR)     at /Users/joncursi/Sites/joncursi/redbird-web/node_modules/react-art/cjs/react-art.development.js:27:25
    

    I followed the chain and it seems that ART -> react-art -> art module, which causes the break. Any suggestions on how to resolve this? I am using SSR in my app.

    opened by joncursi 48
  • React Native 0.60 tasks

    React Native 0.60 tasks

    Tasks related to changes in React Native 0.60.

    • [x] Migrate docs and RNTester examples to storybook
    • [x] Update project dependencies
    • [ ] ~Add touchable support to Text (#1011) (@DaKaZ)~
    • [x] Add flow types for ScrollView
    • [x] Add flow types for View
    • [x] Add flow types for Text
    • [x] Add flow types for styles
    • [x] Update Touchable snapshot (@necolas)
    • [x] Update TouchableHighlight snapshot (@necolas)
    • [x] Update TouchableOpacity snapshot (@necolas)
    • [x] Update TouchableWithoutFeedback snapshot (#1105) (@necolas)
    • [x] Add forwardedRef prop to Text
    • [x] Add forwardedRef prop to View
    • [x] Add accessibilityState
    • [x] Add accessibilityRelationship
    • [x] Remove accessibilityStates
    • [x] Remove accessibilityTraits
    • [x] Remove accessibilityComponentType
    • [x] Replace context.isInAParentText w/ React.createContext (@awinograd)
    • [x] Update ListView snapshot (Requires types for ScrollView) (@necolas)
    • [x] Update PanResponder snapshot
    • [x] Update SwipeableListView snapshot
    • [x] Add deprecation warnings for className (#1146) (@necolas)
    • [x] Merge StyleSheet default layout optimisations (#1136, #1165) (@necolas)
    • [x] Upgrade Flow (https://github.com/necolas/react-native-web/issues/1171) (@necolas)
    • [x] Upgrade Babel (https://github.com/necolas/react-native-web/issues/1170) (@necolas)
    • [x] Update Animated snapshot (@necolas)
    • [x] Update Batchinator snapshot (@necolas)
    • [x] Update FillRateHelper snapshot
    • [x] Update FlatList snapshot (@necolas)
    • [x] Update NativeEventEmitter snapshot
    • [x] Update SectionList snapshot (@necolas)
    • [x] Update SwipeableFlatList snapshot (@necolas)
    • [x] Update ViewabilityHelper snapshot
    • [x] Update VirtualizeUtils snapshot
    • [x] Update VirtualizedList snapshot (@necolas)
    • [x] Update VirtualizedSectionList snapshot (@necolas)
    • [x] Change accessibility props (#1112) (@necolas)

    Afterwards:

    • [ ] Add accessibilitySetSize
    • [ ] Add accessibilityPosInSet
    • [ ] Add direction (inc none)
    • [ ] Remove accessible
    • [ ] Add focusable
    • [ ] Remove enzyme
    priority: high 
    opened by necolas 44
  • Port over VirtualizedList from react-native

    Port over VirtualizedList from react-native

    This patch solves the following problem Hey everyone, can you give me some feedback on this?

    I created #464 and can move forward with that but would like some feedback here first.

    Since FlatList & VirtualizedList are JS implementations, they should be able to be ported over directly from React Native itself. That's what I've done here.

    However what I've noticed is that the VirtualizedList performance is horrendously slow with the straight port. This makes me wonder if it's better to continue working on #464 as I know that the performance there is really good and can support all features over time, or to stick with this PR for a true port of the React Native functionality for compatibility but sacrificing performance?

    Test plan

    Test out #464 and this PR to let me know about performance. I've tested it on a list, and this PR is extremely slow to render initially and very janky during scrolling. But your experience may be different and I'd like to hear about it!

    This pull request

    • [ ] includes documentation
    • [ ] includes tests
    • [ ] includes benchmark reports
    • [ ] includes an interactive example
    • [ ] includes screenshots/videos
    opened by tazsingh 43
  • StyleSheet: layout optimizations and fixes to setNativeProps

    StyleSheet: layout optimizations and fixes to setNativeProps

    Is your feature request related to a problem? Please describe.

    Just documenting a branch I half finished a while ago and will need to pick up soon to (in)validate the approach.

    The branch tackles 3 inter-related issues.

    1. Chrome has a tendency to increase layout times of large trees by a few ms when an element has a lot of HTML classes vs when an element has few HTML classes. Last time I checked, other browsers don't have this issue.

    2. When you pass a null value to some RN styles, it reverts to the default style set by RN. For example borderWidth: null will default to 0. But on web, it will wipe out the style altogether and might fall back to a browser default that isn't 0 (e.g., input elements). This issue is currently hacked around in the style resolver.

    3. Furthermore, in addition to 2) being a problem for setNativeProps, this instance method doesn't quite resolve styles in the same way as React Native if you try to combine properties like margin and marginLeft. For example, if you set marginLeft:10 in render and then use setNativeProps to set marginHorizontal:0, RNW will incorrectly wipe out the marginLeft style whereas RN will not. This is because setNativeProps reverse-engineers the original RN styles from the styles in the DOM. StyleSheet currently expands margin to margin{Left,Right} so by the time styles are read from the DOM we have no idea how marginLeft was defined in RN styles. The DOM style could have come from marginLeft, marginHorizontal, or margin. So the precedence concept in certain RN styles isn't maintained when using the setNativeProps escape-hatch.

    Describe a solution you'd like

    The solution to 1) and 2) is to predefine the View/Text/etc base styles in a single class that acts like a base reset for the element type. This will reduce HTML classes applied to default View/Text/etc. And when a null value is supplied, we know the default style is taken care in a way that isn't complected with StyleSheet resolving.

    I think the solution is to 3) is to refactor the backing DOM stylesheet manager to create priority buckets for styles (which can be done by wrapping rules in something like @media all {}) that are guaranteed a consistent order in the DOM. For example, P0/1/2, where P0 appears last in the DOM. Given that each style has the same specificity, the order of the "buckets" will ensure the browser applies styles in the way that RN expect. This will allow StyleSheet to write styles like .marginHorizontal-dsfsd { margin-left:0; margin-right: 0 } to the DOM, without expanding it to each individual margin property. Styles like margin would go into P2, marginHorizontal would go into P1, and everything else in P0. This in turn will allow setNativeProps to correctly reverse-engineer the DOM styles. And this will also reduce the number of classNames applied to DOM elements if they are using properties that are currently expanded to their top/left/right/bottom equivalents.

    enhancement 
    opened by necolas 42
  • 0.14 canary

    0.14 canary

    This thread will surface the main changes that I expect to go into 0.14 and give people a chance to test the pre-release.

    npm install [email protected]
    

    To report an issue please comment below with a reduced test case on codesandbox and the steps to reproduce.

    [change] Default flex-basis value of Views

    React Native has an implementation of flexbox that does not quite follow the W3C spec for flexbox. Previously, React Native for Web attempted to replicate the React Native rendering by setting flexBasis to 0%. However, this created its own problems where views could collapse down to 0px in height on the web. This patch sets the default flexBasis back to 'auto'. This will occasionally cause different rendering inconsistencies with React Native, which can be addressed by making changes small to existing React Native styles. And ultimately, it is up to Yoga to correct its flexbox implementation.

    Fix #1640 Fix #1604 Fix #1264 Close #1265

    [change] Add Modal implementation

    A Modal implementation using CSS animations and ARIA.

    The app is hidden from screen readers via aria-modal. Focus is contained within the modal. When the Escape key is pressed, the onRequestClose function is called on the top-most modal.

    Close #1646 Fix #1020

    [add] Pressable support for hover state

    This patch ports the 'useHover' hook to React Native for Web, providing hover state that is scoped to a pressable and does not bubble to ancestor pressables. This behavior aligns with the behavior of the focus and press states.

    Fix #1708

    opened by necolas 40
  • Hover support in Pressable

    Hover support in Pressable

    Is your feature request related to a problem? Please describe.

    I would like it to make the hover status part of react-native-web since it's an important interaction of the web UX.

    e.g.

    <Pressable
            onPress={() => {
              setTimesPressed((current) => current + 1);
            }}
            style={({ pressed, hovered, focused }) => [
              {
                backgroundColor: pressed
                  ? 'rgb(210, 230, 255)'
                  : 'white'
              },
              styles.wrapperCustom
            ]}>
            {({ pressed, hovered, focused }) => (
              <Text style={styles.text}>
                {pressed ? 'Pressed!' : 'Press Me'}
              </Text>
            )}
          </Pressable>
    

    Describe a solution you'd like

    To address these problems, we are shipping a new core component called Pressable. This component can be used to detect various types of interactions. The API was designed to provide direct access to the current state of interaction without having to maintain state manually in a parent component. It was also designed to enable platforms to extend it's capabilities to include hover, blur, focus, and more. We expect that most people will build and share components utilizing Pressable under the hood instead of relying on the default experience of something like TouchableOpacity.

    https://reactnative.dev/blog/2020/07/06/version-0.63

    Additional context

    opened by RichardLindhout 37
  • Does it work with react-native-maps ?

    Does it work with react-native-maps ?

    The problem I'm trying to run web an expo-project which uses MapView and I've got this error:

    TypeError: Object(...) is not a function
    nativeComponent
    node_modules/react-native-maps/lib/components/MapView.js:945
      942 | 
      943 | MapView.MAP_TYPES = MAP_TYPES;
      944 | 
    > 945 | const nativeComponent = Component => requireNativeComponent(Component, MapView, {
      946 |   nativeOnly: {
      947 |     onChange: true,
      948 |     onMapReady: true,
    
    Attempted import error: 'requireNativeComponent' is not exported from 'react-native-web/dist/index'.
    

    How to reproduce Execute this piece of code

    <MapView
      style={{ flex: 1 }}
      initialRegion={{
        latitude: 37.78825,
        longitude: -122.4324,
        latitudeDelta: 0.0922,
        longitudeDelta: 0.0421,
      }}
    />
    

    Expected behavior It should open a google-maps.

    opened by brunohkbx 35
  • Components backlog

    Components backlog

    • [ ] Modal
    • [ ] RefreshControl
    • [ ] Slider
    • [ ] TouchableNativeFeedback
    • [ ] WebView
    • [x] Button
    • [x] CheckBox
    • [x] FlatList
    • [x] ImageBackground
    • [x] ListView
    • [x] Picker
    • [x] SectionList
    • [x] ProgressBar
    • [x] ScrollView
    • [x] SwipeableFlatList
    • [x] SwipeableListView
    • [x] Switch
    • [x] Touchable
    • [x] VirtualizedList

    PR's welcome

    opened by necolas 35
  • Unable to interact with nested Pressables if parent is disabled

    Unable to interact with nested Pressables if parent is disabled

    Is there an existing issue for this?

    • [X] I have searched the existing issues

    Describe the issue

    Hovering Pressables inside of another, disabled pressable no longer works.

    Expected behavior

    I would expect this behavior to be the same as in 0.17.x, where hovering of Pressables nested inside a disabled Pressable was possible.

    Steps to reproduce

    1. Install [email protected]
    2. Wrap a pressable within another pressable, and add a visual hover state to it through a nested view or similar.
    3. Disable the parent pressable
    4. Attempt to trigger the hover-state for the nested pressable. You should be successful!

    then...

    1. Install [email protected]
    2. Repeat steps 2 & 3 from the previous steps
    3. Attempt to trigger the hover state for the nested pressable. Nothing should happen.

    This scenario has already been set up in the provided CodeSandbox. Just change the version of the react-native-web package!

    Test case

    https://codesandbox.io/s/react-native-web-pressable-nesting-zjo2sz

    Additional comments

    I can't seem to find any references to this particular change, so I'm not sure whether this is a regression or an intended behavior change.

    I'm very thankful for this project and all the work that goes into improving it! 🙌

    bug 
    opened by SkySails 4
  • Keyframe Animation only works with StyleSheet.create and within on Animated.View

    Keyframe Animation only works with StyleSheet.create and within on Animated.View

    Is there an existing issue for this?

    • [X] I have searched the existing issues

    Describe the issue

    (this might be too issues, but I guess that they are probably based on the same underlying problem) Hi 👋

    I recently upgraded from 0.11 to 0.18 and noticed that our loading indicators are broken (no longer animated). I noticed that the CSS property animationKeyframes is only respected if

    1. The element is a View (Animated.View does not work)
    2. The animation is passed through StyleSheet.create, inline styling does not work

    The generated CSS contains all CSS animation properties (like animation-timing-function) except animation-name.

    Expected behavior

    Animation keyframes should be generated and work when using inline styles and/or Animated.View. All Views should rotate in the provided test case.

    Steps to reproduce

    Use React Native Web 0.18.0. (See attached codesandbox)

    const animation = {
      animationKeyframes: [
        {
          "0%": { transform: [{ rotate: "0deg" }] },
          "100%": { transform: [{ rotate: "360deg" }] }
        }
      ],
      animationDuration: "750ms",
      animationIterationCount: "infinite",
      animationTimingFunction: "linear",
      animationPlayState: "running"
    };
    
    const Styles = StyleSheet.create({
      animation
    });
    

    then render views

    
          <Animated.View
            style={[
              {
                width: 100,
                height: 100,
                backgroundColor: "red"
                //...animation
              }
            ]}
          >
            <Text>Animated.View inline!</Text>
          </Animated.View>
          <Animated.View
            style={[
              {
                width: 100,
                height: 100,
                backgroundColor: "red"
              },
              Styles.animation
            ]}
          >
            <Text>Animated.View StyleSheet!</Text>
          </Animated.View>
          <View
            style={[
              {
                width: 100,
                height: 100,
                backgroundColor: "green",
                ...animation
              }
            ]}
          >
            <Text>View inline!</Text>
          </View>
          <View
            style={[
              {
                width: 100,
                height: 100,
                backgroundColor: "green"
              },
              Styles.animation
            ]}
          >
            <Text>View StyleSheet!</Text>
          </View>
    

    Observe that only the last View (with Text "View StyleSheet!") will start to rotate.

    Test case

    https://codesandbox.io/s/react-native-keyframe-animation-bug-ts4ib9

    Additional comments

    Thanks for being such a pillar of the React (Native) community!

    bug has: pr project:react-native-web 
    opened by EyMaddis 6
  • I18nManager

    I18nManager

    Is there an existing issue for this?

    • [X] I have searched the existing issues

    Describe the issue

    I18nManager was removed, but it works in native, a lot of modules working with I18nManager. Remove whole of i18nMaanager is not good approach. This violates the theory of React-Native (Learn once, write anywhere). Moving to start/end is good solution because has performance and can change direction in runtime. For swipe left to right, we could change body direction in I18nManager.

    Expected behavior

    I think you should integrate I18nManager and useLocaleContext

    Steps to reproduce

    .

    Test case

    .

    Additional comments

    No response

    resolution: wontfix 
    opened by hosseinmd 1
  • Deprecate Image.style.tintColor and Image.style.resizeMode

    Deprecate Image.style.tintColor and Image.style.resizeMode

    Is there an existing request?

    • [X] I have searched for this request

    Describe the feature request

    Prepare for these non-standard styles to be removed from React Native for Web. There is already a resizeMode prop, which should be used instead. And a tintColor prop could be added, although mechanisms for color tinting images on web don't seem to work well in Safari, so the feature could be dropped entirely. Moving these features out of style will help avoid style deopts on web, and enable static extraction of styles from core components (i.e., avoid using StyleSheet.flatten during render).

    enhancement has: pr project:react-native-web 
    opened by necolas 0
  • Deprecate Touchables

    Deprecate Touchables

    Is there an existing request?

    • [X] I have searched for this request

    Describe the feature request

    The Touchables are no longer recommended in React Native and have been replaced by Pressable. We should deprecate the Touchable components and mixin, and then remove them from React Native for Web. There has been the intent to deprecate them from React Native for a while, but the team hasn't had time to get around to it yet.

    enhancement has: pr project:react-native-web 
    opened by necolas 0
Releases(0.18.0)
  • 0.18.0(Jun 10, 2022)

    Breaking changes

    • Browser support has been reduced. Changes as follows: Safari 10.1+, Edge (Chromium), no IE, no legacy Android browser.
    • Styles are inserted on module eval, not component render. This is needed to account for changes to rendering in React 18.
    • Style sheets rendered on the server will now include styles from all the eval-ed modules, rather than only the styles produced by the initial render.
    • StyleSheet.create() is now the identify function, returning the input style objects. Previously, it replaced styles with numeric ids. This improves compatibility with React Native, but accessing the returned style objects at runtime is still not recommended as it can prevent static extraction to CSS. (#2068)
    • StyleSheet.getSheet() can be used on the server to retrieve the current style sheet as a CSS string. (#2196)
    • I18nManager is now a mock API included only for compatibility with React Native. The ability to flip left/right properties or values has now been removed entirely (use start/end instead). See below for new localization APIs.
    • Inline styles are no longer automatically vendor-prefixed. This improves inline style performance and discourages use of inline styles. This should have little effect in practice if your app is predominantly using StyleSheet.create().
    • The deprecated accessible, accessibilityState, and accessibilityValue props have been removed.
    • The :focus-visible polyfill has been removed, as by default modern browsers no longer show focus rings for pointer interactions.
    • VirtualizedList, FlatList, and SectionList vendor components have been updated to match latest React Native. (#2241) Thanks to @DavidRieman.
    • The legacy jest preset and snapshot serializer has been removed from the npm package.
    • The unstable_createElement API has changed. Children are no longer accepted as the 3rd argument, they must be included in the props as the 2nd argument. The 3rd argument is now an options object with a field to set the expected writing direction ({ writingDirection }).

    New features

    • Localized LTR/RTL layouts can now be nesting to arbitrary depths simply by setting the dir or lang prop on a component. By default, layouts are rendering RTL. To render RTL you must set dir="rtl" on an outer element rendered by React.
    • Localized LTR/RTL layouts can be switched dynamically at runtime.
    • useLocaleContext is a new export API. Use it to query a component's locale and writing direction context for fine-grained control over localized layout.
    • Rendering into multiple windows and shadow roots in now supported. (#1517, #2138)
    • Extraction to static CSS and consumption of external CSS is now possible but not yet recommended. The StyleSheet runtime can consume any styles that match an expected format, but StyleSheet.flatten cannot work with extracted styles. (See below for more details.)

    Fixes

    • Fixes static and dynamic shortform / longform deduplication. (#2007)
    • Display the focus ring on CheckBox and Switch elements. (#2242)
    • Prevent href navigation for disabled Pressables and Touchables. (#2299)
    • Linking.openURL supports target value. (#2277)

    Notes

    StyleSheet runtime

    StyleSheet has been rewritten to better separate the runtime from the compiler. The performance of the new merging runtime is on par with using css-modules. The core runtime is a standalone package called styleQ; refer to the styleQ documentation for more details.

    image

    The performance of inline styles has also been significantly improved, although StyleSheet still has to perform extra work to transform non-standard React Native styles and polyfill logical styles.

    image

    The StyleSheet import is now a standalone module. StyleSheet itself is a function that can be called to resolve styles to DOM className and style values, e.g.,

    const [ className, inlineStyle ] = StyleSheet([ styles.root, prop.styles ])
    

    StyleSheet extraction

    One of the benefits behind the new architecture is that StyleSheet can resolve compiled styles that conform to the expected format, whether they are produced by the built-in compiler or an external source. However, this is not yet recommended, as explained below.

    Style compilers must produce annotated objects that are treated as class name maps, and classes are de-duplicated based on whether they share the same key, e.g.,

    {
      $$css: true,
      display: 'display-class',
      opacity: 'opacity-class'
    }
    

    This is the first step towards allowing 3rd party tools to extract styles to static CSS files, and optionally dropping the client-side compiler, without needing to integrate deeply with the StyleSheet runtime or having to modify props/prop values in the source code, i.e., only the StyleSheet.create() call needs transforming by the compiler.

    The existence of the StyleSheet.flatten() API is a problem for build-time compiling of some styles. Components that flatten styles (e.g., Animated, Image) expect to be able to work with the source styles, and use the source values at runtime. A compiler that aims to extract all styles and have no runtime transform would also need to disallow the use of StyleSheet.flatten() entirely. A future release of React Native for Web may remove use of StyleSheet.flatten from internal implementations, but cannot prevent this API from being used in product code or 3rd party packages.

    Source code(tar.gz)
    Source code(zip)
  • 0.17.0(Jun 17, 2021)

    Accessibility improvements and breaking changes to unstable APIs.

    Breaking changes

    • Remove special treatment of elements with accessibilityRole="menuitem". It no longer adds elements to the tab flow.
    • Remove anchor element inference from View and Text with accessibilityRole="link". Only requires addition of href prop.
    • Remove unstable_createElement element-type inference using href. Fixes use with svg elements.
    • Remove unstable_createElement keyboard shim for onClick. It no longer invokes onClick during onKeyDown for keyboard interactions on elements that are not natively interactive.

    Fixes

    • Fix Pressable support for keyboard interactions if element is unmounted during interaction.
    • Remove unnecessary CSS reset for input number spin buttons.
    • Fix ProgressBar & Switch rendering in Windows High Contrast mode
    • Text preserves white-space if numberOfLines={1}.
    Source code(tar.gz)
    Source code(zip)
  • 0.16.0(Apr 20, 2021)

    This release includes Flow type exports, updates vendored modules, and miscellaneous bug fixes.

    Breaking changes

    • Animated & VirtualizedList have been updated from React Native.
    • Dimensions has changed the source of window dimensions and works more reliably in Safari.
    • NativeEventEmitter no longer inherits from EventEmitter and does not include the removeSubscription method.

    New features

    • Flow types are now exported. Thanks @comp615
    Source code(tar.gz)
    Source code(zip)
  • 0.15.0(Feb 12, 2021)

    This release introduces improved accessibility features and new documentation. It includes relatively minor breaking changes.

    Breaking changes

    • React 17 is a peer dependency.
    • The I18nManager API has removed the isRTL and doLeftAndRightSwapInRTL properties. They must now be accessed using the getConstants() method, which returns an object with the same properties. This was an undocumented breaking change in a previous version of React Native.
    • The focusable prop now determines whether an element appears in the keyboard tab flow.
    • The hrefAttrs prop has been added to Text and View. The value is an object with rel, target, and download properties. This replaces the undocumented rel and target props.
    • The automatic addition of rel="noopener" to anchors has been removed.
    • The Linking.openURL(url) API now opens the url in new tab.
    • The Linking API now includes the addEventListener methods.
    • The deprecated importantForAccessibility prop has been removed. Use accessibilityHidden instead.
    • The undocumented data-focusable attribute has also been removed from rendered DOM nodes.
    • The undocumented disabled prop has been removed from View and Text; use accessibilityDisabled instead.

    New features

    • Pressable has added onHoverIn and onHoverOut props.
    • All ARIA properties are now supported via equivalent accessibility* props. The undocumented support for aria-* prop forwarding remains and will be removed in a future version.
    • Additional accessibilityRole values are mapped to HTML element equivalents.
    • CSS aspectRatio property is now available in browsers with support.

    Deprecations

    • The accessible prop is deprecated and will be removed in the next minor release. React Native for Web will follow React Native for Windows/macOS in removing this prop. Use focusable instead.

    Documentation

    This release will include a rewrite of the documentation site and interactive examples.

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

    image

    The examples will be embedded in relevant pages via a Next.js-powered codesandbox, making it easy for people to fork the example app from their browsers.

    Source code(tar.gz)
    Source code(zip)
  • 0.14.0(Oct 9, 2020)

    This is a relatively small release that introduces a couple of new features and makes a change to the default flexBasis value of View. There are no breaking API changes and it should be straight-forward to upgrade from 0.13. Thank you to Twitter Engineering and everyone else who tested and helped to improve the 0.14 release.

    Breaking changes

    Default flex-basis value of Views

    React Native has an implementation of flexbox that does not quite follow the W3C spec for flexbox. Previously, React Native for Web attempted to replicate the React Native rendering by setting flexBasis to 0%. However, this created its own problems where views could collapse down to 0px in height on the web. This patch sets the default flexBasis back to auto. This will occasionally cause different rendering inconsistencies with React Native, which can be addressed by making changes small to existing React Native styles to set the flexBasis back to 0% or the desired percentage. And ultimately, Yoga 2 intends to correct its flexbox implementation and this will make its way into React Native eventually.

    Fix #1640, #1604, #1264

    New features

    Modal implementation

    A Modal implementation using CSS animations and ARIA, courtesy of @imnotjames. When the modal is open the rest of the app is hidden from screen readers via aria-modal. Focus is contained within the modal. When the Escape key is pressed, the onRequestClose function is called on the top-most modal.

    Fix #1020

    Pressable support for hover state

    The Pressable component state now includes hover, which scoped is scoped to a Pressable instance and does not bubble to ancestor Pressables. This behavior aligns with the behavior of the focus and press states.

    <Pressable
      children={
        ({ pressed, hovered, focused }) => {}
      }
      style={
        ({ pressed, hovered, focused }) => {}
      }
    />
    

    Fix #1708

    Source code(tar.gz)
    Source code(zip)
  • 0.13.0(Jun 26, 2020)

    This release includes many significant changes and improvements.

    1. Modern React: implements components using function components and hooks. It removes use of various legacy React features such as legacy context and create-react-class. These changes mean better support for Concurrent Mode, Fast Refresh, and interaction handling.
    2. Gesture Responder System: this has be rewritten from scratch in user space. Dozens of bugs have been fixed and the system is heavily unit tested; it's now the most accurate and well integrated implementation of any platform.
    3. React Alternatives: this release removes the use of unstable React DOM APIs. React Native for Web can now be used with Preact and other libraries that are API compatible with React. However, it should be noted that benchmark rendering of 0.13 with React DOM is a lot faster than Preact.

    Breaking changes

    • The Responder System has been rewritten. This should not be a breaking change (and comes with many bug fixes), but since the system is implemented in user-space rather than React, it may encounter differences in timings relative to the ReactDOM events.
    • The onPress callback on Touchables is now backed by native click events and will be called in almost every situation a native click event is called. The onPress prop of Touchable* components now receives a SyntheticMouseEvent not a SyntheticResponderEvent. It may be fired without a preceding onPressIn.
    • All the components are implemented as function components, so using findNodeHandle to get a reference to the component's underlying host node will not work. Use ref instead. The findNodeHandle and findDOMNode APIs are discouraged and are not safe with function components or concurrent mode.
    • The forwardedRef props have been removed. The ref on a component will now return a ref to the host node, which has the imperative methods attached to it.
    • The hitSlop prop has been removed. This caused incorrect hit targets for mouse interactions. The browser's built-in touch hitslop will be relied on instead.
    • The prop types of each component are now explicit. Unknown props will not be forwarded to the underlying React DOM component.
    • Forwarding of data-* props is no longer supported. Use dataSet instead. For example, dataSet={{ someName: 1 }}.
    • The onLayout prop now requires a ResizeObserver polyfill to work, and does not fallback to window resize events.
    • Removed React Native APIs that have been removed or deprecated: TabBarIOS, TimePickerAndroid
    • Removed support for HTML microdata props. Microdata has been removed from the HTML spec.
    • Removed the accessibilityRelationship prop. This prop was not added to React Native. Continue using aria-* props for now.

    New features

    • Added View support for accessibilityValue.
    • Added the Pressable component.
    • Add the Appearance API and useColorScheme hook.

    Fixes

    • The active touch responder will now be terminated when the body scrolls, context menu appears, etc.
    • Performance improvements for Touchables. The onPress event can now be used to preventDefault the native click behavior (this is no longer done automatically)
    • Fixes Image support for variable resolution images (requires bundler integration).
    • Fixes TextInput support for onContentSizeChange to allow auto-grow textareas.
    • Fixes the correctness of setting styles using ref.setNativeProps. Recommend avoiding this API as it is expected to be deprecated in React Native.
    Source code(tar.gz)
    Source code(zip)
  • 0.12.0(Jan 28, 2020)

    This release includes compatibility with the vast majority of React Native v0.60. React features like createContext and forwardRef have been integrated, as well as several breaking changes from upstream. In most cases, you should be able to update smoothly if not using components and APIs deprecated in React Native.

    Breaking changes

    • createElement is renamed to unstable_createElement and is an unstable implementation detail for now (d4b9f35d3379e3b92b7dfe279d1a9fa58dacecb6)
    • Remove prop types exports from package. These are deprecated in React Native and introduce significant DEV time performance cost. Flow types are now preferred (1ad16930391303da511c98879fa7b2002b28c822)
    • Remove the following exports which are all deprecated or removed in React Native core: AsyncStorage, AlertIOS, ActionSheetIOS, CameraRoll, DatePickerAndroid, DatePickerIOS, ImageEditor, ImagePickerIOS, ImageStore, ListView, MaskedViewIOS, NavigatorIOS, NetInfo, PickerIOS, ProgressBarAndroid, ProgressViewIOS, PushNotificationsIOS, SegmentedControlIOS, Slider, SnapshotViewIOS, StatusBarIOS, SwipeableListView, ToolbarAndroid, VibrationIOS, ViewPagerAndroid, WebView.
    • Hydrating SSR markup is now an explicit opt-in via options passed to AppRegistry.runApplication (afb8d3b7fbe03feb7a79ca069c1c246787a51060)
    • Remove deprecated accessibilityStates prop (d57fb6eb01f5226c01e034bd1ce535b5a7204b33)
    • Remove deprecated className prop and forwarding of arbitrary props from View and Text to the host DOM element.
    • Remove deprecated accessibilityTraits and accessibilityComponentType props (ae94551ac54b6f098dabf2084564f25aa1ca5b02)
    • Remove resizeMode static from Image (c35f849524deafffc35aef96122a9dc56ef3be10)
    • Remove placeholderTextColor from unstable_createElement props. Instead, this is now exposed as a style property (287251a06a08f7338a0516b1648a25118a1c410b)
    • Update Switch prop types to latest from React Native (aa8593ba9704d42f26c87303ac5a584856cbadaa)

    New features

    • The following exports have been updated to align with React Native: Animated, Touchable, TouchableHighlight, TouchableOpacity, TouchableWithoutFeedback, FlatList, SectionList, VirtualizedList, VirtualizedSectionList.
    • Add support for accessibilityRelationship and accessibilityState props (d57fb6eb01f5226c01e034bd1ce535b5a7204b33)
    • Add support for native "thin" scrollbars (e0412acb94b75aac01eda7c0e661e61279401325)
    • Add support for forwardedRef on Text and View; use this instead of findNodeHandle to get a reference to the native element. (React has deprecated findDOMNode in Strict Mode, and you can anticipate the same happening to findNodeHandle.)
    • Add a disabled prop to TextInput to support disabling the element (fc033a3161be76224d120dec7aab7009e9414fa7)
    • Add useWindowDimensions hook (df1b62cd454565cc3d07662f84848b483c6f8744)
    • Add support for Platform.isTesting (ad674e4b4f71613422a95b60b3edb2c54028336f)
    • Only inject the ResponderEventPlugin when client rendering (250ee3c234196fdddf6e5189c572a292566c3cb2)

    Fixes

    • Fix support for disabling scroll in ScrollView for touch interactions (e22f0bebb3262f882497f8818d59f77139402d90)
    • Fix support for autoComplete on TextInput (b10711bddd1fdf6e01e82c0d49840dce9c2e04d2)
    • Remove UA default margin from TextInput (5334a4f0d8c2aefb64131fe59647e9ce2d946aac)
    Source code(tar.gz)
    Source code(zip)
  • 0.11.0(Mar 13, 2019)

    This release includes: a refactor of StyleSheet internals to improve browser layout times; improved compatibility with React Native; reduced bundle sizes in worse-case-scenario; and improved text truncation capabilities in supporting browsers.

    Breaking changes

    • CSS output has changed to better optimize browser layout times (9f860b8dfc8e54297752d9c661e16aa8c640eaac and d4417e93a31636cdf141e3256b3fc6ba96f8e527)
    • Remove export default from the ESM entry point, to help with tree-shaking (69bd0f631dc0a1640e1f4449611e03d0339e8e81)
    • Remove ART from the exports to reduce CJS bundle size (3d3ea9aeed7d18ea9daf505e70bb14cfc966da23)
    • Remove resizeMode static from Image (49edcb291e9aa2b8a935448f5355c0d17151e229)
    • Replace outline with outline{Color,Style,Width} styles (f048d848a14fdd255cfabf1e32f8c55adc2622f0)
    • Replace animationName with animationKeyframes style prop.

    Deprecations

    • The className prop on View and Text is deprecated and will be removed shortly (d50f6304dc5da9d3e88b1a583214e1279b9dd32d)

    New features

    • Add TextInput support for onContentSizeChange, by @awinograd (67979b72827ee7f6e60c9e3fff9f74c9bc972f80)
    • Add Text support for numberOfLines prop value greater than 1. Only supported in WebKit and Blink browsers; limited localization support (f048d848a14fdd255cfabf1e32f8c55adc2622f0)

    Fixes

    • Organize unimplemented modules in directories to help reduce CJS build size, by @EvanBacon (2a418bed0cd3a453cfa9f0d2bada06251ab3594d)
    • Fix the NativeEventEmitter implementation, by @EvanBacon (9ce2b5bf0cfa3e985c669bc3042fd326df965c67)
    • Allow text shadow to be set if only a textShadowBlur and textShadowColor are provided, by @SKAhack (cf7b020c5dd50a61b744898a7abb033b2073b62b)
    • Fix animation style prop types.
    • Fix use of maxWidth with Text using numberOfLines prop.
    • Passing null values for style props now produces improved compatibility with React Native rendering.

    Appendix

    • StyleSheet refactor reduces browser layout times up to 30% in the stress tests.
    • StyleSheet refactor reduces HTML payload size for SRR, e.g., the size of the HTML produced by the Twitter PWA's home timeline screen is reduced from 25.56 KB to 21.35 KB (-16%) gzipped.
    Source code(tar.gz)
    Source code(zip)
  • 0.10.0(Jan 30, 2019)

    This release includes accessibility, measurement, performance and reliability improvements.

    Breaking changes

    • The measurements provided by onLayout have been fixed but if you are depending on bugs in the prior implementation you may experience breaking changes. The dimension values will now include border size; the position values will now include transforms. (93eb3f041ff27c5ff7ce963faf4f412ce1784cea)
    • TextInput events no longer include the which property. (8925bf76af2e0e5571fb4bfd05e12bedd0175401)

    New features

    • Support for the new accessibilityRole and accessibilityStates props (4040151ee643a02534e72deb51eee76f001b9a5f)

    Fixes

    The following fixes were included in 0.9.x patch releases, and I want to bring attention to them in these release notes. Thank you to the people who contributed these improvements.

    • Fix a memory leak in the applyLayout registry (ad188a7ad6c7f71c9ea94911a0299a60968cdefc by @comp615)
    • Only observe resizes for elements making use of the 'onLayout' prop which improves ResizeObserver polyfill performance (d31bdf2cf8f74a398efede27cc850e05a6655f30 by @comp615)
    • Cache the Clipboard.isAvailable() value to avoid forced style calculation in Chrome (5855e55615363f733ef8d563f7bad061af889655 by @comp615)
    • Improve the performance of the modality style helper (4b9a5fd8b478d1a87a40909fa2694d84c4db1d7f and 1b7ce4eec6b545c10b82f1802ead5a875b321565 by @giuseppeg)
    • Only call node.getBoundingClientRect if nativeEvent.location{X,Y} is accessed (40c433c6dfb98204ef74c86585940af80b42cc21 by @hushicai)
    • Improve the performance of the style resolver for registered styles (2b77bfd8536dca8ffc3086b2386c56f21926ebe8 by @sayrer)
    Source code(tar.gz)
    Source code(zip)
  • 0.9.0(Sep 17, 2018)

    This release provides compatibility with React DOM v16.5.1

    Breaking changes

    • Requires React 16.5.1 #1096. (506dba933ce69830feaace08aee85c38ce3e59fb)
    Source code(tar.gz)
    Source code(zip)
  • 0.8.0(Jun 4, 2018)

    This release provides compatibility with the vast majority of React Native v0.55.

    Breaking changes

    • Use of the responder events on a link element will now prevent the browser's default click behavior #970. (c33699595281416d67faa1d380b7dba812bd8ebe)
    • The props passed to ReactDOM are now whitelisted #898. (e0f010da477ceb14bcedaa5a22e58868331d3138)
    • A jest preset is included in the react-native-web package and should be used in place of the previous snapshot serializer. (8f0c39c2fe78ea487996d407d37e7f45415d6097)
    • StyleSheet.hairlineWidth is now always 1 due to browser rounding errors. (3f8624e25f644c305e923a6776acabc2f99e70a4)
    • Image is no longer draggable by default. (0eae7bed2e53c009294752e8ab2e5f57c463f4a6)
    • Image decoding is async when possible, no longer uses requestIdleCallback internally #764. (b8f54f61f05bd84228050d7efd0919f5ababce24)
    • Linking API updates the application document's URL and supports deep-links. (0ee3310290f7df59ed6e4910e4af1412fc17afe1)
    • Export basic stubs for platform-specific modules that may be imported (but not rendered / called) in files running on web. (cf43ffd7003431f9839d1f6489c76fc6b2284e3e)

    New features

    • Image supports blurRadius and tintColor, as well as correctly applying shadows to image pixels. (3153cd8213f393bd6e8f22a027b278b40293778e)
    • Text support for textDecoration{Color,Style} styles. (f62ed22a14f1482e81b2b7aba4d7288a4af6e21c)
    • Share support (using WebShare API.) (10407f3aa261d1b841bbe33188f70ffd9f5634bf)
    • SwipeableFlatList support. (b299eb6c5913ef972990d1a73d6c2a0d555767da)
    • SwipeableListView support. (b299eb6c5913ef972990d1a73d6c2a0d555767da)
    • SectionList support. (377f23f72547a6f211e94d9b6965ec5f97351588)
    • FlatList support. (fc0b81416a7114d995db2c192cf63a10077173c5)
    • ScrollView supports stickyHeaderIndices #434. (bb6663951920841bde6db757efd53454c4e9d772)
    • DeviceInfo basic support. (206a236df24cbb9f94548afb25ebdaad3c5010ad)
    • LayoutAnimation basic support. (cb545b0daccd9625384bb61a558ed5fab9d2a636)
    • NativeEventEmitter support. (ea744fe7809b82662e870da332b9599732b6672a)
    • Alert API stub. (19b356aaea2b936696c96fc9a4fec8ecd175bd68).
    • Animated update. (f254c8eae61f7afc35be886f2e7c3b8f31966731)
    • ListView update. (5fcb36fc217bf43b0b74b4a25708370a2a22eb1c)
    • babel-plugin-react-native-web can be configured to rewrite paths to either the CommonJS or ESModule exports #961. (026a92fd53bb8625d29357991ce973f2ba04b5d3)

    Fixes

    • Shadow style props are resolved as per React Native. (a40521f4852538030347f30d73eb837f518e2a29 and da38e87b50553156b6a70149942d59740d475e8a)
    • Clipboard preserves line breaks in original source #979. (14f7dfd515ffd46d823eaefa8072f17ab2b6169e)
    • Image implements resizeMode=center|repeat as per React Native. (9fb818cfd42fb314a3a44ab67f4312aa64041dab)
    • NativeModules includes UIManager property. (bfaca0557bf7df669744a1df8f99e0165e5bdc84)
    • UIManager measurement tasks don't block the main thread. (b4e3427fea9bd943e3b3be13def0f4ffb3df917c)
    • Image layout in Firefox. (a82cfbe5043cb3934efddefcd17c9dd17f67b361)
    • Image loading callbacks are correctly called when rendering an image assumed to be in the browser cache. (d5c6b9834007f7db9452b53bd4ff98586ee88674)
    • Image doesn't throw error when loading an empty string source #962. (16b2fb9bd777e94fff6ff83bf270f2e6e7f42912)
    • Add target property to onLayout event object. (0816c407904e430ddbd4fdc13373ed3e2f25b647)
    • TextInput allows numbers-and-punctuation keyboardType. (2756ab49c3dea19314ce9e19251719874723492b)
    • InteractionManager basic support improvements. (f684a3656e43e050588f08e4aa597efc61837b98)
    • ScrollView is scrollable when horizontal and combined with RefreshControl. (c00360491b6f0658ec8f33c2f59349794646b27a)
    • AppState doesn't throw an error for memoryWarning event. (4bc16fa3eb76048b600b0fc8a07631914d765875)
    • Vibration includes a default pattern. (22377773415f1ac96e05523304d2d386ef5ad5ee)
    • ImageBackground now works with <Text> children. (6a2252891a95f707cea5d53d6ded0b55b9dd6144)
    • processColor is now compatible with React Native. (ff5a928a5067859b289098cd6a8853b635841805)
    • All CommonJS exports in the package can be imported without adding .default to the require statement. (61bf7e76b0ed87b36deab25e7d40e09f4cd0a818)
    • Fix issues related to webpack bundling of modules mixing import and module.exports. (e3170623f194081e89d13a7f3373342b8aa0af1d)
    Source code(tar.gz)
    Source code(zip)
  • 0.7.0(May 19, 2018)

    Breaking changes

    • ES modules are now exported and the package is labelled sideEffect:false. Babel plugin is legacy. (c4864f5d178767e4542039921108c50311ce659b)
    • Fixes and potential breaking changes to the Responder system. TheResponderEventPlugin now rejects browser emulated mouse events that occur after touch events. This fixes several issues, but it's possible that you may have depended on the previously incorrect behaviour #835 #888 #932. (edc99e79eb8790d70e0f8be406d68058f13adf08)
    • Remove erroneous NetInfo.isConnected.getConnectionInfo() API. (8b1e6f816f3b2806b9fabdbaa519ea737c9b08bc)

    New features

    • Support for CSP policy requiring nonce on <style>. (ee5e80064f08e83f0cbcd95c77d3b797029a5262)
    • Mark focusable DOM nodes with 'data-focusable' for integration with TV focus libraries #827. (e8f2c987864562bda11bec6611db98b7239688d6)

    Fixes

    • Fix onLayout without ResizeObserver #911 #941. (dcdf1468f9f354ef83793bfdfcd1d212a17d430d)
    • Fix findNodeHandle import in VirtualizedList. (02b6f3ff3cd8c77191f85943ee6851527fa989f9)
    • Flex styles can be applied as inline styles #798. (1e8577fc9e21905f0a8eef498495cd003a754749)
    • Remove browser UI from numeric TextInput in Firefox #900. (96c3f09fac4a3288e78352a878ab20ac71acf55e)
    Source code(tar.gz)
    Source code(zip)
  • 0.6.0(Apr 15, 2018)

    Improvements to layout when ResizeObserver is available, and improved consistency with React Native behaviors.

    Breaking changes

    • AppRegistry container is no longer absolutely positioned. (a9cacb2ef5b88d815a0a87838e3da7a063c5a647)
    • The onLayout prop is now called when elements resize (if ResizeObserver is supported in the rendering environment). (5a04d07a35fe0a7d8db9f0ddc3efe27f06c6e682)
    • Layout measurements are now performed synchronously in the current frame. (a67bf0f490d92cd53711d55590b7d3119369f960)
    • react-art must now be installed as peer dependency. (ce89b7e3ec495c45e2c94065d8eb6b048abc27cd)

    New features

    • AppRegistry now allows you to define a render callback (web-only feature). (7a3a9a5c3ffdbf096150cc940ef542d96af0589e)
    • AppRegistry includes provider methods from React Native: setComponentProviderInstrumentationHook and setWrapperComponentProvider. (b96dd668d36dba2649f17b90828e98c3078d5094)
    • Experiment support for VirtualizedList from React Native. (9427eea29363ebe9ed180d384e0cdd1ebd97fe64)

    Fixes

    • Text press event no longer propagates. (1a225bc449f288526533752abe63e4de4ad48c29)
    • createElement no longer overrides a provided function component. (cf2612663b7ff5a5b5ccc12f59c12c2eb6cc17da)
    • Fix the consistency of nativeEvent.location{X,Y} values between touch and mouse events. (2050730b776c6225f3ab62dd893947df770d4298)
    • SafeAreaView now includes inset padding for Safari iOS. (4c59343fd30b980dddbf784ac816256f2f9bd69d)
    • Picker.Item supports the color prop but whether it is applied depends on browser support. (1aec803086bb9b5fc56831f7b31bb9fad45f581f)
    • Fix the reliability of font styles resolution. (23fa663a6e6b69c76cb6499d0a8656ff938cca02)
    Source code(tar.gz)
    Source code(zip)
  • 0.5.0(Feb 20, 2018)

    New features for styling LTR/RTL applications. Improvements to mouse support in the Responder Event system. Relicensed under the MIT license to match the relicensing of React Native.

    Breaking changes

    • Potentially breaking change for web-only apps depending on bugs in the Responder Event System that have been fixed in this release. The ResponderEventPlugin no longer extracts any mouse{move,up} events unless a press is active, and no longer extracts any events triggered by the middle/wheel/right button. (9ee89bc7f7e0548a930d37087caa63636d490fa2)

    New features

    • StyleSheet supports new style properties and values that automatically account for the writing direction (as introduced in React Native 0.51.0), e.g., margin{End,Start} and textAlign: "end" | "start". (b75477637385e46037014cbec5b364f085821c3b)
    • I18nManager supports doLeftAndRightSwapInRTL and swapLeftAndRightInRTL(swap: boolean) to query and control the BiDi-flipping of left/right properties and values. For example, you may choose to use end to position elements relative to the writing direction, and then disable left/right swapping in RTL so that left will always be left. (92794cdc9f967f84ba6108568a6d60f17640a14a)
    • TextInput now includes arrow keys in onKeyPress #791. (73b459e770d40831d044cebb34f15cd4e22e66f3)

    Fixes

    • Account for scroll offsets in measure and measureInWindow instance methods https://github.com/necolas/react-native-web/issues/702. (399f465e591ae56d3426f6d12eab44c791a1c4d6)
    • Touchable press events are not triggered on right-click https://github.com/necolas/react-native-web/issues/719. (9ee89bc7f7e0548a930d37087caa63636d490fa2)
    • PanResponder only fires mouse{move,up} events when a press is active https://github.com/necolas/react-native-web/issues/701. (9ee89bc7f7e0548a930d37087caa63636d490fa2)
    • onResponderGrant is not fired twice on touch devices #802. (893963a79932a4faa79432690858f3504e3c2ba1)
    • Image support for base64 SVG data. (31db333ba307ad71995218eeddf05d3d3932c762)
    • Image updates to source are correctly rendered if the initial source value was undefined https://github.com/necolas/react-native-web/pull/811. (748b2d0f3fc49ff66c18b6e7d463840a92245892)
    • TextInput has correct default font styles. (b28cbbb37ece3476a40370d359e982b4ba563bbb)
    • Text supports fontVariant style #824. (6d908189a7da91626aa8932f819ba9b37c8eec19)
    • StyleSheet accepts space-evenly value for justifyContent. (7265736545b58e7f6c04639c7abd189bff9640c9)
    • Style flex properties can be set with setNativeProps. (00c9dc42364af97318feca03c96e68704b7df23b)
    • New development warning for bad style values that include !important. (9fe089ca21064dc8a7c7216bb57ee31aad6d9caa)
    • babel-plugin-react-native-web only rewrites import paths for known exports #822. (a53372ceb3a5ce9707e7a8a60139434025df5722)
    Source code(tar.gz)
    Source code(zip)
  • 0.4.0(Feb 7, 2018)

    New StyleSheet features and SSR improvements

    Breaking changes

    • StyleSheet.create() no longer eagerly resolves and injects styles at boot-time. (2ad710d83a6d05a4b10bdcfc0b464dd619002cb2)
    • Server-side rendering no longer accumulates styles across requests. (240cf7e05f05a622621d0ee5f58380a35d28ab44)
    • The return type of AppRegistry.getApplication() has changed. (240cf7e05f05a622621d0ee5f58380a35d28ab44)
    • StyleSheet.getStyleSheets() has been removed; use AppRegistry.getApplication().

    New features

    • Add support for TextInput prop placeholderTextColor. (31d428a649ecf268628d6f6622a99f51e7344b1b)
    • Add support for defining CSS keyframes in animationName style. (998e275e65fc61eabecd8543da9c5e959245e3c7)

    Fixes

    • Fix Babel plugin rewrites in modules using require to load react-native. (21b3f39c0b5a4a19b1fab5c6a6c6f70403f8c0b6)
    • Remove UA controls from numeric text inputs in Firefox. (69d53732226abd989b72646a6da6cb7b3afd8ffe)
    Source code(tar.gz)
    Source code(zip)
  • 0.3.0(Jan 9, 2018)

    React Native for Web is now structured as a monorepo (3026465ae39b1708fb1f5f48212a81eb3ec65180). An additional benchmark introduced by the emotion project has been included; it stress-tests style updates to mounted trees.

    Breaking changes

    • The Babel plugin must now be installed separately: babel-plugin-react-native-web. Depending on react-native-web/babel will no longer work.
    • The package's internal paths have changed; if you were reaching into react-native-web/dist those modules have moved.

    Fixes

    • Fix babel rewrite for import/export/require react-native-web. (209bd3aee1e6ed115b9c0c5b3afe2f7cefccba9f)
    • Fix babel rewrite when importing CheckBox. (87fdd6c73bf7365fd8f22acb619b71373a6deea7).
    • Fix RTL flipping of styles set via setNativeProps. (85aaa39206aedd90b6c2a282132b0b73fa553022)
    • Prevent ReactDOM hydration warnings in development. (41d90e0238a808fca9536e1d123e0ce982fa9ca6)
    • Fix React warnings when using the hitSlop prop. (af47d5f414ed2155180acbda4dff30ccbc5ac103)
    • Fix AppRegistry.unmountApplicationComponentAtRootTag. (6f10f6be9c3896a2124c17e9ccd0f8eafb9b99f4)
    • Fix StyleSheet.hairlineWidth error when document.body is missing in the client. (6d9154196e510219d5b39e5d2bebca7021d50b89)
    • Fix development warnings for more native-only props. (fd6ccbcfb3d785c9c3aff5421d2b9da4f4cde4d6)
    • Apply "monospace" font-family hack when needed. (b6ef1d3a362c4ea6547c1670e771941a243e8c16)
    Source code(tar.gz)
    Source code(zip)
  • 0.2.0(Dec 20, 2017)

    Breaking changes

    • The Image component no longer accepts child content. Use ImageBackground as a replacement. (541d2458fb9d6e2cd0522dd3d7ae8a1ff4d65d70)

    New features

    • Add ImageBackground component. (e8eab9b3eca65d2a480455c6507830ac3a46261b)
    • Add Picker and Picker.Item components. (b7e970f4e6b48ee2c063d01914df1df4556c7d94)
    • Add CheckBox component. (6de892c92bad455960314c54fca632518f75a418)
    • Add ART components. (321051b72366666ba6e28985cff017cb6d3c506d)
    • Add SafeAreaView shim for compatibility with React Native. (034108a2a07e73e2de95824cb91f65275e3e3c85)
    • Add StyleSheet.compose. (1a20fcfce6b802041e93de9274dbf136976c7286)
    • Sync the Animated implementation with React Native to pick up new additions to the API. (0dfe319d412bd48c7861db0db8a83439e5b0a974).
    • Sync the PanResponder implementation with React Native. (f96d7b868f6ba3d2dc9df0bb5d49618878483374)

    Fixes

    • Use ReactDOM.hydrate in AppRegistry.runApplication to allow clients to boot using HTML from server-rendered apps (82c044ee3379a655ea28bb61f6e239709345cad8).
    • Fix AppRegistry.getApplication style element key warning for server-side rendering. (f1ce6c2acbdec24dcb73a9b84497592b34f7e1ca)
    • Fix imports of render and unmountComponentAtNode when using the Babel plugin. (9bcc67e73a5a83f1551c47598be7bf65c3a812e1)
    • Fix error when testing Touchables using react-test-renderer. (5f68542529ad26dbf0f220e42695a6d8a4d72384)
    • Fix animated scrolling in ScrollView. (556dc8926eabe07b3bd20a29f679802ae0a12ab0)
    • Fix the value of StyleSheet.hairlineWidth on retina screens. (495defd69b0e47460c043d79d5b2bd48e3671681)
    Source code(tar.gz)
    Source code(zip)
  • 0.1.0(Sep 26, 2017)

  • 0.0.62(Jan 3, 2017)

    • StyleSheet now resolves React Native styles to class names and caches results (13x faster than 0.0.61)[https://github.com/necolas/react-native-web/commit/d87f71ebc11d4ac986ec39a039ec4f7c96916e7d]
    • ActivityIndicator and ProgressBar now use CSS animations instead of Animated. [https://github.com/necolas/react-native-web/commit/cfc56a1354960260d6e7d40e401e7b1ba43e3a7e, https://github.com/necolas/react-native-web/commit/ea75cced133358eccda1dd83292784e554afc28c]
    • CSS animation properties are supported; there is no public API for creating CSS keyframes in JS.
    Source code(tar.gz)
    Source code(zip)
  • 0.0.15(Feb 19, 2016)

    New Components:

    • ActivityIndicator
    • Portal
    • StaticContainer
    • StaticRenderer

    New APIs:

    • AppRegistry
    • AppState
    • AsyncStorage
    • Dimensions
    • NativeMethods
    • NetInfo
    • PixelRatio
    • Platform
    • UIManager

    Bug fixes:

    • StyleSheet supports array of styles
    • Export various Touchable components

    Retain upstream BSD license

    Source code(tar.gz)
    Source code(zip)
Owner
Nicolas Gallagher
Working on @reactjs for the web
Nicolas Gallagher
A UI library for react native, provides 20+ pure JS(ES6) components, focusing on content display and action control.

Teaset ???? 中文完整文档版 A UI library for react native, provides 20+ pure JS(ES6) components, focusing on content display and action control. Installation

null 2.9k Sep 19, 2022
react-native stateless functional UI components to get you up and running quickly

panza Panza is a collection of ui-components for react-native modelled after iOS. This library is currently undergoing a rewrite and will be updated s

null 259 Sep 3, 2022
Highly customizable and theming components for React Native

@blankapp/ui English | 简体中文 Table of Contents Introduction Features Quick Start Prerequisites Installation Run the new app Discussion License Created

Blankapp 107 Sep 3, 2022
Customizable set of components for React Native applications

Shoutem UI Shoutem UI is a set of styleable components that enables you to build beautiful React Native applications for iOS and Android. All of our c

Shoutem 4.8k Sep 28, 2022
UI & API Components Library for React Native

React Native Common Cross Platform React Native UI Toolkit & API Get Started Installation $ yarn add react-native-common or $ npm install react-native

Reza Ghorbani 63 Feb 14, 2022
An "awesome" type curated list of how to use React Native and Meteor together

Awesome React Native Meteor An "awesome" type curated list of how to use React Native and Meteor together. Based on Awesome React Native which was bas

Meteor Factory 154 Feb 14, 2022
Component library for React Native

first-born Getting Started These instructions will get you a copy of the project up and running on your local machine for development and testing purp

99x 273 Aug 4, 2022
An utility style framework for React Native

An utility React Native style framework for rapidly building custom user interfaces. Documentation For full documentation, please check https://osmics

OsmiCSX 178 Sep 22, 2022
A framework to test a React Native app during runtime

react-native-diagnose A react runtime diagnose component Rationale Testing native applications is complicated There are features that can only be test

Netbeast 24 Feb 14, 2022
Cross-Platform React Native UI Toolkit

Cross Platform React Native UI Toolkit Get Started Installation Follow these instructions to install React Native Elements! Usage Start using the comp

React Native Elements 22.8k Sep 24, 2022
A framework for building native Windows apps with React.

React Native for Windows Build native Windows apps with React. See the official React Native website for an introduction to React Native. React Native

Microsoft 15k Sep 21, 2022
iOS Today Widget in React Native

React Native Today Widget Experimental library investigating limits of implementation iOS App Extensions using React Native. Sample result from Comple

Matěj Kříž 365 Sep 12, 2022
🤖 React Native Android widgets bridged to JS, a proof of concept

React Native Android Widget Proof Of Concept ?? Using React Native and having Android widgets is possible. Create buttons in Java / Android XML to tri

Netbeast 201 Aug 9, 2022
A simple Facebook Chat Head like bubble for react native

react-native-floating-bubble A simple Facebook Chat Head like bubble for react native. Special thanks to bubble-for-android because this is just react

null 147 Sep 12, 2022
React-Native library for the WidgetKit framework. Integrate a Widget into your App 🍏📱

react-native-widgetkit React-Native Library for the iOS ?? WidgetKit framework Table of Contents ?? Introduction ??‍?? Installation ??‍ Usage ????‍??

Fasky 110 Sep 20, 2022
⚡️The Fullstack React Framework — built on Next.js — Inspired by Ruby on Rails

⚡️The Fullstack React Framework — built on Next.js — Inspired by Ruby on Rails

⚡️Blitz 9.4k Oct 12, 2021
React Native Components and APIs for the Web

React Native for Web "React Native for Web" makes it possible to run React Native components and APIs on the web using React DOM. Documentation The do

Nicolas Gallagher 20.3k Sep 28, 2022
React Native APIs turned into React Hooks for use in functional React components

React Native Hooks React Native APIs turned into React Hooks allowing you to access asynchronous APIs directly in your functional components. Note: Yo

React Native Community 2.9k Sep 22, 2022
A weather app that was built using weather APIs and is a PWA web app

This is a weather app that was built using weather APIs and is a PWA web app.

Milan Sachani 6 Aug 12, 2022
A monorepo boilerplate for react web and react native. Uses react-native-web to reduce time invested in making the same components for mobile and web

Monorepo template Get Started Run the following command to install all the dependencies in the right location yarn lerna bootstrap yarn workspace @mar

Amaan Kulshreshtha 4 Jan 9, 2022