diff --git a/docs/Basics-Component-ListView.md b/docs/Basics-Component-ListView.md index a269ee46c8..5e456725fc 100644 --- a/docs/Basics-Component-ListView.md +++ b/docs/Basics-Component-ListView.md @@ -4,7 +4,7 @@ title: ListView layout: docs category: The Basics permalink: docs/basics-component-listview.html -next: basics-dimensions +next: basics-network --- On mobile devices, lists are a core element in many applications. The [`ListView`](/react-native/docs/listview.html#content) component is a special type of [`View`](/react-native/docs/basics-component-view.html) that displays a *vertically* scrolling list of changing, but similarly structured, data. diff --git a/docs/Basics-Component-View.md b/docs/Basics-Component-View.md index 0a6a728f9f..52b83bdd89 100644 --- a/docs/Basics-Component-View.md +++ b/docs/Basics-Component-View.md @@ -4,7 +4,7 @@ title: View layout: docs category: The Basics permalink: docs/basics-component-view.html -next: basics-component-textinput +next: style --- A [`View`](/react-native/docs/view.html#content) is the most basic building block for a React Native application. The `View` is an abstraction on top of the target platform's native equivalent, such as iOS's `UIView`. diff --git a/docs/Basics-IntegrationWithExistingApps.md b/docs/Basics-IntegrationWithExistingApps.md index 8c771024ad..05d95838e4 100644 --- a/docs/Basics-IntegrationWithExistingApps.md +++ b/docs/Basics-IntegrationWithExistingApps.md @@ -4,7 +4,7 @@ title: Integration With Existing Apps layout: docs category: Guides permalink: docs/integration-with-existing-apps.html -next: style +next: colors ---
diff --git a/docs/Basics-Layout.md b/docs/Basics-Layout.md index 767917563b..275d210d56 100644 --- a/docs/Basics-Layout.md +++ b/docs/Basics-Layout.md @@ -4,7 +4,7 @@ title: Layout layout: docs category: The Basics permalink: docs/basics-layout.html -next: basics-network +next: basics-component-textinput --- A component can specify the layout of its children using the flexbox algorithm. Flexbox is designed to provide a consistent layout on different screen sizes. diff --git a/docs/Basics-Style.md b/docs/Basics-Style.md new file mode 100644 index 0000000000..5f3ba09a45 --- /dev/null +++ b/docs/Basics-Style.md @@ -0,0 +1,48 @@ +--- +id: style +title: Style +layout: docs +category: The Basics +permalink: docs/style.html +next: basics-dimensions +--- + +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 like `backgroundColor` instead of like `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. + +As a component grows in complexity, it is often cleaner to use `StyleSheet.create` to define several styles in one place. Here's an example: + +```ReactNativeWebPlayer +import React, { Component } from 'react'; +import { AppRegistry, StyleSheet, Text, View } from 'react-native'; + +class LotsOfStyles extends Component { + render() { + return ( + + just red + just bigblue + bigblue, then red + red, then bigblue + + ); + } +} + +const styles = StyleSheet.create({ + bigblue: { + color: 'blue', + fontWeight: 'bold', + fontSize: 30, + }, + red: { + color: 'red', + }, +}); + +AppRegistry.registerComponent('AwesomeProject', () => LotsOfStyles); +``` + +One common pattern is to make your component accept a `style` prop which in +turn is used to style subcomponents. You can use this to make styles "cascade" they way they do in CSS. diff --git a/docs/Style.md b/docs/Style.md deleted file mode 100644 index 53fcb6eeae..0000000000 --- a/docs/Style.md +++ /dev/null @@ -1,102 +0,0 @@ ---- -id: style -title: Style -layout: docs -category: Guides -permalink: docs/style.html -next: colors ---- - -React Native doesn't implement CSS but instead relies on JavaScript to let you style your application. This has been a controversial decision and you can read through those slides for the rationale behind it. - - - -## Declare Styles - -The way to declare styles in React Native is the following: - -```javascript -var styles = StyleSheet.create({ - base: { - width: 38, - height: 38, - }, - background: { - backgroundColor: '#222222', - }, - active: { - borderWidth: 2, - borderColor: '#00ff00', - }, -}); -``` - -`StyleSheet.create` construct is optional but provides some key advantages. It ensures that the values are **immutable** and **opaque** by transforming them into plain numbers that reference an internal table. By putting it at the end of the file, you also ensure that they are only created once for the application and not on every render. - -All the attribute names and values are a subset of what works on the web. For layout, React Native implements [Flexbox](docs/flexbox.html). - -## Using Styles - -All the core components accept a style attribute. - -```javascript - - -``` - -They also accept an array of styles. - -```javascript - -``` - -The behavior is the same as `Object.assign`: in case of conflicting values, the one from the right-most element will have precedence and falsy values like `false`, `undefined` and `null` will be ignored. A common pattern is to conditionally add a style based on some condition. - -```javascript - -``` - -Finally, if you really have to, you can also create style objects in render, but they are highly discouraged. Put them last in the array definition. - -```javascript - -``` - -## Pass Styles Around - -In order to let a call site customize the style of your component children, you can pass styles around. Use `View.propTypes.style` and `Text.propTypes.style` in order to make sure only styles are being passed. - -```javascript -var List = React.createClass({ - propTypes: { - style: View.propTypes.style, - elementStyle: View.propTypes.style, - }, - render: function() { - return ( - - {elements.map((element) => - - )} - - ); - } -}); - -// ... in another file ... - -``` -## Supported Properties - -You can checkout latest support of CSS Properties in following Links. - -- [View Properties](docs/view.html#style) -- [Image Properties](docs/image.html#style) -- [Text Properties](docs/text.html#style) -- [Flex Properties](docs/flexbox.html#content) -- [Transform Properties](docs/transforms.html#content)