'Switch' on Web can support custom sizes and colors. To do so,
Web-specific propTypes are introduced: `trackColor`, `thumbColor`,
`activeTrackColor`, and `activeThumbColor`.
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.
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
**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.
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
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
