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