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