profile
viewpoint
Nicolas Gallagher necolas Facebook San Francisco, CA http://nicolasgallagher.com Working on @reactjs for the web

necolas/css3-github-buttons 1126

Helps you easily create GitHub-style buttons and toolbars using links, buttons, and inputs.

necolas/dotfiles 722

OS X dotfiles: bash, git, vim, etc.

necolas/css3-facebook-buttons 579

Simple CSS to recreate the appearance of Facebook's buttons and toolbars.

necolas/css3-social-signin-buttons 472

CSS3 Social Sign-in Buttons with icons. Small and large sizes.

globalizejs/react-globalize 105

Bringing the i18n functionality of Globalize, backed by CLDR, to React

necolas/emitter.js 85

A simple JavaScript event-emitter

necolas/chrome-tab-limit 53

Chrome browser extension that limits you to 20 open tabs

necolas/delegate.js 44

DOM event delegation component

necolas/custom-tweet-button-for-wordpress 38

A fully customisable HTML and CSS Tweet Button for Wordpress. Built using PHP; no JavaScript requirement. Uses the bit.ly and Twitter APIs.

necolas/dom-shims 32

Complete and well-tested shims / polyfills for various DOM API's missing in not-so-modern browsers

issue closednecolas/react-native-web

[Q] Why TabBarIOS deprecated ?

TabBar IOS https://reactnative.dev/docs/tabbarios-item still exist on React Native documentation. And please inform what alternative package for TabBar IOS ?

Package : RNW 0.13.1

closed time in 4 days

fortezhuo

issue commentnecolas/react-native-web

[Q] Why TabBarIOS deprecated ?

It was removed a long time ago and only ever worked for the iOS platform. https://github.com/facebook/react-native/commit/02697291ff41ddfac5b85d886e9cafa0261c8b98

fortezhuo

comment created time in 4 days

push eventnecolas/react-native-web

dependabot[bot]

commit sha 99e6d7137f63486fec3118d529b95bfbb0f1a887

