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
Nicolas Gallagher