Skip to content

Commit

Permalink
Add React Native Web Player to most component basics
Browse files Browse the repository at this point in the history
Summary:
> ListView is not supported by React Native Web as of yet, so it will not have it.
Closes facebook#8331

Differential Revision: D3472019

Pulled By: lacker

fbshipit-source-id: e5fb430b6c8f4d437943c159beb00b9d9252c92d
  • Loading branch information
JoelMarcey authored and bubblesunyum committed Aug 23, 2016
1 parent 249528e commit c3a244a
Show file tree
Hide file tree
Showing 5 changed files with 15 additions and 15 deletions.
4 changes: 2 additions & 2 deletions docs/Basics-Component-Image.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,13 +15,13 @@ The simplest way to render an image is to provide a source file to that image vi

This example displays a checkbox `Image` on the device.

```JavaScript
```ReactNativeWebPlayer
import React from 'react';
import { AppRegistry, Image } from 'react-native';
const AwesomeProject = () => {
return (
<Image source={require('./img/check.png')} />
<Image source={require('./img/favicon.png')} />
);
}
Expand Down
16 changes: 8 additions & 8 deletions docs/Basics-Component-ScrollView.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,21 +17,21 @@ The [`ScrollView`](/react-native/docs/scrollview.html) is a generic scrolling co
This contrived example creates a horizontal `ScrollView` with a static amount of heterogenous elements (images and text).

```JavaScript
```ReactNativeWebPlayer
import React, { AppRegistry, ScrollView, Image, Text, View } from 'react-native'
var SimpleScrollView = React.createClass({
render(){
return(
<ScrollView horizontal={true}>
<View>
<Image source={require('./img/check.png')} />
<Image source={require('./img/favicon.png')} />
</View>
<View>
<Image source={require('./img/check.png')} />
<Image source={require('./img/favicon.png')} />
</View>
<View>
<Image source={require('./img/check.png')} />
<Image source={require('./img/favicon.png')} />
</View>
<View>
<Text style={{fontSize:96}}>Text1</Text>
Expand All @@ -46,13 +46,13 @@ var SimpleScrollView = React.createClass({
<Text style={{fontSize:96}}>Text4</Text>
</View>
<View>
<Image source={require('./img/check.png')} />
<Image source={require('./img/favicon.png')} />
</View>
<View>
<Image source={require('./img/check.png')} />
<Image source={require('./img/favicon.png')} />
</View>
<View>
<Image source={require('./img/check.png')} />
<Image source={require('./img/favicon.png')} />
</View>
<View>
<Text style={{fontSize:96}}>Text5</Text>
Expand All @@ -66,5 +66,5 @@ var SimpleScrollView = React.createClass({
});
AppRegistry.registerComponent('MyApp', () => SimpleScrollView);
AppRegistry.registerComponent('AwesomeProject', () => SimpleScrollView);
```
6 changes: 3 additions & 3 deletions docs/Basics-Component-Text.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ The most basic component in React Native is the [`Text`](/react-native/docs/text

This example displays the `string` `"Hello World!"` on the device.

```JavaScript
```ReactNativeWebPlayer
import React from 'react';
import { AppRegistry, Text } from 'react-native';
Expand All @@ -27,7 +27,7 @@ AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

In this slightly more advanced example we will display the `string` `"Hello World"` retrieved from this.state on the device and stored in the `text` variable. The value of the `text` variable is rendered by using `{text}`.

```JavaScript
```ReactNativeWebPlayer
import React from 'react';
import { AppRegistry, Text } from 'react-native';
Expand All @@ -48,4 +48,4 @@ var AwesomeProject = React.createClass({
// App registration and rendering
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
```
```
2 changes: 1 addition & 1 deletion docs/Basics-Component-TextInput.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ Direct text-based user input is a foundation for many apps. Writing a post or co

This example creates a simple `TextInput` box with the `string` `Type something here` as the placeholder when the `TextInput` is empty.

```JavaScript
```ReactNativeWebPlayer
import React from 'react';
import { AppRegistry, Text, TextInput, View } from 'react-native';
Expand Down
2 changes: 1 addition & 1 deletion docs/Basics-Component-View.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ It is recommended that you wrap your components in a `View` to style and control

The example below creates a `View` that aligns the `string` `Hello` in the top center of the device, something which could not be done with a `Text` component alone (i.e., a `Text` component without a `View` would place the `string` in a fixed location in the upper corner):

```JavaScript
```ReactNativeWebPlayer
import React from 'react';
import { AppRegistry, Text, View } from 'react-native';
Expand Down

0 comments on commit c3a244a

Please sign in to comment.