Bump websocket-extensions from 0.1.3 to 0.1.4 Bumps [websocket-extensions](https://github.com/faye/websocket-extensions-node) from 0.1.3 to 0.1.4. - [Release notes](https://github.com/faye/websocket-extensions-node/releases) - [Changelog](https://github.com/faye/websocket-extensions-node/blob/master/CHANGELOG.md) - [Commits](https://github.com/faye/websocket-extensions-node/compare/0.1.3...0.1.4) Signed-off-by: dependabot[bot] <support@github.com>

view details

push time in 5 days

PR merged necolas/react-native-web

Bump websocket-extensions from 0.1.3 to 0.1.4 dependencies

Bumps websocket-extensions from 0.1.3 to 0.1.4. <details> <summary>Changelog</summary> <p><em>Sourced from <a href="https://github.com/faye/websocket-extensions-node/blob/master/CHANGELOG.md">websocket-extensions's changelog</a>.</em></p> <blockquote> <h3>0.1.4 / 2020-06-02</h3> <ul> <li>Remove a ReDoS vulnerability in the header parser (CVE-2020-7662, reported by Robert McLaughlin)</li> <li>Change license from MIT to Apache 2.0</li> </ul> </blockquote> </details> <details> <summary>Commits</summary> <ul> <li><a href="https://github.com/faye/websocket-extensions-node/commit/8efd0cd6e35faf9bb9cb08759be1e27082177d43"><code>8efd0cd</code></a> Bump version to 0.1.4</li> <li><a href="https://github.com/faye/websocket-extensions-node/commit/3dad4ad44a8c5f74d4f8f4efd3f9d6e0b5df3051"><code>3dad4ad</code></a> Remove ReDoS vulnerability in the Sec-WebSocket-Extensions header parser</li> <li><a href="https://github.com/faye/websocket-extensions-node/commit/4a76c75efb1c5d6a2f60550e9501757458d19533"><code>4a76c75</code></a> Add Node versions 13 and 14 on Travis</li> <li><a href="https://github.com/faye/websocket-extensions-node/commit/44a677a9c0631daed0b0f4a4b68c095b624183b8"><code>44a677a</code></a> Formatting change: {...} should have spaces inside the braces</li> <li><a href="https://github.com/faye/websocket-extensions-node/commit/f6c50aba0c20ff45b0f87cea33babec1217ec3f5"><code>f6c50ab</code></a> Let npm reformat package.json</li> <li><a href="https://github.com/faye/websocket-extensions-node/commit/2d211f3705d52d9efb4f01daf5a253adf828592e"><code>2d211f3</code></a> Change markdown formatting of docs.</li> <li><a href="https://github.com/faye/websocket-extensions-node/commit/0b620834cc1e1f2eace1d55ab17f71d90d88271d"><code>0b62083</code></a> Update Travis target versions.</li> <li><a href="https://github.com/faye/websocket-extensions-node/commit/729a4653073fa8dd020561113513bfa2e2119415"><code>729a465</code></a> Switch license to Apache 2.0.</li> <li>See full diff in <a href="https://github.com/faye/websocket-extensions-node/compare/0.1.3...0.1.4">compare view</a></li> </ul> </details> <br />

Dependabot compatibility score

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


<details> <summary>Dependabot commands and options</summary> <br />

You can trigger Dependabot actions by commenting on this PR:

  • @dependabot rebase will rebase this PR
  • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
  • @dependabot merge will merge this PR after your CI passes on it
  • @dependabot squash and merge will squash and merge this PR after your CI passes on it
  • @dependabot cancel merge will cancel a previously requested merge and block automerging
  • @dependabot reopen will reopen this PR if it is closed
  • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
  • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
  • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
  • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
  • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
  • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
  • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
  • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

</details>

+3 -2

0 comment

1 changed file

dependabot[bot]

pr closed time in 5 days

issue closednecolas/react-native-web

better mouse support for Touchable

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

Currently when using a mouse with Touchable components there are some behaviors that are undesirable. For example when the mouse presses down in an element and moves outside the element bounds the active state stays and the press event will still fire when the cursor is within the PressRect area. While this is what is probably wanted with a touch interaction it isn't standard with a mouse interaction.

Note I know this code is currently being refactored, so maybe this has been considered.

Describe a solution you'd like

I think ideally Touchable should be able to determine if the press is via a mouse or touch. When the press is via a mouse the strict bounds of the element are respected for hover, active and when it comes to firing the event. If the press is via a touch then things like hitslop or pressRectOffset can come into play.

Describe alternatives you've considered

I've considered not using Touchable at all on web, but as the lines here get more and more blurred (iOS supporting mice, windows supporting touch) there are positives to attempting handle both paradigms.

closed time in 6 days

chrisdrackett

issue commentnecolas/react-native-web

better mouse support for Touchable

See 0.13

chrisdrackett

comment created time in 6 days

issue closednecolas/react-native-web

Horizontal Scrolling by touch actions isn't working on Safari

The problem I'm using a ScrollView / FlatList to render some items horizontal. On the Safari, there is the problem that I can't scroll to right or left based on my (mouse) touch actions. In the Chrome Browser this works. I also set touchAction: "pan-x" to the styles of my ScrollView/FlatList but it doesn't have any effect. When I set touchActions to none, this has an effect to Chrome (scrolling disabled)

Steps to reproduce:

  1. Create a Scrollview with horizontal prop
  2. Place some more items with (<View style={{width: 150, height: 150, backgroundColor: 'blue'}/> in a row (view>
  3. run on safari - scrolling by touch input isn't working

Expected behavior Scrolling Horizontal like on the smartphones.

Environment

  • React Native for Web (version): "^0.11.7" (Expo)
  • React (version): 16.9.0
  • Browser: Safari Version 13.1 (15609.1.20.111.8)

For UX purpose I would solve it when showing scroll indicators are always showing. But that's not the case either on the web. Scrolling Indicators are only showing up, when starting scrolling. Users could scrolled based on the indicator in the web.

closed time in 6 days

mafiusu

issue commentnecolas/react-native-web

Horizontal Scrolling by touch actions isn't working on Safari

Update to 0.13. If the issue still exists I will reopen

mafiusu

comment created time in 6 days

push eventnecolas/react-native-web

Nicolas Gallagher

commit sha 2e8eccaed5956847c1e29967b4326fd0907c5cca

Deploy documentation

view details

push time in 7 days

push eventnecolas/react-native-web

Nicolas Gallagher

commit sha 68ea540c3991ab346b4683831180ffb0c5f3d7bd

Benchmarks deploy

view details

push time in 7 days

push eventnecolas/react-native-web

Nicolas Gallagher

commit sha 8c391604ba29a4acec6f2de8c2de2e4ce14774d9

0.13.1

view details

push time in 7 days

created tagnecolas/react-native-web

tag0.13.1

React Native for Web

created time in 7 days

PR merged necolas/react-native-web

[fix] setNativeProps and pointerEvent prop

The pointerEvent prop is converted into a DOM style property and needs to be accounted for by setNativeProps.

Close #1656 Fix #1655

+19 -17

1 comment

5 changed files

necolas

pr closed time in 7 days

issue closednecolas/react-native-web

pointerEvents and Animated conflict each other

<!-- Thank you for reporting an issue. Please note that an issue must include the information that is marked as REQUIRED below, or it may be closed. -->

The problem <!-- REQUIRED: A clear and concise description of the bug or problem. -->

It is not possible to use pointerEvents prop of Animated.View.

How to reproduce <!-- REQUIRED: Create a test case by forking this template https://codesandbox.io/s/6lx6ql1w5r

Failing to include a reduced test case may result in the issue being closed, and will delay any potential fix. Your application or GitHub project is NOT considered a reduced test case. If the issue only affects certain browsers, providing screenshots is also helpful. --> Simplified test case: https://codesandbox.io/s/icy-waterfall-tfnc2?file=/src/App.js

Steps to reproduce:

  1. Try to press the button

Expected behavior <!-- REQUIRED: A clear and concise description of what you expected to happen.

Please check that the behaviour is not expected React Native behaviour by running your test case on iOS or Android using https://snack.expo.io. -->

The button should be pressable because the pointerEvents of the overlay above are set to none.

Environment (include versions). Did this work in previous versions?

  • React Native for Web (version): 0.13.0 (it worked with 0.12.3)
  • React (version): 16.3.1
  • Browser: Chrome 83

<!-- OPTIONAL:

Additional context Add any other context about the problem here. -->

closed time in 7 days

jaulz

PR closed necolas/react-native-web

Reuse pointerEvents in setNativeProps

pointerEvents styles are currently lost whenever you use setNativeProps. This PR makes sure that pointerEvents styles are kept.

This PR fixes https://github.com/necolas/react-native-web/issues/1655

+11 -7

0 comment

3 changed files

jaulz

pr closed time in 7 days

push eventnecolas/react-native-web

Nicolas Gallagher

commit sha 7ef070195bbdec4d776d1fae8f98914fe2574d58

[fix] setNativeProps and pointerEvent prop The pointerEvent prop is converted into a DOM style property and needs to be accounted for by setNativeProps. Close #1656 Fix #1655

view details

push time in 7 days

issue closednecolas/react-native-web

pointerEvents and Animated conflict each other

<!-- Thank you for reporting an issue. Please note that an issue must include the information that is marked as REQUIRED below, or it may be closed. -->

The problem <!-- REQUIRED: A clear and concise description of the bug or problem. -->

It is not possible to use pointerEvents prop of Animated.View.

How to reproduce <!-- REQUIRED: Create a test case by forking this template https://codesandbox.io/s/6lx6ql1w5r

Failing to include a reduced test case may result in the issue being closed, and will delay any potential fix. Your application or GitHub project is NOT considered a reduced test case. If the issue only affects certain browsers, providing screenshots is also helpful. --> Simplified test case: https://codesandbox.io/s/icy-waterfall-tfnc2?file=/src/App.js

Steps to reproduce:

  1. Try to press the button

Expected behavior <!-- REQUIRED: A clear and concise description of what you expected to happen.

Please check that the behaviour is not expected React Native behaviour by running your test case on iOS or Android using https://snack.expo.io. -->

The button should be pressable because the pointerEvents of the overlay above are set to none.

Environment (include versions). Did this work in previous versions?

  • React Native for Web (version): 0.13.0 (it worked with 0.12.3)
  • React (version): 16.3.1
  • Browser: Chrome 83

<!-- OPTIONAL:

Additional context Add any other context about the problem here. -->

closed time in 7 days

jaulz

PR closed necolas/react-native-web

Reuse pointerEvents in setNativeProps

pointerEvents styles are currently lost whenever you use setNativeProps. This PR makes sure that pointerEvents styles are kept.

This PR fixes https://github.com/necolas/react-native-web/issues/1655

+11 -7

0 comment

3 changed files

jaulz

pr closed time in 7 days

pull request commentnecolas/react-native-web

[fix] setNativeProps and pointerEvent prop

@jaulz try this PR instead

necolas

comment created time in 7 days

PR opened necolas/react-native-web

[fix] setNativeProps and pointerEvent prop

The pointerEvent prop is converted into a DOM style property and needs to be accounted for by setNativeProps.

Close #1656 Fix #1655

+19 -17

0 comment

5 changed files

pr created time in 7 days

issue closednecolas/react-native-web

Jest preset is broken in 0.13 release

<!-- Thank you for reporting an issue. Please note that an issue must include the information that is marked as REQUIRED below, or it may be closed. -->

The problem

The preset is referring to a file that does not exist in the built package:

  ● Test suite failed to run

    Cannot find module '../dist/modules/StyleSheet/ReactNativePropRegistry' from 'setup.js'

      at Resolver.resolveModule (node_modules/jest-runtime/node_modules/jest-resolve/build/index.js:299:11)
      at Object.<anonymous> (node_modules/react-native-web/jest/setup.js:3:15)

How to reproduce

Simplified test case: https://github.com/d4rky-pl/rnw-jest-preset-bug (it's ejected create-react-app, the only change from the pristine state is added react-native-web package and preset)

Steps to reproduce:

  1. Add react-native-web to the application and use react-native-web preset (either directly or via jest-expo/web)
  2. Run the specs

Expected behavior

Tests are running properly

Environment (include versions). Did this work in previous versions?

  • React Native Web 0.13.0

The issue is not present in 0.12.3

closed time in 7 days

d4rky-pl

push eventnecolas/react-native-web

Nicolas Gallagher

commit sha 728e20ff1fa24b0976dccfa65a3547043a72882f

[fix] jest preset Fix #1654

view details

push time in 7 days

issue commentreact-native-community/discussions-and-proposals

Platform specific styles inside StyleSheet

The way I understand StyleSheet is an API only for defining style objects. It doesn't concern itself with any aspect of the state or environment of the application (layout, theme, platform, network, etc). All that can be built over StyleSheet.

A basic way to work with the current theme (OP request) could be done like this: https://gist.github.com/necolas/5b421ca860ed98eabc5fd2b9bc6d1136

Or you can go wild like this: https://github.com/vitalets/react-native-extended-stylesheet

svbutko

comment created time in 8 days

issue commentreact-native-community/discussions-and-proposals

Platform specific styles inside StyleSheet

Can you change the underlying values at runtime?

svbutko

comment created time in 9 days

issue closednecolas/react-native-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.

closed time in 10 days

necolas

issue commentnecolas/react-native-web

The future of React Native for Web

Closing as 0.13 is released

necolas

comment created time in 10 days

push eventnecolas/react-native-web

Nicolas Gallagher

commit sha 9de929350e97b8d9c5f883a98015b296fe8dfa9a

Deploy documentation

view details

push time in 10 days

release necolas/react-native-web

0.13.0

released time in 10 days

push eventnecolas/react-native-web

Nicolas Gallagher

commit sha 909011ebf39a081bc4b85b534cfa16858e50ff47

Benchmarks deploy

view details

push time in 10 days

push eventnecolas/react-native-web

Nicolas Gallagher

commit sha 824cca1972e61f9c65e19f23036eb093296bbdfa

0.13.0

view details

push time in 10 days

created tagnecolas/react-native-web

tag0.13.0

React Native for Web

created time in 10 days

issue closednecolas/react-native-web

Roadmap for 0.62

RN 0.62 recently cames out. I didn't find any release issue nor a milestone that might fit so here are a list of things to handle. I might have forgotten some, I quickly review RN 0.62 changelog

  • [x] ref of an Animated component is now the internal component and deprecated getNode
  • [ ] Add isReduceMotionEnabled() plus reduceMotionChanged to AccessibilityInfo https://github.com/facebook/react-native/commit/0090ab32c2aeffed76ff58931930fe40a45e6ebc
  • [x] new Appearance module (with getColorScheme) & useColorScheme hook
  • [x] missing props on Touchables (need to be detailed)
  • [x] AccessibilityInfo.fetch deprecated
  • [x] Add getNativeScrollRef method to FlatList component
  • [x] ScrollView scrollWithoutAnimationTo removed
  • [x] TextInput onTextInput removed
  • [x] TextInput inputView removed
  • [x] TextInput selectionState removed
  • [x] TextInput ref change https://github.com/facebook/react-native/commit/bbc5c35a61cd3af47ccb2dc62430e4b6a4d4e08f
  • [x] ref on most primitives is now the host component with other methods attached (stop-gap until something like ReactNative.measure(hostRef) lands)
  • [x] accessibilityValue prop
  • [x] Remove PropTypes
  • [x] Remove accessibilityStates
  • [x] Animated useNativeDriver is now required.
  • [x] TimePickerAndroid removed
  • [x] Platform.select now supports native as an option
  • [x] Add HostComponent to the public API of React Native

BTW @necolas what do you think about having a version number that is more expressive about the version that is supported (= match 0.x, RNW 0.62 would means that it in sync with RN 0.62 API ) ?

closed time in 10 days

MoOx

issue closednecolas/react-native-web

[TouchableOpacity] [0.12.X, canary] changing disabled prop crashes in test environments

The problem Hi there! Thanks so much for all the hard work in maintaining this library. I'm trying to upgrade RNW to 0.12.2 (or beyond), and am facing an issue specific to TouchableOpacitys in Jest tests. Basically, in a test, if a Touchable's disabled property is changed, the subsequent render blows up when trying to apply the relevant styles:

TypeError: Cannot convert undefined or null to object
        at slice (<anonymous>)
        at getDOMStyleInfo (/Users/viggy/GitHub/firstopinion/javascript/node_modules/react-native-web/dist/exports/StyleSheet/createStyleResolver.js:380:41)
        at Object.resolveWithNode (/Users/viggy/GitHub/firstopinion/javascript/node_modules/react-native-web/dist/exports/StyleSheet/createStyleResolver.js:196:28)
        at styleResolver (/Users/viggy/GitHub/firstopinion/javascript/node_modules/react-native-web/dist/modules/NativeMethodsMixin/index.js:80:30)
        at createDOMProps (/Users/viggy/GitHub/firstopinion/javascript/node_modules/react-native-web/dist/modules/createDOMProps/index.js:165:24)
        at Object.setNativeProps (/Users/viggy/GitHub/firstopinion/javascript/node_modules/react-native-web/dist/modules/NativeMethodsMixin/index.js:79:22)
        at Object.setOpacityTo (/Users/viggy/GitHub/firstopinion/javascript/node_modules/react-native-web/dist/exports/TouchableOpacity/index.js:153:10)
        at Object._opacityInactive (/Users/viggy/GitHub/firstopinion/javascript/node_modules/react-native-web/dist/exports/TouchableOpacity/index.js:216:10)
        at Object.TouchableOpacity_componentDidUpdate [as componentDidUpdate] (/Users/viggy/GitHub/firstopinion/javascript/node_modules/react-native-web/dist/exports/TouchableOpacity/index.js:145:12)

I dug into the stacktrace, and I think I have identified a potential culprit. In NativeMethodsMixin.js, there is a setNativeProps function which calls findNodeHandle(this). The result of that call (in tests) appears to be a ref, and thus doesn't have a classList property when node.classList is used by getDOMStyleInfo:

 <ref *1> {
      type: 'div',
      ...,
      tag: 'INSTANCE'
    }

To be clear, everything is A-ok outside of tests (in the browser, everything is fine, and node is an actual node). Happy to hop in and try to fix and file a PR - but could use some guidance as to what the actual issue is!

How to reproduce Simplified test case: https://codesandbox.io/s/nameless-water-o6qzg?file=/src/App.test.js

Steps to reproduce:

  1. Open CodeSandbox
  2. Navigate to "run tests" tab, hit run
  3. Receive TypeError: Cannot convert undefined or null to object.

Expected behavior No TypeError.

Environment (include versions). Did this work in previous versions? Yep! This test works against 0.11.7 (tested in CodeSandbox), but not on 0.12.X or the canary builds 0.0.0.X.

  • React Native for Web (version): 0.12.2 and above
  • React (version): 16.13.X
  • Browser: Chrome

closed time in 10 days

viggyfresh

PR closed necolas/react-native-web

Pass `disabled` props in TouchableWithoutFeedback

Recently upgraded to v0.12 and I notice disabled prop is no longer used in TouchableWithoutFeedback but it's used in TouchableOpacity. I think it should be added in TouchableWithoutFeedback as well. Let me know if I missed anything

+1 -0

2 comments

1 changed file

pveyes

pr closed time in 10 days

pull request commentnecolas/react-native-web

Pass `disabled` props in TouchableWithoutFeedback

This is now fixed in master

pveyes

comment created time in 10 days

PR closed necolas/react-native-web

[next] Fix host node measureLayout

The method on UIManager actually has the order of callbacks inverted compared to measureLayout.

This fixes measuring in VirtualizedList and maybe other things.

+862 -930

1 comment

49 changed files

janicduplessis

pr closed time in 10 days

pull request commentnecolas/react-native-web

[next] Fix host node measureLayout

Thanks. This was fixed

janicduplessis

comment created time in 10 days

issue closednecolas/react-native-web

TouchHistory‘s processing logic caused the Crash in Safari

<!-- Thank you for reporting an issue. Please note that an issue must include the information that is marked as REQUIRED below, or it may be closed. --> The problem <!-- REQUIRED: A clear and concise description of the bug or problem. --> In "react-native-web/dist/hooks/useResponderEvents/ResponderTouchHistoryStore.js" , use touchBank tracks the position. But touchBank's type is Array and touch identifier’s not a number between 0 and 20, It can be very big sometimes,examples: 863683572. It can cause Crash in Safari.

How to reproduce <!-- REQUIRED: Create a test case by forking this template https://codesandbox.io/s/6lx6ql1w5r

Failing to include a reduced test case may result in the issue being closed, and will delay any potential fix. Your application or GitHub project is NOT considered a reduced test case. If the issue only affects certain browsers, providing screenshots is also helpful. --> Simplified test case: <!-- add link here --> Examples Code:

var arr =[]; arr[863683572]=109; console.log(arr.length);console.log(arr);

You can run it multiple times in Safari to reproduce this problem. image

Expected behavior <!-- REQUIRED: A clear and concise description of what you expected to happen.

Please check that the behaviour is not expected React Native behaviour by running your test case on iOS or Android using https://snack.expo.io. --> I think you can change touchBank's type to Object store history of touch position in ResponderTouchHistoryStore.js.

Environment (include versions). Did this work in previous versions?

  • React Native for Web (version): The latest next branch in the code repository
  • React (version): 16.8.6
  • Browser: Safari

<!-- OPTIONAL:

Additional context Add any other context about the problem here. -->

closed time in 10 days

relign

issue commentnecolas/react-native-web

TouchHistory‘s processing logic caused the Crash in Safari

This is patched in master

relign

comment created time in 10 days

push eventnecolas/react-native-web

Nicolas Gallagher

commit sha 51ac083d561d96ac67fdc22ac4e1bef6a24b8561

[change] Add useElementLayout hook to implement onLayout callback A hook equivalent for implementing onLayout in function components. Removes the fallback to using window resize events. A ResizeObserver polyfill is now requires to use the `onLayout` prop.

view details

Nicolas Gallagher

commit sha a2cccaf528125357922e3623bdced5f8ae4dfd9f

[change] Add usePlatformMethods to implement instance methods A hook equivalent for implementing "native methods" on refs to elements backed by function components.

view details

Nicolas Gallagher

commit sha 96d8649197fb2014d550b15dfb530c29d4417d8e

[change] modernize AppRegistry Rewrite AppRegistry to use function components and hooks. Rewrite the tests to replace enzyme with testing-library.

view details

Nicolas Gallagher

commit sha 840a2e91d45a719769e49863aff6feb334a02ea0

[change] modernize Button Rewrite Button to use function components. Rewrite the tests to replace enzyme with testing-library.

view details

Nicolas Gallagher

commit sha 5b40b9d6aadbbbb2115570a1a3a58bf8909499e1

[change] modernize ImageBackground Rewrite ImageBackground to use function components and hooks. Rewrite the tests to replace enzyme with testing-library.

view details

Nicolas Gallagher

commit sha 94ecc46ece466ceeb4aa860c21973a632251df13

[change] modernize ProgressBar Rewrite ProgressBar to use function components and hooks. Rewrite the tests to replace enzyme with testing-library.

view details

Nicolas Gallagher

commit sha b28d2a8214f7ebb6a107dd8eba6114749949ceaf

[fix] SafeAreaView types

view details

Nicolas Gallagher

commit sha ebc3882661863ff9e9265638a9196c79cca89115

[change] modernize ScrollViewBase Rewrite ScrollViewBase to use function components and hooks. Rewrite the tests to replace enzyme with testing-library.

view details

Nicolas Gallagher

commit sha 7d440c74f4edd1bdb64c4fc378b8b9d9a926d1cb

[change] modernize Switch Rewrite Switch to use function components and hooks. Rewrite the tests to replace enzyme with testing-library.

view details

Nicolas Gallagher

commit sha fc443c5abdafe40f2fe710d08e043891e06102a9

[change] modernize View Rewrite View to use function components and hooks. The 'usePlatformMethods' hook also fixes a bug in the class-based implementation of 'setNativeProps' which was unable to correctly merge its styles with those provided via the component API. In the future, 'setNativeProps' will be removed from React Native anyway. See (3) in #1136 for more context.

view details

Nicolas Gallagher

commit sha 2724ca0293076afb7d69a3fa88e83ecbfff61ecf

Add eslint-plugin-react-hooks

view details

Nicolas Gallagher

commit sha 35236a3cc2782bc0cce90faf42a97cb9dec2d392

[change] modernize Text Rewrite Text to use function components and hooks.

view details

Nicolas Gallagher

commit sha 999c2ad1226ae84bfd3ea38f4a03db92628cb9eb

[change] modernize ActivityIndicator Rewrite ActivityIndicator to use function components and hooks. Rewrite the tests to replace enzyme with testing-library.

view details

Nicolas Gallagher

commit sha fdf53df3014498571f99de44917c3b9eecdea8be

[change] modernize CheckBox Rewrite CheckBox to use function components and hooks. Rewrite the tests to replace enzyme with testing-library.

view details

Nicolas Gallagher

commit sha 8d37fde5ee105f4a78a927a3913e4fea2eee3014

[change] modernize Picker Rewrite Picker to use function components and hooks. Rewrite the tests to replace enzyme with testing-library.

view details

Nicolas Gallagher

commit sha d94a14dc8ca07e1c8e8c25c5d1f0206e7a4a72ee

[change] RefreshControl, StatusBar, YellowBox as function components

view details

Nicolas Gallagher

commit sha 654f65e3e09c5593c6916df20215d0c65e0ed4c8

[change] modernize TextInput Rewrite TextInput to use function components and hooks. Rewrite the unit tests to replace enzyme with testing-library. Fix #1339

view details

Nicolas Gallagher

commit sha 8952eccf86eb07d19fd32f07959db0889b0cca4b

[change] Explicitly forward props and introduce unstable_{ariaSet,dataSet} Rather than filtering props, they are explicitly forwarded in each component. This makes it easier to see exactly which props are being forwarded to host components by each React Native component. Two new props - `unstable_ariaSet` and `unstable_dataSet` - are introduced to avoid iterating over props to find `aria` and `data` props. The `accessibilityValue` prop is also implemented.

view details

Nicolas Gallagher

commit sha 7e616f6d46f4d844ea4a926eeda055b480a208f2

Fix props table for docs Stop using the built-in Props table from Storybook (which wasn't working.)

view details

Nicolas Gallagher

commit sha f4e8b6b1942aa1ea0a36f596c34e0271abbb0b16

[change] modernize Image Rewrite Image to use function components and hooks. Fix #1322

view details

push time in 10 days

issue closednecolas/react-native-web

Touchable issues

The problem

The overall issue appears to be that a) events don't always occurs in the same order, which means the responder is not transferred correctly, b) mouse move events during a touch can cause the responder to be terminated, and c) scroll events are not always fired in situations where they are expected in React Native.

There are problems with the responder event system setup that are covered by these issues:

#693

https://glitch.com/edit/#!/statuesque-bedbug

locationX is relative to the element on which the native event occurred but not the element which the responder event is attached.

#731

https://glitch.com/edit/#!/cultured-bracket

In React Native, ScrollView will trigger onScroll events if you're dragging down when at the top of the scroll view - this allows the responder system to transfer the responder grant from the touchable back to the scroll view. But the web stops dispatching scroll events when scrollTop === 0, so the responder system leaves the touchable as the responder. The reported issue goes away when ScrollView dispatches a DOM scroll event after it receives a touchmove that occurs when scrollTop === 0.

#829

There are 2 significant issues with using Touchable* components within an app that relies on the document.body (rather than ScrollView) being the root scroller. I believe the root cause of both issues is that the body is not part of the responder system, which Touchable and ScrollView rely on to coordinate transfer of the responder grant.

#1164

https://codesandbox.io/s/6njwzqojnr

TouchableOpacity will trigger another component at the same location when changing views (if second component is an "<input>" or "<TextInput>")

#1124

Across multiple browsers, if you hold the mouse very still onPress triggers, but if the mouse is in motion onPress does not work.

Context

Part of the solution may related to producing the correct events (as can be inferred from React Native). This might involve changes to the event filtering logic in the REP, and the scroll event logic in ScrollView.

Related incomplete patches

Attempts to patch these problems.

  • https://github.com/necolas/react-native-web/pull/997/files
  • https://github.com/rxrossi/react-native-web/commit/1e3eb7fdf1ccb9e29abda83ae8482968e50d49b2

closed time in 10 days

necolas

issue closednecolas/react-native-web

PreventDefault does not work on textinput

The problem It is impossible to perform a preventDefault on a TextInput.

How to reproduce A simple component can be found here: https://gist.github.com/mbouxin/37634081917ae50b8c68b04f4d34493d

  1. type AAA in the text input
  2. type arrow up
  3. the cursor has moved to the beginning of the text input

Expected behavior It is not supported by react native (RN does not fire onKeyPress on arrow) but it would be great if the cursor did not change position.

For this, the nativeEvent should not be overriden as it is done in _handleKeyPress (l. 367 in https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/exports/TextInput/index.js).

I tried a little hack which does the trick: replacing the native event by:

          if (e.nativeEvent.altKey === undefined) e.nativeEvent.altKey = e.altKey;
          if (e.nativeEvent.ctrlKey === undefined) e.nativeEvent.ctrlKey = e.ctrlKey;
          if (e.nativeEvent.key === undefined) e.nativeEvent.key = e.keyValue;
          if (e.nativeEvent.metaKey === undefined) e.nativeEvent.metaKey = e.metaKey;
          if (e.nativeEvent.shiftKey === undefined) e.nativeEvent.shiftKey = e.shiftKey;
          if (e.nativeEvent.target === undefined) e.nativeEvent.target = e.target; 

Environment (include versions). Did this work in previous versions?

  • React Native for Web (version): 0.11.2
  • React (version): 16.8.4
  • Browser: Chrome

closed time in 10 days

mbouxin

PR closed necolas/react-native-web

fix Clipboard copy

when spans are non selectable (because of global span css), clipboard won't work without this fix to explicitly change the created node to be selectable.

+1 -0

0 comment

1 changed file

liorJuice

pr closed time in 10 days

PR closed necolas/react-native-web

Deprecate AccessibilityInfo.fetch and add AccessibilityInfo.isScreenReaderEnabled

From this commit(https://github.com/facebook/react-native/commit/0090ab32c2aeffed76ff58931930fe40a45e6ebc) which was merged in 0.60.2, the fetch method is deprecated and the isScreenReaderEnabled method provides the same functionality.

+11 -0

1 comment

1 changed file

SuhairZain

pr closed time in 10 days

PR closed necolas/react-native-web

Fix `nativeScrollRef` is not a function

This prevents VirtualizedList from throwing a warning, and fixes scrolling when using nested virtualized lists (FlatList, SectionList).

Proposed fix for #1560 however, this doesn't make any updates to ScrollResponder, I am less sure about what needs to happen there.

+4 -0

0 comment

1 changed file

tamagokun

pr closed time in 10 days

issue closednecolas/react-native-web

`getNativeScrollRef` is not a function

<!-- Thank you for reporting an issue. Please note that an issue must include the information that is marked as REQUIRED below, or it may be closed. -->

The problem <!-- REQUIRED: A clear and concise description of the bug or problem. -->

Rendering a fairly complex set of virtualized lists (VirtualizedList -> ScrollView(horizontal) -> SectionList), which renders perfectly, however somewhere down the line I get an error.

The list isn't able to scroll vertically, so i'm assuming that this error is related to that.

react_devtools_backend.js:6 measureLayoutRelativeToContainingList threw an error TypeError: this.context.virtualizedList.getOutermostParentListRef(...).getScrollRef(...).getNativeScrollRef is not a function

Looks like the scrollRef doesn't have a getNativeScrollRef function.

How to reproduce <!-- REQUIRED: Create a test case by forking this template https://codesandbox.io/s/6lx6ql1w5r

Failing to include a reduced test case may result in the issue being closed, and will delay any potential fix. Your application or GitHub project is NOT considered a reduced test case. If the issue only affects certain browsers, providing screenshots is also helpful. --> Simplified test case: https://codesandbox.io/s/blissful-yonath-dh2ot

Steps to reproduce: 1. 2. 3.

Expected behavior <!-- REQUIRED: A clear and concise description of what you expected to happen.

Please check that the behaviour is not expected React Native behaviour by running your test case on iOS or Android using https://snack.expo.io. -->

react-native-web supports this and can render lists properly.

Environment (include versions). Did this work in previous versions?

  • React Native for Web (version): 0.12.2
  • React (version): 16.9.0
  • Browser: Chrome

<!-- OPTIONAL:

Additional context Add any other context about the problem here. -->

Looks like this worked OK with 0.11.0, but is failing in 0.12.2

closed time in 10 days

tamagokun

issue closednecolas/react-native-web

Touchable: layout is measured during touch-scroll event

The problem

As mentioned in #1157, Touchable _remeasureMetricsOnActivation was called when we touch to scroll, and cause browser Layout due to the getRect:

image

I have find out that it is called on native too.

image

But there is no performance problem in native.

Browser Layout costs so much times, making the scroll performance so bad!

How to reproduce

A large List, with Touchable items, can reproduce the problem.

<ScrollView>
   // the more complicated of the TouchableOpacity view tree, the easier to reproduce.
  <TouchableOpacity style={styles.item}></TouchableOpacity>
  // ...
  // ...
  // ...
</ScrollView>

const styles = StyleSheet.create({
  // The bigger the visual rect, the easier to reproduce.
  item: {width: '100%', height: 100} 
});

Expected behavior

Hope to look for a solution, and improve the scroll performance.

closed time in 10 days

hushicai

issue closednecolas/react-native-web

Touchable shouldn't be pressed while scrolling in a ScrollView

<!-- Thank you for reporting an issue. Please note that an issue must include the information that is marked as REQUIRED below, or it may be closed. -->

The problem In a list of links, <TouchableHighlight> inside <ScrollView>, the scroll event doesn't disable the possibility to trigger the touchable onPress. When triggering a pressIn and seing the underlayColor, if we start to scroll we still can see the underlayColor (and seing underlayColor mean that the onPress while be triggered, this part is expected). The underlayColor disappear after Y pixels scrolling (in both ways), but if we go back near the pressIn event, underlayColor can reappear.

Enregistrement de l’écran 2020-02-05 à 12 45 00

How to reproduce <!-- REQUIRED: Create a test case by forking this template https://codesandbox.io/s/6lx6ql1w5r

Failing to include a reduced test case may result in the issue being closed, and will delay any potential fix. Your application or GitHub project is NOT considered a reduced test case. If the issue only affects certain browsers, providing screenshots is also helpful. --> Simplified test case: https://codesandbox.io/s/react-native-scroll-and-touchable-epskt

I made the gif on Chrome 80, macOS 10.15.2 in responsive-mode, and I can reproduce it on my devices : iPhone X iOS 13.3 Safari and Nexus 5X Android 8.1 on Chrome 80 and Firefox 68

Steps to reproduce:

  1. Open https://epskt.csb.app/ on a mobile
  2. Scroll slowly to see the underlayColor
  3. Scroll far and near the initial position to see the underlayColor appear and disappear

Expected behavior <!-- REQUIRED: A clear and concise description of what you expected to happen.

Please check that the behaviour is not expected React Native behaviour by running your test case on iOS or Android using https://snack.expo.io. --> On a React Native application, starting to scroll hide immediately the underlayColor and will never trigger an onPress event on a Touchable component inside a ScrollView.

Environment (include versions). Did this work in previous versions?

  • React Native for Web (version): 0.12.0
  • React (version): 16.12.0
  • Browser: Chrome (macOS in responsive-mode and Android) Safari (iOS) Firefox (Android)

Oh! I tried to change RNW to 0.11.7 and React to 16.7.0 on the codesanbox, and it seem to work as expected! I didn't notice before because I started my project with 0.12.0-rc.1, so it seem to be a regression on 0.12 (or React?).

Additional context

I see similar issues linked to the Responder Event System https://github.com/necolas/react-native-web/issues/1219 but it seem they don't use the <ScrollView>.

I think this unexpected behavior is also the issue about the fact that it's too easy to trigger an onPress on this list if you scroll fast.

closed time in 10 days

Freddy03h

issue closednecolas/react-native-web

TouchableOpacity onPress doesn't fire every time

Hi,

i've noticed that the event onPress on TouchableOpacity is not firing every time. If the click is fast enough, it doesn't fire. This wasn't happening on 0.11.x releases.

closed time in 10 days

anija

issue closednecolas/react-native-web

<Text> onPress inside a <TouchableX> with onPress trigger both of them

The problem Pressing a Text component with an onPress props into a TouchableX component will trigger both onPress while nested Touchable only triggers the inner Touchable

How to reproduce Simplified test case: https://codesandbox.io/s/eloquent-boyd-53z02

Steps to reproduce:

  1. Create a <TouchableOpacity> or <Touchable Highlight> with a functional onPress prop
  2. Create a <Text> with a functional onPress prop inside the previously created touchable
  3. Press the <Text>
  4. Both onPress props are triggered

Expected behavior Only the <Text> onPress props should be triggered (As in iOS & Android)

Environment (include versions). Did this work in previous versions?

  • React Native for Web (version): 0.11.x
  • React (version): 16.12.0
  • Browser: Chrome Version 80.0.3987.163 (Official Build) (64-bit)

closed time in 10 days

MathieuUrstein

issue closednecolas/react-native-web

onPress of Touch trigger twice when on moblie phone

I'm so sorry for not describing it clearly last time.

It works well on PC, but will trigger twice on moblie phone or safari of ios Simulator (always).

Alow if I turns on phone mode in browser ,it sometime trigger twice.

I have checked my react and react-dom version.

My code like this:

<TouchableHighlight onPress={()=>{
    alert('You pressed me')
 }}>
     <View style={styles.touchStyle}>
         <Text >
            press me
        </Text>
     </View>
</TouchableHighlight>

when I click the alertDialog, onPress will trigger one more.

It's sees that when I click the alert dialog, touchableHandleResponderGrant of Touchable will trigger.

My Version is :

  • react-native:0.59.9
  • react:16.10.2
  • react-dom:16.10.2

closed time in 10 days

YvetteLau

issue closednecolas/react-native-web

Responder Event System for Web

Responder Event System for Web

The Responder Event System (RES) is a gesture system that manages the lifecycle of gestures. It was designed for React Native to help support the development of native-quality gestures. A pointer may transition through several different phases while the gesture (e.g., tap, scroll, swipe) is being determined, and a pointer may be used simultaneously alongside other pointers. The Responder Event System helps developers manage pointer interactions by providing a single, global “interaction lock” on views. For a view to become the “responder” means that pointer interactions are exclusive to that view and none other. A view can negotiate becoming the “responder” without requiring knowledge about other views.

Using the Responder Event System

This system is currently provided via the ResponderEventPlugin. The plugin and related injection helpers are also published in the ReactDOM npm package as a special bundle of unstable APIs under react-dom/unstable-native-dependencies. This bundle was created for, and is used exclusively by react-native-web to enable the RES in ReactDOM.

However, this setup has problems which are described below.

Problems for React

  1. The unstable APIs in the public release of ReactDOM are part of the legacy event system. The ReactDOM event system is being refactored and simplified, but OSS libraries depending on these unstable APIs will eventually block completion of this work.
  2. The unstable APIs are not available in Facebook's internal build of ReactDOM. This blocks the experimental use of react-native-web by teams there.

Problems for React Native for Web

  1. Injecting the ResponderEventPlugin causes every host component (e.g., div) in ReactDOM to gain props for the Responder System.
  2. The internals of the unstable APIs need to be mutated by react-native-web to monkey-patch issues with the implementation when it is running on the web. Occasionally, these internals have been changed in patches to React and caused unexpected downstream regressions.
  3. The ResponderEventPlugin is difficult and risky to reliably patch: the plugin is also used by React Native; the plugin is tied to the legacy event system; the plugin unit tests are esoteric and tied to React implementation details; performing manual integration tests with react-native-web is tedious and error-prone; and there is a lack of relevant context among code reviewers.
  4. The implementation of the plugin is not well suited to the needs of web apps.
    • It doesn’t reliably support both mouse and touch interactions, as it doesn’t account for browsers producing emulated mouse events after touch events.
    • It doesn’t hand over control to the native system when a container scrolls, the window loses focus, the context menu opens, or selection changes.
    • It doesn’t always correctly set the currentTarget of a Responder Event to the current “responder“ view (see #693).

Replacing the Responder Event System

The proposed solution to the above problems is to reimplement the Responder Event System in user-space, i.e., using the native DOM event system and avoiding ReactDOM’s event system altogether. The RES can then be made available to ReactDOM apps via a custom React Hook. This will be used by react-native-web to implement the Responder callbacks on View and Text without altering the rest of the ReactDOM event system by injecting the ResponderEventPlugin.

Benefits for React

  1. Remove the unstable APIs in the public release of ReactDOM. This allows us to work towards removing the event plugin system, as well as independently evolving the implementation for React Native.
  2. Developing this hook will function as practical R&D for future event-related APIs in ReactDOM. Both in terms of assessing new low-level APIs like useEvent and as a reference for alternative systems to the RES. This can be done without first requiring changes to the ReactDOM event system.
  3. Enable experimental use of react-native-web at Facebook. This allows teams to safely experiment without introducing internal dependencies on unstable APIs (whether legacy or experimental) in ReactDOM itself. It would also be easier to debug, contribute patches, or fork without requiring knowledge of the esoteric details of the ResponderEventPlugin and React’s event system.

Benefits for React Native for Web

  1. No dependency on unstable APIs and no mutating of React’s internal APIs or plugin injection by react-native-web. This should make the UX more reliable and the library less prone to regressions from upstream changes. It should also work with "React alternatives".
  2. Easier to iterate on the implementation and its integration with the host environment.
  3. No addition of RES props to the host components provided by ReactDOM when react-native-web is used.
  4. The RES can account for the idiosyncratic requirements of web apps, such as the conditions in which to terminate the current responder and hand control over to the native system.
  5. Resolve the long-standing issues with existing RES for Web without modifying the ResponderEventPlugin used by React Native.

We may not be able to exactly reproduce the behavior of the ResponderEventPlugin in user-space (e.g., order of events vs those coming from SimpleEventPlugin) but this doesn’t seem to be essential or reason enough to maintain the status quo. The downsides of not integrating with React's event system can hopefully be avoided in the future with new APIs added to ReactDOM.

Plan and timeline

The RES relies on listening to a handful of events at the top level, which is not something that ReactDOM supports outside of the Plugin system. Therefore, this replacement will need to bypass React and attach native event listeners. This isn't ideal for Concurrent Mode, but could be a surface for developing and testing new APIs attached to the modern event system @trueadm has been working on for ReactDOM.

The intended use for the RES Hook is as follows:

function View(props) {
  const ref = useRef(null);
  
  useResponderEvents(ref, {
    onStartShouldSetResponder: props.onStartShouldSetResponder,
    onResponderGrant: props.onResponderGrant,
    ...
  });
  
  return (
    <div ref={ref} />
  );
}

February 2020: Hooks rewrite

Rewriting the react-native-web components to use Hooks is a prerequisite for the other changes. Using hooks simplifies the implementations of components and has already resolved a few bugs in the library related to using setNativeProps and TextInput events. Once Hooks can be used the RES implementation can be exposed as a custom Hook.

March 2020: Responder Event System rewrite

The user-space implementation of the RES for web requires the existing ResponderEventPlugin unit tests to be ported and expanded upon. The replacement unit tests will test the public API and avoid dependencies on React internals (e.g., Fiber structures). Addition scenarios will also be covered: using either a mouse or touch, and terminating the responder when the native system should be in control.

April 2020: Remove unstable-native-dependencies

Once the RES rewrite lands in react-native-web we can safely remove the unstable-native-dependencies export and bundle from ReactDOM.

closed time in 10 days

necolas

issue closednecolas/react-native-web

Keyboard.dismiss prevents textinput on web

<!-- Thank you for reporting an issue. Please note that an issue must include the information that is marked as REQUIRED below, or it may be closed. -->

The problem <!-- REQUIRED: A clear and concise description of the bug or problem. --> Wrapping a TextInput in <TouchableWithoutFeedback onPress={Keyboard.dismiss}> prevents text input in web browsers. It works in the Android emulator.

How to reproduce <!-- REQUIRED: Create a test case by forking this template https://codesandbox.io/s/6lx6ql1w5r

Failing to include a reduced test case may result in the issue being closed, and will delay any potential fix. Your application or GitHub project is NOT considered a reduced test case. If the issue only affects certain browsers, providing screenshots is also helpful. --> Simplified test case: https://snack.expo.io/zZnI!80Pv Even more minimal: https://snack.expo.io/wGzixvj1e

Steps to reproduce:

  1. Choose the web view
  2. Click on the TextInput field
  3. Try to type any text using the computer keyboard

Expected behavior <!-- REQUIRED: A clear and concise description of what you expected to happen.

Please check that the behaviour is not expected React Native behaviour by running your test case on iOS or Android using https://snack.expo.io. --> I expect the text I enter to show up in the TextInput field.

Environment (include versions). Did this work in previous versions?

  • React Native for Web (version): Whatever Snack uses
  • React (version): Whatever Snack uses
  • Browser: Chrome

<!-- OPTIONAL:

Additional context Add any other context about the problem here. -->

closed time in 10 days

Tobbe

issue closednecolas/react-native-web

Image onLoadEnd

<!-- Thank you for reporting an issue. Please note that an issue must include the information that is marked as REQUIRED below, or it may be closed. -->

The problem

On RN Image component onLoadEnd event triggered everytime after source prop changing on mounted Image component... On RNWeb - after source loaded (not changed)...

How to reproduce <!-- REQUIRED: Create a test case by forking this template https://codesandbox.io/s/6lx6ql1w5r

Failing to include a reduced test case may result in the issue being closed, and will delay any potential fix. Your application or GitHub project is NOT considered a reduced test case. If the issue only affects certain browsers, providing screenshots is also helpful. -->

RN: https://snack.expo.io/@oxyii/image-onloadend-test

RNWeb: https://codesandbox.io/s/7w32oql5zx

Expected behavior

same as RN )))

OPTIONAL: <!--

Additional context Add any other context about the problem here. -->

Real world example: react-native-elements lib have Avatar component that use Image component. So RNE fade in animation not fired on source changed because this

closed time in 10 days

oxyii

issue closednecolas/react-native-web

onContentSizeChange on TextInput does not trigger in some cases

The problem

When <TextInput /> has an explicitly set height (for example because we're implementing an auto-growing textarea) then onContentSizeChange is not being triggered if the content height is smaller than that container height.

<!-- REQUIRED: A clear and concise description of the bug or problem. -->

How to reproduce https://codesandbox.io/s/ll3j9pwrx7 https://snack.expo.io/Bkkv7CRi4

Expected behavior onContentSizeChange is called again with the correct values

Environment (include versions). Did this work in previous versions?

  • React Native for Web (version): 0.11.2
  • React (version): 16.8.6
  • Browser: tested on Chrome

Additional context The workaround I've used in my particular implementation:

  if (Platform.OS === 'web') {
    const node = this.input._node
    node.style.height = 'inherit'
    const height = node.scrollHeight
    node.style.height = `${height}px`
    this.setState({ height })
  }

closed time in 10 days

d4rky-pl

issue commentnecolas/react-native-web

Label tag should allow for htmlFor

The web label behavior doesn't happen on native either

walidvb

comment created time in 10 days

issue commentreact-native-community/discussions-and-proposals

Platform specific styles inside StyleSheet

@sahrens We did something much simpler at Twitter. StyleSheet.create was wrapped in user-space so that it can take a function or an object:

const styles = StyleSheet.create((theme) => ({
  root: {
    backgroundColor: theme.backgroundColor
  }
}));

Then you can use styles as normal. It also made it trivial to codemod existing code that used a static theme as done in the OP, without any changes to function bodies.

The benefit of doing this in user space is it isn't tied to just themes either. You can pass any dynamic data to the styles definitions if you want. There's a small cost on web to doing too much of this, which is runtime duplication of style objects for all the variants.

I wonder if RN could support something similar to how CSS custom properties are used for theming on the web, as this means the values (behind an imported theme object) can be dynamically changed without needing any changes to how styles are defined and without needing to re-render the React tree (on web at least).

svbutko

comment created time in 10 days

issue commentnecolas/react-native-web

Label tag should allow for htmlFor

Use of for isn't really necessary because you can do the same thing (and more) with aria-labelledby: https://www.w3.org/WAI/tutorials/forms/labels/. The htmlFor attribute is web-only and I think we can do better by avoiding adding more platform-specific APIs to React Native where general approach work just as well.

walidvb

comment created time in 10 days

issue closednecolas/react-native-web

Typescript type for TextInput "onKeyPress" event do not have "key" attribute

The problem

According to the docs, the onKeyPress event of the TextInput component should have a key attribute but the Typescript types (TextInputProps.onKeyPress?: (e: NativeSyntheticEvent<TextInputKeyPressEventData>) => void), do not support a key attribute so doing e.key fails TS validation.

How to reproduce

  1. Setup react-native-web with Typescript
  2. Try and pass a onKeyPress callback to a TextInput component while use key
  3. See TS complain
  function handleKeyPress(
    e: NativeSyntheticEvent<TextInputKeyPressEventData>
  ): void {
    console.log(e.key)
  }

  return (
    <div>
      <Input
        onKeyPress={handleKeyPress}
        value={val}
      />
    </div>
  )

Expected behavior

Types should have key attribute for NativeSyntheticEvent<TextInputKeyPressEventData>

Environment (include versions). Did this work in previous versions?

  • React Native for Web (version): 0.12.3
  • React (version): 16.13.1
  • Browser: Brave

closed time in 12 days

danawoodman

issue commentnecolas/react-native-web

Typescript type for TextInput "onKeyPress" event do not have "key" attribute

Probably expects you to use e.nativeEvent.key

danawoodman

comment created time in 12 days

issue closednecolas/react-native-web

The introduction to this document is too simple. Who can understand it?

http://necolas.github.io/react-native-web/docs/?path=/docs/overview-getting-started--page

Who can understand? ? ?

closed time in 12 days

ngxu

Pull request review commentfacebook/react

Refactor createEventHandle signature

 import * as React from 'react'; import * as ReactDOM from 'react-dom'; -const {useEffect, useRef} = React;+const {useLayoutEffect, useRef} = React;

you run into issues with focus and blur not getting captured because they happen before useEffect fires

What are the specific issues?

trueadm

comment created time in 14 days

issue commentnecolas/react-native-web

TouchHistory‘s processing logic caused the Crash in Safari

I see what you're saying, thanks.

It's unfortunate that the touchBank array is part of the RN responder event API, because adding touches to an array like that is a bad code pattern that can create enormous arrays. A Map would be better in this case.

And it's bizarre that safari is still using huge identifiers too. If this bug is not occurring in 0.12 it may be because of this line of code https://github.com/necolas/react-native-web/blob/36dacb2052efdab2a28655773dc76934157d9134/packages/react-native-web/src/modules/normalizeNativeEvent/index.js#L22

relign

comment created time in 14 days

IssuesEvent

issue commentnecolas/react-native-web

RNW doesn't display image; same code works in RN

I'll still leave this open as part of switching to auto by default

samuelneff

comment created time in 16 days

issue commentnecolas/react-native-web

TouchHistory‘s processing logic caused the Crash in Safari

I don't understand what you're trying to explain

relign

comment created time in 16 days

issue commentnecolas/react-native-web

RNW doesn't display image; same code works in RN

React Native doesn't implement flexbox correctly, so the platforms will never be consistent until yoga is patched. I'll eventually remove the 0% flex basis default, but you should only set flex basis property and not use the flex shorthand with a string of multiple values

samuelneff

comment created time in 16 days

PR closed necolas/react-native-web

fix scrollView&List Component press and slide conflict

Interrupting an event by determining if the focus has moved farther than 2 is compatible with Touchable in the scroll container to prevent scrolling from simultaneously starting the click event

+7 -0

1 comment

1 changed file

wangjiafenghw

pr closed time in 17 days

pull request commentnecolas/react-native-web

fix scrollView&List Component press and slide conflict

This issue is fixed in the canary channel by https://github.com/necolas/react-native-web/issues/1568

wangjiafenghw

comment created time in 17 days

pull request commentfacebook/react

react-interactions: define dom events for contextmenu right click event and appropriate test

We're not developing the package anymore

engprodigy

comment created time in 18 days

issue commentnecolas/react-native-web

[Text] fontSize not work when lower than 12 on web

Screenshot_20200615-223653_Chrome

This is what I see. If you don't provide enough information about how to reproduce an issue, I can't help you. It could be that the browser just ignores font sizes below a certain level

KingAmo

comment created time in 20 days

issue closednecolas/react-native-web

[Text] fontSize not work when lower than 12 on web

<!-- Thank you for reporting an issue. Please note that an issue must include the information that is marked as REQUIRED below, or it may be closed. -->

The problem on web, when fontSize is above 12, it works ; but when font is lower than 12, it does not work , however, on iOS or Android, everything is fine

<Text style={{fontSize: 10}}>hello</Text>

How to reproduce <!-- REQUIRED: Create a test case by forking this template https://codesandbox.io/s/6lx6ql1w5r

Failing to include a reduced test case may result in the issue being closed, and will delay any potential fix. Your application or GitHub project is NOT considered a reduced test case. If the issue only affects certain browsers, providing screenshots is also helpful. --> Simplified test case: <!-- add link here --> https://codesandbox.io/s/little-browser-w5jy7?file=/src/App.js Steps to reproduce: 1. 2. 3.

Expected behavior <!-- REQUIRED: A clear and concise description of what you expected to happen.

Please check that the behaviour is not expected React Native behaviour by running your test case on iOS or Android using https://snack.expo.io. -->

Environment (include versions). Did this work in previous versions?

  • React Native for Web (version): TBC
  • React (version): TBC
  • Browser: TBC

<!-- OPTIONAL:

Additional context Add any other context about the problem here. -->

closed time in 20 days

KingAmo

issue commentnecolas/react-native-web

[Text] fontSize not work when lower than 12 on web

It renders as expected in the codesandbox.

You also don't need to demand help from me moments after opening an issue.

KingAmo

comment created time in 20 days

PR closed facebook/react

react-interactions: define dom events for contextmenu right click event and appropriate test CLA Signed

simple event abstraction for mouse right click that brings up a context menu. This has not been exclusively defined before. This will serve as a basis for further abstraction of the right click mouse event that brings up a context menu @necolas and @trueadm

export function contextmenurightclick(payload) { return createMouseEvent('contextmenu', { button: buttonType.secondary, ...payload, }); }

<!-- Thanks for submitting a pull request! We appreciate you spending the time to work on these changes. Please provide enough information so that others can review your pull request. The three fields below are mandatory.

Before submitting a pull request, please make sure the following is done:

  1. Fork the repository and create your branch from master.
  2. Run yarn in the repository root.
  3. If you've fixed a bug or added code that should be tested, add tests!
  4. Ensure the test suite passes (yarn test). Tip: yarn test --watch TestName is helpful in development.
  5. Run yarn test-prod to test in the production environment. It supports the same options as yarn test.
  6. If you need a debugger, run yarn debug-test --watch TestName, open chrome://inspect, and press "Inspect".
  7. Format your code with prettier (yarn prettier).
  8. Make sure your code lints (yarn lint). Tip: yarn linc to only check changed files.
  9. Run the Flow typechecks (yarn flow).
  10. If you haven't already, complete the CLA.

Learn more about contributing: https://reactjs.org/docs/how-to-contribute.html -->

<!-- Explain the motivation for making this change. What existing problem does the pull request solve? -->

<!-- Demonstrate the code is solid. Example: The exact commands you ran and their output, screenshots / videos if the pull request changes the user interface. -->

+78 -0

4 comments

3 changed files

engprodigy

pr closed time in 21 days

pull request commentfacebook/react

react-interactions: define dom events for contextmenu right click event and appropriate test

The contextmenu event sequence already accepts a pointerType option that dispatches the event sequence expected for either mouse or touch pointers

engprodigy

comment created time in 21 days

issue closednecolas/react-native-web

Unexpected token

The problem I've updated my react, expo and expo-cli version recently and am trying to get expo web running on this updated project, but whenever I run expo start --web I get the following error:

web  Failed to compile.
/App/App.js
SyntaxError: /App/App.js: Unexpected token (6:9)

  4 | 
  5 | const App = () => {
> 6 |   return <Text>Hii</Text>;
    |          ^
  7 | };
  8 | 
  9 | export default App;

The app works fine on IOS and android, but I keep getting this error for web.

Not sure what's causing the error.

I've added "web" to platform in my app.json

My app file is

import React from "react";

import { Text } from "react-native";

const App = () => {
  return <Text>Hii</Text>;
};

export default App;

How to reproduce Install expo SDK 37 Install the latest version of the Expo CLI: npm i -g expo-cli Add web dependencies: yarn add react-native-web react-dom Ensure your project has at least expo@^33.0.0 installed. Start your project with expo start then press w

Expected behavior Web app to start with either specified error or working

Environment (include versions). Did this work in previous versions?

"@expo/vector-icons": "^10.0.0",
    "@react-native-community/netinfo": "5.5.1",
    "axios": "^0.18.0",
    "expo": "^37.0.0",
    "expo-barcode-scanner": "~8.1.0",
    "expo-constants": "~9.0.0",
    "expo-font": "~8.1.0",
    "expo-updates": "~0.2.1",
    "intl": "^1.2.5",
    "laravel-echo": "^1.6.1",
    "navigation": "^5.2.0",
    "pusher-js": "^6.0.2",
    "react": "16.9.0",
    "react-dom": "^16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz",
    "react-native-background-timer": "^2.1.1",
    "react-native-elements": "^1.2.7",
    "react-native-fbsdk": "^0.8.0",
    "react-native-gesture-handler": "^1.6.1",
    "react-native-maps": "0.26.1",
    "react-native-payment-gateway": "^0.4.3",
    "react-native-reanimated": "~1.7.0",
    "react-native-redash": "^3.3.2",
    "react-native-screens": "^2.2.0",
    "react-native-simple-radio-button": "^2.7.4",
    "react-native-svg": "11.0.1",
    "react-native-vector-icons": "^6.6.0",
    "react-native-web": "^0.12.3",
    "react-navigation": "^3.13.0",
    "react-redux": "^5.1.2",
    "redux": "^4.0.4",
    "styled-components": "^4.4.1"

closed time in 21 days

salman15

issue commentnecolas/react-native-web

Unexpected token

This is a compiler issue. If it's happening with expo and you've followed their instructions, you should open a bug against expo.

salman15

comment created time in 21 days

issue commentnecolas/react-native-web

Provide API for transformation of CSS properties

Use unstable_createElement to render the svg

nathggns

comment created time in 21 days

issue commentnecolas/react-native-web

Redux looking for `unstable_batchedUpdates` from `react-native`

It's going to pull in the native files for everything else too, so this is a probably with how the bundler is configured

samuelneff

comment created time in 23 days

issue commentnecolas/react-native-web

Redux looking for `unstable_batchedUpdates` from `react-native`

Then the problem is metro bundling files with .native extensions instead of .web for the web build

samuelneff

comment created time in 24 days

issue closednecolas/react-native-web

Redux looking for `unstable_batchedUpdates` from `react-native`

The problem When running a redux application with react-native-web I get this error as soon as the first action is dispatched.

error in mw dispatch or next call, probably in middlware/reducer/render fn: TypeError: batch is not a function

I was able to track it to this code in Redux:

https://github.com/reduxjs/react-redux/blob/5e6205a2f9bb18e1f8b0163382bc29230ea7d3d3/src/utils/reactBatchedUpdates.native.js

import { unstable_batchedUpdates } from 'react-native'

export { unstable_batchedUpdates }

Where it's looking for a function called unstable_batchedUpdates from react-native that eventually gets assigned to a variable called batch. There's a corresponding file for web-world where it imports this same function from react-dom.

I believe react-native-web would need to import this function from ReactDOM and re-export it to make Redux happy.

<!-- REQUIRED: Create a test case by forking this template https:///s/6lx6ql1w5r

Failing to include a reduced test case may result in the issue being closed, and will delay any potential fix. Your application or GitHub project is NOT considered a reduced test case. If the issue only affects certain browsers, providing screenshots is also helpful. --> Simplified test case: Sorry, Corp proxy does not allow access to codesandbox.io

Steps to reproduce:

  1. Create React Native app
  2. Add React Native Web support
  3. Use Redux
  4. Dispatch an action

Expected behavior Should run without error. ;)

Environment (include versions). Did this work in previous versions?

  • React Native for Web (version): 0.12.3
  • React (version): 16.11.0
  • Browser: Chrome 83.0.4103.97

Additional context This is my first time trying to use React Native Web. I bundled the app with metro bundler using instructions found here:

https://github.com/necolas/react-native-web/issues/1257#issuecomment-541443684

closed time in 24 days

samuelneff

issue commentnecolas/react-native-web

Redux looking for `unstable_batchedUpdates` from `react-native`

They already have this file: https://github.com/reduxjs/react-redux/blob/5e6205a2f9bb18e1f8b0163382bc29230ea7d3d3/src/utils/reactBatchedUpdates.js

You shouldn't need to use the react native version of redux

samuelneff

comment created time in 24 days

startednecolas/react-native-web

started time in 24 days

issue openednecolas/react-native-web

Update font-stack

The problem

The 'system-ui` font can cause rendering problems. See https://phabricator.wikimedia.org/T175877

Expected behavior

Update font-stack to follow latest guidance.

created time in 25 days

issue closednecolas/react-native-web

Error when adding react native web to react native project

I just created react native project and I want to add react native web to it. I follow document provided for it but I get this error:

ERROR in ./index.web.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
TypeError: /home/hamidreza/Desktop/test/index.web.js: Cannot read property 'filename' of undefined
    at PluginPass.JSXOpeningElement (/home/hamidreza/Desktop/test/node_modules/babel-plugin-transform-react-jsx-source/lib/index.js:32:39)
    at newFn (/home/hamidreza/Desktop/test/node_modules/@babel/traverse/lib/visitors.js:179:21)
    at NodePath._call (/home/hamidreza/Desktop/test/node_modules/@babel/traverse/lib/path/context.js:55:20)
    at NodePath.call (/home/hamidreza/Desktop/test/node_modules/@babel/traverse/lib/path/context.js:42:17)
    at NodePath.visit (/home/hamidreza/Desktop/test/node_modules/@babel/traverse/lib/path/context.js:90:31)
    at TraversalContext.visitQueue (/home/hamidreza/Desktop/test/node_modules/@babel/traverse/lib/context.js:112:16)
    at TraversalContext.visitSingle (/home/hamidreza/Desktop/test/node_modules/@babel/traverse/lib/context.js:84:19)
    at TraversalContext.visit (/home/hamidreza/Desktop/test/node_modules/@babel/traverse/lib/context.js:140:19)
    at Function.traverse.node (/home/hamidreza/Desktop/test/node_modules/@babel/traverse/lib/index.js:84:17)
    at NodePath.visit (/home/hamidreza/Desktop/test/node_modules/@babel/traverse/lib/path/context.js:97:18)
 @ multi ./index.web.js main[0]

this is my index.web.js:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));

index.js:

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

AppRegistry.registerComponent(appName, () => App);

web/webpack.config.js:

const path = require('path');
const webpack = require('webpack');
const appDirectory = path.resolve(__dirname, '../');
const babelLoaderConfiguration = {
  test: /\.js$/,
  include: [
    path.resolve(appDirectory, 'index.web.js'),
    path.resolve(appDirectory, 'src'),
    path.resolve(appDirectory, 'node_modules/react-native-uncompiled')
  ],
  use: {
    loader: 'babel-loader',
    options: {
      cacheDirectory: true,
      presets: ['react-native'],
      plugins: ['react-native-web']
    }
  }
};

const imageLoaderConfiguration = {
  test: /\.(gif|jpe?g|png|svg)$/,
  use: {
    loader: 'url-loader',
    options: {
      name: '[name].[ext]'
    }
  }
};

module.exports = {
  entry: [
    // path.resolve(appDirectory, 'polyfills-web.js'),
    path.resolve(appDirectory, 'index.web.js')
  ],

  output: {
    filename: 'bundle.web.js',
    path: path.resolve(appDirectory, 'dist')
  },
  module: {
    rules: [
      babelLoaderConfiguration,
      imageLoaderConfiguration
    ]
  },

  resolve: {
    alias: {
      'react-native$': 'react-native-web'
    },
    extensions: [ '.web.js', '.js' ]
  }
}

package.json:

{
  "name": "test",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "react": "16.11.0",
    "react-native": "0.62.2",
    "react-dom": "^16.13.1",
    "react-native-web": "^0.12.3"
  },
  "devDependencies": {
    "@babel/core": "^7.10.2",
    "@babel/runtime": "^7.10.2",
    "@react-native-community/eslint-config": "^1.1.0",
    "babel-jest": "^26.0.1",
    "babel-loader": "^8.1.0",
    "babel-plugin-react-native-web": "^0.12.3",
    "babel-preset-react-native": "^4.0.1",
    "eslint": "^7.2.0",
    "jest": "^26.0.1",
    "metro-react-native-babel-preset": "^0.59.0",
    "react-test-renderer": "16.11.0",
    "url-loader": "^4.1.0",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.11.0"
  },
  "jest": {
    "preset": "react-native"
  }
}

