diff --git a/releases/next/docs/flexbox.html b/releases/next/docs/flexbox.html index 2d642ea1118..97e935f0613 100644 --- a/releases/next/docs/flexbox.html +++ b/releases/next/docs/flexbox.html @@ -1,7 +1,7 @@ Layout with Flexbox
React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Apple TV)

Guides (Android)

components

APIs

Layout with Flexbox #

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.

You will normally use a combination of flexDirection, alignItems, and justifyContent to achieve the right layout.

Flexbox works the same way in React Native as it does in CSS on the web, with a few exceptions. The defaults are different, with flexDirection defaulting to column instead of row, and the flex parameter only supporting a single number.

Flex Direction #

Adding flexDirection to a component's style determines the primary axis of its layout. Should the children be organized horizontally (row) or vertically (column)? The default is column.

import React, { Component } from 'react'; import { AppRegistry, View } from 'react-native'; -class FlexDirectionBasics extends Component { +export default class FlexDirectionBasics extends Component { render() { return ( // Try setting `flexDirection` to `column`. @@ -13,11 +13,12 @@ class FlexDirectionBasics extends ); } }; - -AppRegistry.registerComponent('AwesomeProject', () => FlexDirectionBasics);

Justify Content #

Adding justifyContent to a component's style determines the distribution of children along the primary axis. Should children be distributed at the start, the center, the end, or spaced evenly? Available options are flex-start, center, flex-end, space-around, and space-between.

import React, { Component } from 'react'; + +// skip this line if using Create React Native App +AppRegistry.registerComponent('AwesomeProject', () => FlexDirectionBasics);

Justify Content #

Adding justifyContent to a component's style determines the distribution of children along the primary axis. Should children be distributed at the start, the center, the end, or spaced evenly? Available options are flex-start, center, flex-end, space-around, and space-between.

import React, { Component } from 'react'; import { AppRegistry, View } from 'react-native'; -class JustifyContentBasics extends Component { +export default class JustifyContentBasics extends Component { render() { return ( // Try setting `justifyContent` to `center`. @@ -34,11 +35,12 @@ class JustifyContentBasics extends ); } }; - -AppRegistry.registerComponent('AwesomeProject', () => JustifyContentBasics);

Align Items #

Adding alignItems to a component's style determines the alignment of children along the secondary axis (if the primary axis is row, then the secondary is column, and vice versa). Should children be aligned at the start, the center, the end, or stretched to fill? Available options are flex-start, center, flex-end, and stretch.

For stretch to have an effect, children must not have a fixed dimension along the secondary axis. In the following example, setting alignItems: stretch does nothing until the width: 50 is removed from the children.

import React, { Component } from 'react'; + +// skip this line if using Create React Native App +AppRegistry.registerComponent('AwesomeProject', () => JustifyContentBasics);

Align Items #

Adding alignItems to a component's style determines the alignment of children along the secondary axis (if the primary axis is row, then the secondary is column, and vice versa). Should children be aligned at the start, the center, the end, or stretched to fill? Available options are flex-start, center, flex-end, and stretch.

For stretch to have an effect, children must not have a fixed dimension along the secondary axis. In the following example, setting alignItems: stretch does nothing until the width: 50 is removed from the children.

import React, { Component } from 'react'; import { AppRegistry, View } from 'react-native'; -class AlignItemsBasics extends Component { +export default class AlignItemsBasics extends Component { render() { return ( // Try setting `alignItems` to 'flex-start' @@ -57,8 +59,9 @@ class AlignItemsBasics extends ); } }; - -AppRegistry.registerComponent('AwesomeProject', () => AlignItemsBasics);

Going Deeper #

We've covered the basics, but there are many other styles you may need for layouts. The full list of props that control layout is documented here.

We're getting close to being able to build a real application. One thing we are still missing is a way to take user input, so let's move on to learn how to handle text input with the TextInput component.

← PrevNext →

You can edit the content above on GitHub and send us a pull request!

React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Apple TV)

Guides (Android)

components

APIs

Height and Width #

A component's height and width determine its size on the screen.

Fixed Dimensions #

The simplest way to set the dimensions of a component is by adding a fixed width and height to style. All dimensions in React Native are unitless, and represent density-independent pixels.

import React, { Component } from 'react'; import { AppRegistry, View } from 'react-native'; -class FixedDimensionsBasics extends Component { +export default class FixedDimensionsBasics extends Component { render() { return ( <View> @@ -12,11 +12,12 @@ class FixedDimensionsBasics extends ); } } - -AppRegistry.registerComponent('AwesomeProject', () => FixedDimensionsBasics);

Setting dimensions this way is common for components that should always render at exactly the same size, regardless of screen dimensions.

Flex Dimensions #

Use flex in a component's style to have the component expand and shrink dynamically based on available space. Normally you will use flex: 1, which tells a component to fill all available space, shared evenly amongst each other component with the same parent. The larger the flex given, the higher the ratio of space a component will take compared to its siblings.

A component can only expand to fill available space if its parent has dimensions greater than 0. If a parent does not have either a fixed width and height or flex, the parent will have dimensions of 0 and the flex children will not be visible.

import React, { Component } from 'react'; + +// skip this line if using Create React Native App +AppRegistry.registerComponent('AwesomeProject', () => FixedDimensionsBasics);

Setting dimensions this way is common for components that should always render at exactly the same size, regardless of screen dimensions.

Flex Dimensions #

Use flex in a component's style to have the component expand and shrink dynamically based on available space. Normally you will use flex: 1, which tells a component to fill all available space, shared evenly amongst each other component with the same parent. The larger the flex given, the higher the ratio of space a component will take compared to its siblings.

A component can only expand to fill available space if its parent has dimensions greater than 0. If a parent does not have either a fixed width and height or flex, the parent will have dimensions of 0 and the flex children will not be visible.

import React, { Component } from 'react'; import { AppRegistry, View } from 'react-native'; -class FlexDimensionsBasics extends Component { +export default class FlexDimensionsBasics extends Component { render() { return ( // Try removing the `flex: 1` on the parent View. @@ -30,8 +31,9 @@ class FlexDimensionsBasics extends ); } } - -AppRegistry.registerComponent('AwesomeProject', () => FlexDimensionsBasics);

After you can control a component's size, the next step is to learn how to lay it out on the screen.

← PrevNext →

You can edit the content above on GitHub and send us a pull request!

React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Apple TV)

Guides (Android)

components

APIs

Style #

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.

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:

import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View } from 'react-native'; -class LotsOfStyles extends Component { +export default class LotsOfStyles extends Component { render() { return ( <View> @@ -24,8 +24,9 @@ const styles = StyleSheet: 'red', }, }); - -AppRegistry.registerComponent('LotsOfStyles', () => LotsOfStyles);

One common pattern is to make your component accept a style prop which in + +// skip this line if using Create React Native App +AppRegistry.registerComponent('LotsOfStyles', () => 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" the way they do in CSS.

There are a lot more ways to customize text style. Check out the Text component reference for a complete list.

Now you can make your text beautiful. The next step in becoming a style master is to learn how to control component size.

← PrevNext →

You can edit the content above on GitHub and send us a pull request!

React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Apple TV)

Guides (Android)

components

APIs

Using a ListView #

The ListView component displays a scrolling list of changing, but similarly structured, data.

ListView works well for long lists of data, where the number of items might change over time. Unlike the more generic ScrollView, the ListView only renders elements that are currently showing on the screen, not all the elements at once.

The ListView component requires two props: dataSource and renderRow. dataSource is the source of information for the list. renderRow takes one item from the source and returns a formatted component to render.

This example creates a simple ListView of hardcoded data. It first initializes the dataSource that will be used to populate the ListView. Each item in the dataSource is then rendered as a Text component. Finally it renders the ListView and all Text components.

A rowHasChanged function is required to use ListView. Here we just say a row has changed if the row we are on is not the same as the previous row.

import React, { Component } from 'react'; import { AppRegistry, ListView, Text, View } from 'react-native'; -class ListViewBasics extends Component { +export default class ListViewBasics extends Component { // Initialize the hardcoded data constructor(props) { super(props); @@ -24,8 +24,8 @@ class ListViewBasics extends } } -// App registration and rendering -AppRegistry.registerComponent('ListViewBasics', () => ListViewBasics);

One of the most common uses for a ListView is displaying data that you fetch from a server. To do that, you will need to learn about networking in React Native.

← PrevNext →

You can edit the content above on GitHub and send us a pull request!

React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Apple TV)

Guides (Android)

components

APIs

Using a ScrollView #

The ScrollView is a generic scrolling container that can host multiple components and views. The scrollable items need not be homogenous, and you can scroll both vertically and horizontally (by setting the horizontal property).

This example creates a vertical ScrollView with both images and text mixed together.

import React, { Component } from 'react'; import { AppRegistry, ScrollView, Image, Text } from 'react-native' -class IScrolledDownAndWhatHappenedNextShockedMe extends Component { +export default class IScrolledDownAndWhatHappenedNextShockedMe extends Component { render() { return ( <ScrollView> @@ -40,11 +40,11 @@ class IScrolledDownAndWhatHappenedNextShockedMe); } } - - -AppRegistry.registerComponent( + +// skip these lines if using Create React Native App +AppRegistry.registerComponent( 'IScrolledDownAndWhatHappenedNextShockedMe', - () => IScrolledDownAndWhatHappenedNextShockedMe);

ScrollView works best to present a small amount of things of a limited size. All the elements and views of a ScrollView are rendered, even if they are not currently shown on the screen. If you have a long list of more items that can fit on the screen, you should use a ListView instead. So let's learn about the ListView next.

← PrevNext →

You can edit the content above on GitHub and send us a pull request!