Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add extends Component to Dimensions and Layout Basics Examples #8377

Closed
wants to merge 1 commit into from
Closed

Add extends Component to Dimensions and Layout Basics Examples #8377

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions docs/Basics-Dimensions.md
View file
Open in desktop
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
View file
Open in desktop
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);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can you make the registerComponent stuff use the same name as the name of the class?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same thing in the other 2 cases

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is built in this way in the web player right now. Maybe down the road it can be configurable...

https://github.com/facebook/react-native/blob/master/website/core/WebPlayer.js#L47

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I can change it. Two things I could do:

  1. I can make it so you can override. So right now if you do '''ReactNativeWebPlayer?runApp=WhateverYouWant it won't override cause it's hardcoded. But I can have it check if you use a param and only add runApp=AwesomeProject if you don't.
  2. On the iframe side, I can just duck punch registerComponent and not care what is registered.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's duck punch it

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

TIL: "duck punch" is another name for "monkey patch"

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I just love the name duck punch -- so doing that sounds awesome.

But I am for whatever can be done quickest for now.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully duck punched. #8383

```

#### 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