I don't have any idea where is my problem. Everything is just like document.

closed time in a month

Hamidrezana

issue commentnecolas/react-native-web

Error when adding react native web to react native project

Looks like a problem with version of Babel plugins. I can't help you any more than that, and recommend using expo is you're not sure how to set up the bundler yourself

Hamidrezana

comment created time in a month

issue commentnecolas/react-native-web

The future of React Native for Web

Both those issues should be fixed in 0.0.0-d33e107ba

necolas

comment created time in a month

issue commentnecolas/react-native-web

The future of React Native for Web

Thanks for the composition fix. That's also recommended on MDN: https://developer.mozilla.org/en-US/docs/Web/API/Document/keyup_event

The PressResponder invariant is caused by a keyup event "falling through" from the modal onto the original text input, because the modal is closed synchronously on keydown. I fixed this scenario in the PressResponder, but worth being aware of what the browser is doing with events here too.

necolas

comment created time in a month

issue closednecolas/react-native-web

Sample of adding react-native-web to an existing react-native app

It would be very useful for a newbie like me to see an example of all the steps, to add react-native-web to an existing react-native-app which doesn't use expo. With the repro steps below, I am hoping, it should be easy for someone who has worked on this for a while to spot the issue quickly.

I did read the documentation. But there are still issues.

