diff --git a/docs/Colors.md b/docs/Colors.md index d7831eef1d5..19cf27b7b69 100644 --- a/docs/Colors.md +++ b/docs/Colors.md @@ -8,22 +8,37 @@ next: images previous: integration-with-existing-apps --- -The following formats are supported: +Components in React Native are [styled using JavaScript](docs/styles.html). Color properties usually match how [CSS works on the web](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value). - - `'#f0f'` (#rgb) - - `'#f0fc'` (#rgba) - - `'#ff00ff'` (#rrggbb) - - `'#ff00ff00'` (#rrggbbaa) - - `'rgb(255, 255, 255)'` - - `'rgba(255, 255, 255, 1.0)'` - - `'hsl(360, 100%, 100%)'` - - `'hsla(360, 100%, 100%, 1.0)'` - - `'transparent'` - - `'red'` - - `0xff00ff00` (0xrrggbbaa) +### Red-green-blue +React Native supports `rgb()` and `rgba()` in both hexadecimal and functional notation: -For the named colors, React Native follows the [CSS3 specification](http://www.w3.org/TR/css3-color/#svg-color): +- `'#f0f'` (#rgb) +- `'#ff00ff'` (#rrggbb) + +- `'rgb(255, 0, 255)'` +- `'rgba(255, 255, 255, 1.0)'` + +- `'#f0ff'` (#rgba) +- `'#ff00ff00'` (#rrggbbaa) + +### Hue-saturation-lightness + +`hsl()` and `hsla()` is supported in functional notation: + +- `'hsl(360, 100%, 100%)'` +- `'hsla(360, 100%, 100%, 1.0)'` + +### `transparent` + +This is a shortcut for `rgba(0,0,0,0)`: + +- `'transparent'` + +### Named colors + +You can also use color names as values. React Native follows the [CSS3 specification](http://www.w3.org/TR/css3-color/#svg-color): - aliceblue (#f0f8ff) - antiquewhite (#faebd7) diff --git a/docs/Style.md b/docs/Style.md index 73e499b97fc..609a5ee1df3 100644 --- a/docs/Style.md +++ b/docs/Style.md @@ -8,7 +8,7 @@ next: height-and-width previous: state --- -With React Native, you don't use a special language or syntax for defining styles. You just style your application using JavaScript. All of the core components accept a prop named `style`. The style names and values usually match how CSS works on the web, except names are written using camel casing, e.g `backgroundColor` rather than `background-color`. +With React Native, you don't use a special language or syntax for defining styles. You just style your application using JavaScript. All of the core components accept a prop named `style`. The style names and [values](docs/colors.html) usually match how CSS works on the web, except names are written using camel casing, e.g `backgroundColor` rather than `background-color`. The `style` prop can be a plain old JavaScript object. That's the simplest and what we usually use for example code. You can also pass an array of styles - the last style in the array has precedence, so you can use this to inherit styles.