Skip to content

Commit

Permalink
Add extends Component to Dimensions and Layout Basics Examples
Browse files Browse the repository at this point in the history
Summary:
It works without out the `extends`, but I do not really understand why,
unless there is some magic implicit `extends` if you don't put it and
you call `registerComponent`. But, I figure we should be explicit unless
there is a good reason not to be.
Closes facebook#8377

Differential Revision: D3478950

Pulled By: JoelMarcey

fbshipit-source-id: 05ea4367c3c8c34aea6c092639ee51d8761bca3f
  • Loading branch information
JoelMarcey authored and bubblesunyum committed Aug 23, 2016
1 parent ccfad29 commit 946a4bb
Show file tree
Hide file tree
Showing 2 changed files with 15 additions and 15 deletions.
12 changes: 6 additions & 6 deletions docs/Basics-Dimensions.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,10 @@ A component's dimensions determine its size on the screen.
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.

```ReactNativeWebPlayer
import React from 'react';
import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';
class AwesomeProject {
class FixedDimensionsBasics extends Component {
render() {
return (
<View>
Expand All @@ -29,7 +29,7 @@ class AwesomeProject {
}
};
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
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.
Expand All @@ -41,10 +41,10 @@ Use `flex` in a component's style to have the component expand and shrink dynami
> 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.
```ReactNativeWebPlayer
import React from 'react';
import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';
class AwesomeProject {
class FlexDimensionsBasics extends Component {
render() {
return (
// Try removing the `flex: 1` on the parent View.
Expand All @@ -59,5 +59,5 @@ class AwesomeProject {
}
};
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
AppRegistry.registerComponent('AwesomeProject', () => FlexDimensionsBasics);
```
18 changes: 9 additions & 9 deletions docs/Basics-Layout.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,10 @@ You will normally use a combination of `flexDirection`, `alignItems`, and `justi
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`.

```ReactNativeWebPlayer
import React from 'react';
import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';
class AwesomeProject {
class FlexDirectionBasics extends Component {
render() {
return (
// Try setting `flexDirection` to `column`.
Expand All @@ -34,18 +34,18 @@ class AwesomeProject {
}
};
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
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`.

```ReactNativeWebPlayer
import React from 'react';
import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';
class AwesomeProject {
class JustifyContentBasics extends Component {
render() {
return (
// Try setting `justifyContent` to `center`.
Expand All @@ -63,7 +63,7 @@ class AwesomeProject {
}
};
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
AppRegistry.registerComponent('AwesomeProject', () => JustifyContentBasics);
```

#### Align Items
Expand All @@ -73,10 +73,10 @@ Adding `alignItems` to a component's style determines the **alignment** of child
> 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.
```ReactNativeWebPlayer
import React from 'react';
import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';
class AwesomeProject {
class AlignItemsBasics {
render() {
return (
// Try setting `alignItems` to 'flex-start'
Expand All @@ -96,7 +96,7 @@ class AwesomeProject {
}
};
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
AppRegistry.registerComponent('AwesomeProject', () => AlignItemsBasics);
```

#### API Reference
Expand Down

0 comments on commit 946a4bb

Please sign in to comment.