Repro Steps:

Creating the barebones app using react-native cli

react-native inti ilabsweb

cd myapp

Copied the webpack.config.js from above documentation site to ilabsweb/web/ folder

yarn add react react-dom react-native-web

yarn add babel-plugin-module-resolver

yarn add --dev babel-loader url-loader webpack webpack-cli webpack-dev-server

yarn add --dev babel-plugin-react-native-web

---Ran into Errors / to Fix added

yarn add babel-preset-react-native

yarn

./node_modules/.bin/webpack-dev-server -d --config ./web/webpack.config.js --inline --hot --colors

gives the following error using the same webpack.config.js at the documentation site above.

ERROR in ./App.js 24:12

Module parse failed: Unexpected token (24:12) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | return ( |

        <View style={styles.sectionContainer}>

| <Text style={styles.sectionTitle}>Learn More</Text> | <Text style={styles.sectionDescription}> @ ./index.web.js 1:340-356 @ multi ./index.web.js

packages json

closed time in a month

csalgo70

issue commentnecolas/react-native-web

Sample of adding react-native-web to an existing react-native app

As mentioned in the docs on that page

If you depend on uncompiled packages they may cause webpack build errors. To fix this webpack can be configured to compile to the necessary node_module

But I strongly recommend using Expo who have all this built-in.

csalgo70

comment created time in a month

push eventnecolas/react-native-web

Nicolas Gallagher

commit sha 57fd997e5608ee88de66089a6af85aa7c01c1ab6

Deploy documentation

view details

push time in a month

push eventnecolas/react-native-web

Nicolas Gallagher

commit sha 6792c6f0cb9c6c54bb71a5a42a19d598462fbd73

Benchmarks deploy

view details

push time in a month

push eventnecolas/react-native-web

Nicolas Gallagher

commit sha f4a481bb4f40cc53cd54e8a08c65a638603daf0d

[fix] Allow 'lang' attribute to be forwarded to DOM nodes

view details

Nicolas Gallagher

commit sha 9dbe17fa6a234840f55b74a75a703c238919bec1

0.12.3

view details

push time in a month

created tagnecolas/react-native-web

tag0.12.3

React Native for Web

created time in a month

issue commentnecolas/react-native-web

CSS is generated differently for the same code, but on different components

The prop types are gone in react native too. You can use 'yarn patch' to add them back locally until you take the time to update your project to stop using them. Prop types don't do anything except some runtime type checks in development, so they are unnecessary

tstankevicius

comment created time in a month

issue commentnecolas/react-native-web

Proposal: Different heading levels

What are you talking about?

JakeDawkins

comment created time in a month

issue commentnecolas/react-native-web

CSS is generated differently for the same code, but on different components

Seems to work fine with either import if you use version 0.12.2

tstankevicius

comment created time in a month

issue commentnecolas/react-native-web

when <image> component resizeMode is center or repeat, backgroundSize is not right

The issue template is there for a reason, so please fill it out or I will close this. Thanks

laszhiai

comment created time in a month

more