Comment out React Native's use of non-standard `done()` method, which
isn't available on `async` functions even though it is polyfilled for
the global Promise.
The previous incarnation of this fix would cancel clicks that bubble up
to elements like ScrollViews, with undesired impact on child element
events. Instead, limit the hack to elements with accessibilityRole=link.
Fix#985
Even on high DPI screens, browsers can round sub-pixel values down to
`0`. This causes hairlineWidth borders/heights/etc not to be rendered.
Revert `hairlineWidth` value back to `1`.
Certain HTML elements have a default behaviour (e.g., link navigation)
that can only be prevented in the `click` event handler. The responder
event system doesn't make use of `click` and no callbacks have access to
the `click` event. To prevent unwanted default behaviour, and emulate
the behavior in React Native, the `click` callback will automatically
call `preventDefault()` when the responder system is being used.
The result is that components like `Touchable*` that are overloaded as
web links need to explicitly trigger the link navigation, e.g.,
```
<TouchableOpacity
accessibilityTraits="link"
href={href}
onPress={(e) => {
Linking.openUrl(href);
}}
/>
```
Fix#970
Avoiding unknown property warnings from React DOM. Many components
within and build upon React Native do not filter their own properties
and spread them into View. It is expected that React Native ignore these
properties.
Fix#898
A large number of layout measurements (and their corresponding tasks)
can block the main thread. Make the work async and try to keep the UI
responsive to user input while the layout work is taking place.
Chrome heavily throttles `requestIdleCallback` while scrolling, which
causes delays in image loading. Instead, use the relatively new
`decode()` API to decode the image off the main thread and prevent jank,
without delaying loading itself.
Fix#764
Ref #759
Make sure all the CommonJS modules can be required as normal, rather
than needing to be suffixed with `.default` due to being compiled from
ES modules.
Webpack doesn't like mixing `import` with `module.exports`, and some of
the dynamic requires cannot be safely used in both an ES and CommonJS
module environment without looking for `.default` each time.
React 16.4 includes the necessary ResponderEventPlugin dependencies and
makes some changes to the event internals that causes a breaking change.
This patch fixes rendering with react-dom@16.4 while preserving
backward-compatibility with earlier versions of react-dom.
Close#908
ES modules are the default package export. Commonjs modules are exported
from 'dist/cjs'. Modern bundlers like webpack can consume ES modules.
The addition of the `sideEffects:false` to the `package.json` helps
webpack tree-shaking modules.
Browsers dispatch mouse events after touch events:
https://developer.mozilla.org/en-US/docs/Web/API/Touch_events/Supporting_both_TouchEvent_and_MouseEvent
There have been several attempts to avoid this behaviour affecting the
ResponderEvent system. The previous approach of cancelling the event in
the `onResponderRelease` event handler can end up cancelling other
events that are expected, e.g., `focus`.
Instead, this patch changes the `ResponderEventPlugin.extractEvents`
function to filter the mouse events that occur a short time after a
touch event. (It's assumed that people will not be clicking a mouse
within a few hundred ms of performing a touch.) This allows the
ResponderEvent system to function as expected and leaves other callbacks
to fire as they would be expected to in React DOM, i.e., both
`onTouchStart` and `onMouseDown` will be called following a touch start.
Fix#835Fix#888Fix#932Close#938
Ref #802
Focus-based UIs can use out-of-tree focus algorithms to manage focus
using remote control devices. This patch marks DOM nodes that React
Native considers "focusable".
Close#827
onLayout is called after the component is mounted to the DOM. This makes
both the fallback and ResizeObserver code path behave the same as React
Native.
Fix#911Fix#941Close#939
CSP policy may prevent writing to `<style>` unless a `nonce` attribute
is set. This change makes that possible by moving the modality-related
styles into the main style sheet, and allowing additional props to be
provided to the `<style>` element when rendering on the server. For
example:
```
const { element, getStyleElement } = AppRegistry.getApplication('App');
const html = renderToString(element);
const css = renderToStaticMarkup(getStyleElement({ nonce }));
```
React Native doesn't have `NetInfo.isConnected.getConnectionInfo()`.
This was incorrectly added to the API while updating the main `NetInfo`
API.
Close#937
Reverts #648 as browsers are inconsistent in how they handle
'flex-basis', so this hack isn't effective. And React has no support for
using '!important' in inline styles.
Fix#798
If the component provided to 'createElement' is not a string alias for a
DOM component, it will no longer attempt to replace that component with
a DOM component inferred from the 'accessibility{Component,Role,Traits}'
prop.
Fix#895
Calculate `location{X,Y}` in the same way for both touch and mouse
events. Also defer the call to `getBoundingClientRect` to avoid
unnecessary DOM queries when the data is not used.
Don't use 'font' shorthand internally to reset font styles, as the
framework's internal styles may be injected after application styles,
causing 'font' to override 'font-*' properties.
Fix#881
Allow 'System' to be used in a font-family stack, e.g., "Noto, System".
Update the 'System' font stack to include "system-ui", which is the
latest keyword for system fonts.
Defer to the browser's native handling of 'blur' and 'focus'; directly
update the internal state of TextInputState. Fixes an issue with
preserving focus when the tab is backgrounded.
Also ensure the TextInputState is correctly set when a component mounts.
When 'autoFocus' is true, 'onFocus' can be called before the internal
ref is set.
Fix#880
`Linking` no longer uses an iframe hack to add 'noopener' support to
older Safari. Instead it relies on browsers having support for
'noopener'.
Fix#837Close#846
The I18nManager can now disable the automatic BiDi flipping of
left/right, which caused the Switch layout to break in RTL mode. Change
the styles to use start/end.
Don't rewrite import paths for non-existent modules or types. They will
attempt to be imported from the package's main export. This change
currently requires a module map to be generated for the babel-plugin to
use. The map is automatically regenerated for any commit that alters the
entry file of react-native-web.
Fix#822
Events are now normalized within the responder system, so those handlers
don't need to be listed anymore. Recently added events (blur,
contextmenu, focus) are now also normalized.
Touch events can produce trailing mouse events, which cause unwanted
events to fire in the responder event system. This issue is avoided in
`Touchable` by cancelling the event in the responder release callback.
To fix the issue in other areas, like the PaneResponder, this hack is
moved into `createElement` and applied to event `onResponderRelease`
callback.
Fix#802
React Native for Web may use '!important' as part of the internal
resolving of styles. But user styles should never be allowed to include
'!important' in the value. Print a warning to the console when they do.
I18nManager supports `doLeftAndRightSwapInRTL` and
`swapLeftAndRightInRTL` to query and control the BiDi-flipping of
left/right properties and values. For example, you may choose to use
`end`/`start` for positioning that flips with writing direction, and
then disable `left`/`right` swapping in RTL so that `left` will always
be `left`.
The StyleSheet resolver cache must also account for the third "direction"
variant: RTL with no swapping of left/right.
Add support for new style properties and values that automatically
account for the writing direction (as introduced in React Native
0.51.0). The start/end variants are automatically resolved to match the
global writing direction, as defined by I18nManager.isRTL. Start/End
take precedence over Left/Right.
Adds support for the following properties:
* `borderTop{End,Start}Radius`
* `borderBottom{End,Start}Radius`
* `border{End,Start}Color`
* `border{End,Start}Style`
* `border{End,Start}Width`
* `end`
* `margin{End,Start}`
* `padding{End,Start}`
* `start`
And values:
* `clear: "end" | "start"`
* `float: "end" | "start"`
* `textAlign: "end" | "start"`
Jest recommends using 'runInBand' for Travis CI. It runs all tests
serially in the current process, rather than creating a worker pool of
child processes that run tests.
Updates the 'setValueForStyle' implementation to support style values
that contain "!important". This allows the 'flex{Basis,Grow,Shrink}'
values created by the style resolver to be applied. They currently use
the important priority as a work-around for browser-inconsistencies in
the 'flex' shorthand.
Upstream fix: https://github.com/facebook/react/pull/12181
Ref #798Close#813
Fix a regression introduced by "ResponderEvent event filtering"
9ee89bc7f7. Touchable press events were
firing twice after the event normalization was moved up into
'extractEvents'. The reason is:
1) events were previously not normalized throughout the responder system
2) once they were normalized, the fix introduced by a535c558d8 stopped working
3) because normalized nativeEvent did not include event data like 'cancelable'.
This patch adds more of the original nativeEvent fields to the
normalized event, so that React's synthetic event can return the correct
information for 'bubbles', 'cancelable', 'isDefaultPrevented()', etc.
Exclude middle, wheel, and right click mouse events from the responder
system. This fixes the Touchables incorrectly triggering 'onPress' in
response to these events.
Filter mousemove events in the 'extractEvents' methods, and check for
active touches rather than the length of the touch bank. This fixes the
PanResponder not functioning after the first touch in Firefox.
Fix#719Fix#729Close#804
This change also ensures that potential object-styles (user-provided or
placeholderTextColor) are group together at the end of the style array.
Fix#560
SSR was not working correctly. Styles would accumulate in the style
cache and the styles returned for each 'getApplication' call would not
represent the styles needed to render a given tree, but rather all the
styles needed to render every tree that has been rendered by that server
instance.
This is now fixed by reinitializing the style resolver after a call to
'getStyleSheet' on the server. The return type of
'AppRegistry.getApplication' is changed – { element, getStyleElement }.
The 'getStyleElement' function must be called after the component tree
has been rendered. Note that if 'getStyleElement' is not called for a
response, then its styles may leak into the next response's styles (but
will not affect the UX).
This patch also removes the 'StyleSheet.getStyleSheets' (web-only) API
and requires SSR to be done using 'AppRegistry.getApplication'.
Fix#778
Resolving styles at the same time as they are registered is problematic.
This work doesn't need to be complete until the moment a component is
rendered, rather than being done at startup.
The style resolver is reorganized to remove React Native style
registration, and contain all the stateful resolver logic (previously
partially found in NativeMethodsMixin).
Style registration is done in 'StyleSheet.create', and will subsequently
be decoupled from eager style resolution.
The stateful resolver is fully contained in the
ReactNativeStyleResolver. The options are removed from the resolver as
they aren't needed to implement the correct i18n-ified styles. This
functionality is also covered by unit tests now.
pointerEvents styles are now always resolved to classNames, even if
working with dynamic styles. In practice, inline-style pointerEvents
have always resolved to classNames as an accident of 'createElement'
registering each pointerEvent style. However, this patch ensures that
the style resolver produces correct output, and introduces the basic
mechanism by which 'placeholderTextColor' (for which classNames cannot
be precomputed) could function similarly.
WebStyleSheet handles injecting CSS rules and returning the style
sheet's text content.
All CSS, including the reset, is now added using WebStyleSheet and the DOM API 'insertRule'.
Browsers will throw a parse error on unrecognized vendor-prefixes in
selectors, so rules with unsafe selectors are wrapped in '@media all {}'
before being passed to 'insertRule'. (This will be relevant when
attempting to support 'placeholderTextColor'. And it is a way to
batch-insert rules with a single call to 'insertRule'.)
The html tag 'font-family' CSS reset is removed as it's not needed.
This change to 'benchmarks' reports the time taken to perform a forced
layout after mounting the tree. Adding a forced layout to the stress
tests can surface how different approaches to styling may affect browser
render timings.
The total time displayed is now the sum of "scripting time" (previously
total time) and "layout time". The layout time is a reflection of the
time the browser takes to perform a style recalculation and relayout of
the document.
The Benchmark component now has a 'forceLayout' prop. When it is 'true'
a forced layout is triggered on componentDidUpdate. The time taken is
added to the sample's timing data.
Reorganizes and rewrites the benchmarks. Each implementation is now
self-contained and the benchmarks can be run using a GUI. The benchmarks
themselves have been changed so that individual tests render over a
shorter time frame and more samples are taken.
This patch introduces a limit on how long image loading is deferred, and
mitigates an issue with lengthy delays to 'requestIdleCallback' in the
Chrome browser.
Fix#759
This allows IDE plugins that rely on prettier config (introduced in
[1.6.0](https://github.com/prettier/prettier/pull/2434)) to detect
prettier and run it automatically with the correct config.
Close#757
The patch reorganizes the top-level module division of the
'react-native-web' project.
Previously, the package's exported modules were found in:
apis/*/index.js
components/*/index.js
components/*/*.js
modules/*/index.js
propTypes/*.js
Now, each part of the exported API is found in:
exports/*/index.js
And anything not directly part of the exported API is found in:
modules/*/index.js
vendor/*/index.js
Close#748
Rearrange the benchmark code so that each implementation is
self-contained. Adds the SierpinskiTriangle case that 'emotion'
introduced in their fork of the 'react-native-web' benchmarks. And make
it possible to run benchmarks on a per-library basis.
Adopt the structure of the React README and improve the contribution
guidelines to include Facebook's CoC. Fix various links following the
move to a monorepo.
Introduces a monorepo structure, relies on yarn workspaces to share
dependencies, and lerna for syncing versions across the monorepo.
* Create 2 workspaces:
'packages' and 'website'
* Create 2 public packages:
'babel-plugin-react-native-web' and 'react-native-web'
* Create 1 private package:
'benchmarks'
A simple release script runs the tests, builds the package assets,
increments the package version numbers, git commits and tags, publishes
the package to npm, pushes the changes to github, and releases the
website update.
Close#657
* Update all packages.
* Remove 'react-native-stylesheet'; since React 16 it is equivalent in
performance to using the full 'react-native-web' View implementation.
* Remove 'styled-components/primitives'; it's as slow as
'styled-components'.
* Record latest benchmark results and hardware.
The object returned by 'ReactDOM.findDOMNode' when rendered by
'react-test-renderer' doesn't match the DOM API for an element. Only
attempt to bind the listener if 'addEventListener' is present on the
object.
Fix#720
Problem:
The default border width should be '0px', but setting a border width
value to 'null' would override the default and result in no border width
being applied to the element. This could cause unwanted user agent
styles to be applied.
Solution:
createReactDOMStyle now replaces border width values of 'null' with
'0px'.
Fix#697
Replace 'react-native' imports with direct imports to the relevant
module within 'react-native-web'. Follow up task is to also rewrite
'react-native-web' imports from the entry file to become direct imports
(reduces bundle size).
Close#608
Match React Native's default font-size for Text, and use the system font
stack by default. Nested Text elements will inherit font styles from
their parent Text.
When a Touchable component returns 0 for
`touchableGetHighlightDelayMS()` the mixin may occasionally try to
detect if the press event occurred on the hit area before the hit area
has been determined. Clearing out this value ensures that
`positionOnActivate` is recalculated before that takes place.
Close#586
Add support for more key combinations that only fire 'keydown' React DOM
events. And allow users to call 'preventDefault', etc., on the event.
Fix#567Close#582
Problem:
Numeric values are suffixed with 'px', unless the property supports
unitless values. However, vendor prefixed properties were ignored
resulting in invalid CSS values for properties like
'-webkit-flex-shrink'.
Solution:
Apply the upstream solution from React, which includes vendor prefixed
properties in the "unitless number" map. Also build a custom vendor
prefixer to ensure adequate browser support (i.e., Safari 7 and older
Chrome).
According to MDN, "touch-action:manipulation" enables "…panning and
pinch zoom gestures, but disables additional non-standard gestures such
as double-tap to zoom. Disabling double-tap to zoom removes the need for
browsers to delay the generation of click events when the user taps the
screen."
The recommendation from the Chrome team is to use 'touch-action' to
disable scrolling (via touch modality) when passive event listeners are
in use.
Close#563
Problem:
Although 'Touchable' supports basic keyboard usage, it doesn't support
delays or interaction via the Space key.
Solution:
Extend the 'Touchable' mixin to better support keyboard interactions.
All touchable callbacks and delays are now supported when interacted
with via a keyboard's Enter and Space keys (as would be expected of
native 'button' elements). However, events are not normalized to mimic
touch events.
Minor upstream changes to the Touchables in React Native are also
included.
Problems:
HTML's native <button> tag doesn't support flex styling in all browsers,
causing layout bugs. And buttons or links created by "createDOMElement"
(without an accessibility role) do not have the correct props.
Solution:
The "button" role is rendered to a "div[role=button]" that is focusable
and responds to the same keyboard events as a native button. A native
button can still be rendered using "createDOMElement".
Make "createDOMProps" aware of the component context to ensure style
resets and other props are correctly applied when an accessibility role
is not defined.
Additionally:
This patch also adds a new "label" role to support accessible forms.
It maps to a native label element.
Close#241
Problem:
The content of style sheets was being set as a child of 'style', which
causes React to escape the content. This meant that the pointer-events
selectors were broken (">" became ">") and pointer-events were
disabled for the entire server-rendered document.
Solution:
Use 'dangerouslySetInnerHTML' to avoid the CSS text being escaped.
Fix#546
When rendered on the server, images now include the 'src' and will be
downloaded by the browser rather than waiting for the client-side JS to
initiate image loading.
Fix#543
Include modifier keys in the 'nativeEvent'. This allows keyboard
shortcuts such as "Shift+Enter" to be implemented for submiting text
input content when the modality is keyboard + mouse rather than touch.
The previous attempt at a fix (88ddeca0c6)
didn't account for 'View' handling the 'flexBasis' reset (as it used to
with 'flexShrink'). This patch moves flex style resolution into the DOM
style resolver.
Fix#426
Using requestAnimationFrame while registering styles/classes slows down
iOS/Mobile Webkit. By removing it, it's possible that we add a little
bit of overhead, slowing down current cycles, but should be mostly
unnoticed.
Fix#517
This changes the return value of 'getApplication' so that the
application element and stylesheets are all available as React elements.
Also changes StyleSheet's 'renderToString' to 'getStyleSheets'.
Fix#504
'touchstart' and 'touchmove' listeners added to the document will
default to 'passive:true' (so that calls to 'preventDefault' will be
ignored). Source https://www.chromestatus.com/features/5093566007214080
To support 'scrollEnabled', listeners are bound to the underlying
ScrollView DOM node to avoid being passive.
Fix#477
createDOMProps: avoid using default parameters as Babel compiles the
function to calls using 'arguments', which Chrome flags as a deopt.
Replace 'typeof' calls with slightly faster calls to constructor.
onLayout: batch layout measurements in a single requestAnimationFrame.
Close#490
Fixes dozens of Flow errors; adds type annotations; marks more files for
Flow type checking. Fixes a bug in 'AppState'.
15 Flow errors remaining. Several React Native files are still not type
checked (e.g., PanResponder, Touchables)
Ref #465
Ensure that 'setNativeProps' doesn't try to i18n flip styles that have
already been flipped. This is hacked into the current design.
Registering both RTL and LTR styles is not implemented yet either.
1. Rename 'expandStyle' to 'createReactDOMStyle'
2. Move use of 'i18nStyle' out of 'createReactDOMStyle' to decouple the
two transformations.
3. Move the style property resolvers into 'createReactDOMStyle'
The 'style' object of an HTML node is a 'CSSStyleDeclaration'. Use the
'CSSStyleDeclaration' API to copy the inline styles, rather than
treating it like a plain object. This avoids errors that were resulting
from indices and property names being used a key-value pairs in the
resulting style copy.
Fix#460
Ref #454
Updates the relevant babel plugin, which now replaces component
propTypes with an empty object, avoiding the majority of potential
runtime errors related to this transform.
Fix#423
Inline styles are preserved when using 'setNativeProps'. Adds unit tests
for the resolution logic required by 'setNativeProps'/'resolveStateful'
in a DOM context.
Fix#439
Custom styles resets for the 'a', 'button', and 'ul' DOM elements are
now conditionally applied by 'createDOMProps'. This reduces the number
of classes on most Views and ensures that 'createDOMElement' (not just
'View' or 'Text') generates views with their styles reset.
* Change 'accessible' to align with React Native.
* Add support for 'importantForAccessibility'.
* Stop event propagation for keyboard-activated Touchables (nested
Touchables now respond the same as when touch-activated).
* Fix whitespace layout of nested Text elements.
* Use 'div' for Text to improve TalkBack grouping.
* Rewrite accessibility docs.
Close#382Fix#408
Maintain a record of loaded images. If an image has already been loaded,
bypass the JS loading logic and render it immediately. This prevents
flashes of placeholder state when moving between screens or items in a
virtualized list.
Shim the 'hitSlop' prop using a positioned element to extend the size of
a View's touch target without changing layout. Unlike the native
implementation, the touch target may extend past the parent view bounds.
1. If no 'accessibilityRole' is set, fallback to looking for 'button'
role in the equivalent native props. This helps improve accessibility of
button-like components authored without the web platform in mind.
2. Ensure button context is properly inherited.
3. Add 'appearance:none' to DOM button elements to enable better styling
support in Safari
Fix#378
Moves event normalization and the ResponderEventPlugin injection from
'View' to 'createDOMElement'.
The 'react-native-web/lite' variant is removed from the performance
directory as the implementation is not substantially different.
Micro-optimizations to marginally narrow the performance gap to
css-modules.
The 'onChangeVisibleRows' and 'onEndReachedThreshold' props should not
be passed to 'ScrollView', as it results in React warnings about unknown
props on the underlying DOM node.
Close#383
* HTML class names are now hashes of the corresponding declaration
* Simplifies 'setNativeProps' logic
* Fixes use of server-rendered style sheet
* Fixes duplicate insertion of style sheets with hot-reloading
No significant change to the benchmark results
1. Register the 'pointerEvents' styles to enable memoization
2. Don't flatten styles in render; move flex reset to 'expandStyle'
Reduces benchmark render times by ~10% on early 2011 MacBook Pro
1. Fix auto-flipping of styles
The StyleRegistry didn't account for LTR/RTL when caching the results of
style resolution. The 'writingDirection' style is no longer flipped; no
clear use case for it.
2. Remove experimental '$noI18n' style prop suffix
This feature is essentially unused, and less likely to be used with the
introduction of 'dir=auto' on 'Text'. Removing also marginally improves
render performance.
Fixes V8 "deopt" warning: "Bad value context for arguments value".
This deopt was caused by the babel-compiled output of the ES6 argument
default value for 'rnProps':
var t = arguments.length > 1 && void 0 !== arguments[1]
? arguments[1]
: l
Not relying on ES6 default arguments avoids the function 'deopt'.
The 0.0.69 release introduced a regression in UIManager's measurement
calculations.
Using `offset` properties returns the offset relative to the closest
positioned ancestor. Make `getRect` iterate over the ancestor chain.
Fix#341Close#345
Since styles are set using both class names and inline styles,
'setNativeProps' needs an additional resolving step that accounts for
the pre-existing state of RN-managed styles on the DOM node.
Fix#321
Fixes a regression introduced by
5db300df35
The `perspective` function is distinct from the `perspective` property.
This patch reverts the regression and adds support for `perspective`,
`perspectiveOrigin`, and `transformOrigin`.
Fix#208
The 'createDOMElement' function wasn't pulling 'style' out of the
props. A change to the logic that sets DOM props meant that if
'StyleRegistry.resolve' didn't return a 'style' object, the React Native
styles would be passed through to the underlying DOM node.
Fix#315
Update to React@15.4. The 'EventConstants' module no longer exports a
key-mirror, which was preventing the 'ResponderEventPlugin' from working
as it did with React@15.3.
Close#255
Re-build ListView from the core react-native component, to get better
feature parity
Ensure lists with small initialListSize render correctly
Changes as requested via PR
Adds support for opening external URLs in a new tab/window. Includes
patches to 'Text' to improve accessibility and 'createDOMElement' to
improve external link security.
Fix#198
Fixes a regression introduced in the following commit to avoid directly
depending on the 'react-dom' entry file:
d65c92eea9
Injecting ReactDefaultInjection adds ~25 KB back to the UMD build.
Fix#263
Builds on the exclusion of PropTypes from production builds:
- Remove 'lodash' and use smaller modules for equivalent functions.
- Remove use of some unnecessary Facebook utilities.
- Remove 'TouchableBounce'; it isn't part of React Native anymore.
- Remove stray import of 'react-dom/server'.
- Exclude 'StyleSheetValidation' from production.
Measuring the UMD build (gzip)…
Before: ~100KB
After: ~60KB
This patch changes TextInput to use DOM inputs directly, rather than
trying to reimplement 'placeholder'. Removes support for
'placeholderTextColor'.
Fix#54Fix#224Fix#229Fix#235Fix#253
The use of 'max-height:100%' on the inner image can cause extremely poor
render performance in Safari. Remove the inner image and simplify
`Image` to use a single view. This fixes the following additional bugs:
Fix#202Fix#226
This looks more like a traditional OS-level activity indicator.
The design of the Android activity indicator hasn't worked very well for
us on Web. The main problem is that if the main thread is locked, the
indicator (even if it's a gif) will stop animating and can look really
bad. This implementation looks like an activity indicator even when it
isn't animating.
'Switch' on Web can support custom sizes and colors. To do so,
Web-specific propTypes are introduced: `trackColor`, `thumbColor`,
`activeTrackColor`, and `activeThumbColor`.
This patch removes several avoidable uses of `setState`, only
re-rendering the `Image` when necessary.
It also fixes a style prop warning for `resizeMode`, which was not being
removed in development due to the use of `Object.freeze` when styles are
registered.
Close#116
Add `I18nManager` API from React Native. This can be used to control
when the app displays in RTL mode.
Add `$noI18n` property suffix for properties that StyleSheet will
automatically flip. This can be used to opt-out of automatic flipping on
a per-declaration basis.
Scrolling is broken by the patch that adds ResponderEvent support for
multi-input devices: 6a9212df40
By calling 'preventDefault' on every touch event, scroll events were
cancelled. This patch shifts the responsibility for calling
'preventDefault' to the 'View' event handler normalizer, and only on
touch events within the Responder system.
Fix#175
Certain devices support both mouse and touch inputs. The Responder
plugin needs to support this. Previously it would specific touch-only
dependencies if touch support was detected.
The recommended way to prevent browsers firing mouse events after touch
events is to call `preventDefault` on the touch event. This may be
problematic if/when `View` and `Touchable` support URLs/hrefs.
Fix#169
View's default styles include `maxWidth:"100%"` to fix a specific
flexbox bug in Internet Explorer. But it's not needed for the default View
layout and it limits the width of absolutely positioned elements (a
bug).
First patch: 41159bcb10
@chriskjaer mentioned that changing from 'div' to 'span' introduces
different validation errors, e.g., <span><form>a</form></span>.
This patch uses 'context' to switch to a 'span' element if a 'View' is
being rendered within a 'button' element.
There are certain contexts where using a `div` is invalid HTML and may
cause rendering issues. Change the default element created by
`createReactDOMComponent` to a `span`.
**Appendix**
The following HTML results a validator error.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>test</title>
<button><div>a</div></button>
Error: Element `div` not allowed as child of element `button` in this
context.
Source: https://validator.w3.org/nu/#textarea
This fixes several issues with 'StyleSheet' and simplifies the
implementation.
1. The generated style sheet could render after an apps existing style
sheets, potentially overwriting certain 'html' and 'body' styles. To fix
this, the style sheet is now rendered first in the document head.
2. 'StyleSheet' didn't make it easy to render app shells on the server.
The prerendered style sheet would contain classnames that didn't apply
to the client-generated style sheet (in part because the class names
were not generated as a hash of the declaration). When the client
initialized, server-rendered parts of the page could become unstyled. To
fix this 'StyleSheet' uses inline styles by default and a few predefined
CSS rules where inline styles are not possible.
3. Even with the strategy of mapping declarations to unique CSS rules,
very large apps can produce very large style sheets. For example,
twitter.com would produce a gzipped style sheet ~30 KB. Issues related
to this are also alleviated by using inline styles.
4. 'StyleSheet' didn't really work unless you rendered an app using
'AppRegistry'. To fix this, 'StyleSheet' now handles injection of the
DOM style sheet.
Using inline styles doesn't appear to have any serious performance
problems compared to using single classes (ref #110).
Fix#90Fix#106
Add 'createReactStyleObject' to transform a React Native style object
into a React DOM-compatible style object. This is also needed to ensure
that 'setNativeProps' works as expected.
Animated uses 'setNativeProps' to update styles. This mutates the DOM
without using React. But the code path was not adding 'px' units to
transform values and browsers were ignoring the style.
Fix#129
The previous implementation relied on a buggy sorting strategy. It could
result in shortform properties replacing the values set for longform
properties. This patch avoids expanding shorthand values to a longform
property if it declared in the original style object.
Fix#141
Fix the layout of placeholder text and shift focus to the DOM input when
`TextInput` is clicked or pressed.
Thanks to @tuckerconnelly and @Dremora.
Fix#138Fix#119Close#137
Depend on 'animatedjs/animated' for the Animation implementation. This
patch also replaces 'es6-set' with a small shim to reduce impact on
production bundle size.
Fix#95
React 15 has no way to handle fallback CSS values (for example, vendor
prefixed 'display:flex' values) in inline styles. This patch drops all
fallback values for inline styles at the cost of regressing browser
support (those without standard flexbox support will not layout React
Native components correctly).
Fix#131
'CoreComponent' creates new component instances and clutters the React
component tree during debugging. This patch converts 'CoreComponent' to
a simple function that creates a native web element.
This patch also includes a fix for use of the 'flexShrink' style on
'View'.
Fix#140
Match the behavior of react-native for iOS and Android
The browser treats the 'line-height' CSS property as an 'em' value,
while react-native treats it as pixel unit (or device unit, which should
be 'px' for the web), this issue is causing the 'TextInput' component to
be sized incorrectly.
Close#142
**Problem**
StyleSheet's implementation was overly complex. It required
`flattenStyle` to use `expandStyle`, and couldn't support mapping React
Native style props to CSS properties without also exposing those CSS
properties in the API.
**Response**
- `flattenStyle` is concerned only with flattening style objects.
- `StyleSheetRegistry` is responsible for registering styles, mapping
the React Native style prop to DOM props, and generating the CSS for
the backing style element.
- `StyleSheetRegistry` uses a simpler approach to caching styles and
generating style sheet strings. It also drops the unobfuscated class
names from development mode, as the React Dev Tools can provide a
better debugging experience (pending a fix to allow props/styles to be
changed from the dev tools).
- `StyleSheet` will fall back to inline styles if it doesn't think a
style sheet has been rendered into the document. The relationship is
currently only implicit. This should be revisited.
- `StyleSheet` exports `renderToString` as part of the documented API.
- Fix processing of `transformMatrix` and add tests for
`processTransform`.
- Fix `input[type=search]` rendering in Safari by using `display:none`
on its pseudo-elements.
- Add support for `textDecorationLine` and `textAlignVertical`.
- Note the `View` hack to conditionally apply the `flex-shrink:0` reset
from css-layout. This is required because React Native's approach to
resolving `style` is to give precendence to long-hand styles
(e.g., `flexShrink`) over short-hand styles (e.g., `flex`). This means
the `View` reset overrides any `flex:1` declaration. To get around
this, `flexShrink` is only set in `View` if `flex` is not set.
TouchableHighlight didn't preserve its original 'backgroundColor' after
pressOut. This was caused by the inactive background style (transparent)
being applied as an inline style, and so not merging with the original
prop style. The patch sets inactive 'backgroundColor' to 'null' so as to
remove the inline style and render the backgroundColor from props.
Fix#98
There are various flexbox bugs that can cause views to grow beyond the
vertical or horizontal bounds of their container. The width and height
styles avoid most of them manifesting.
**Problem**
Browsers tend to fire both touch and mouse events when touch is
supported. This causes touchables to fire responder callbacks twice.
For example, 'TouchableOpacity' will animate the opacity twice in
response to a touch.
**Response**
If a browser supports touch, don't include the mouse events as
dependencies of the responder events. This is not ideal, as some devices
support both touch and mouse interactions. This will need to be
revisited.
A small error from referencing the wrong value caused prefixed values to
be dropped. The patch also updated inline-style-prefixer and turns all
vendor prefixes on by default. This provides the option to drop all the
caniuse and bowser data that inline-style-prefixer uses (probably by
forking the project and removing those dependencies).
Fix#51
According to the current proposal, semicolons are required. Babel 6.4
was updated to require them (see github.com/babel/babel/pull/3225). This
is required in order to fix the build -- master will be red on Travis as
soon as the build is rerun because it will pick up the latest Babel
parser.
Quick-fix for code-splitting support by updating the rendered style
sheet in place. Reduce the API to `create`, as the rest is now internal
to the framework.
Fix#34
This change adds the react-dom methods to the main export, since this is
a Web-only environment (React Native does something similar). It
augments the default render methods in order to move style sheet
management under the control of the library (necessary for
code-splitting support).
Relates to #52
Without access to the Shadow DOM pseudo-elements, the placeholder
behaviour needs to be reimplemented.
Update to match React Native's modification to `TextInput` to include
all `View` props and use the `Text` style props.
Fix#12Fix#48
Some files were not shown because too many files have changed in this diff
Show More
Reference in New Issue
Block a user
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
