react-native/docs/Basics-Layout.md
Devin Abbott 6c5f532591 Add docs pages for basics: Dimensions and Layout
Summary:
These pages should sufficiently give a beginner enough information to make most layouts in React Native. They should go after the basics-style page, whenever that is ready.

Having a single page for Layout was too much, so I split it into two: Dimensions and Layout.

![dimensions react native a framework for building native apps using react](https://cloud.githubusercontent.com/assets/1198882/16311045/c6918b64-3923-11e6-8cc9-daeda9eb40e6.png)

![layout react native a framework for building native apps using react](https://cloud.githubusercontent.com/assets/1198882/16310233/9a66405a-3920-11e6-9ef6-1594f7228e83.png)

lacker
Closes https://github.com/facebook/react-native/pull/8364

Differential Revision: D3477147

Pulled By: lacker

fbshipit-source-id: 1ef31ac0a64e43166a7581b38fa8263282672eeb
2016-06-23 11:58:54 -07:00

4.0 KiB

id title layout category permalink next
basics-layout Layout docs The Basics docs/basics-layout.html basics-network

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 most notable one: the defaults are different, with flexDirection defaulting to column instead of row, and alignItems defaulting to stretch instead of flex-start.

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 from 'react';
import { AppRegistry, View } from 'react-native';

class AwesomeProject {
  render() {
    return (
      // Try setting `flexDirection` to `column`.
      <View style={{flex: 1, flexDirection: 'row'}}>
        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
};

AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

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 from 'react';
import { AppRegistry, View } from 'react-native';

class AwesomeProject {
  render() {
    return (
      // Try setting `justifyContent` to `center`.
      // Try setting `flexDirection` to `row`.
      <View style={{
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'space-between',
      }}>
        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
};

AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

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 from 'react';
import { AppRegistry, View } from 'react-native';

class AwesomeProject {
  render() {
    return (
      // Try setting `alignItems` to 'flex-start'
      // Try setting `justifyContent` to `flex-end`.
      // Try setting `flexDirection` to `row`.
      <View style={{
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
      }}>
        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
};

AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

API Reference

We've covered the basics, but there are many other styles you may need for layouts. The full list is available here.