diff --git a/Libraries/Components/TextInput/TextInput.js b/Libraries/Components/TextInput/TextInput.js index 1f15e5d2e39..b47b785b0ca 100644 --- a/Libraries/Components/TextInput/TextInput.js +++ b/Libraries/Components/TextInput/TextInput.js @@ -74,7 +74,7 @@ const DataDetectorTypes = [ * import React, { Component } from 'react'; * import { AppRegistry, TextInput } from 'react-native'; * - * class UselessTextInput extends Component { + * export default class UselessTextInput extends Component { * constructor(props) { * super(props); * this.state = { text: 'Useless Placeholder' }; @@ -91,7 +91,7 @@ const DataDetectorTypes = [ * } * } * - * // App registration and rendering + * // skip this line if using Create React Native App * AppRegistry.registerComponent('AwesomeProject', () => UselessTextInput); * ``` * @@ -117,7 +117,7 @@ const DataDetectorTypes = [ * } * } * - * class UselessTextInputMultiline extends Component { + * export default class UselessTextInputMultiline extends Component { * constructor(props) { * super(props); * this.state = { @@ -145,7 +145,7 @@ const DataDetectorTypes = [ * } * } * - * // App registration and rendering + * // skip these lines if using Create React Native App * AppRegistry.registerComponent( * 'AwesomeProject', * () => UselessTextInputMultiline diff --git a/Libraries/Image/Image.ios.js b/Libraries/Image/Image.ios.js index f09ab4c3c86..fba9e16447a 100644 --- a/Libraries/Image/Image.ios.js +++ b/Libraries/Image/Image.ios.js @@ -41,7 +41,7 @@ const ImageViewManager = NativeModules.ImageViewManager; * import React, { Component } from 'react'; * import { AppRegistry, View, Image } from 'react-native'; * - * class DisplayAnImage extends Component { + * export default class DisplayAnImage extends Component { * render() { * return ( * @@ -57,7 +57,7 @@ const ImageViewManager = NativeModules.ImageViewManager; * } * } * - * // App registration and rendering + * // skip this line if using Create React Native App * AppRegistry.registerComponent('DisplayAnImage', () => DisplayAnImage); * ``` * @@ -74,7 +74,7 @@ const ImageViewManager = NativeModules.ImageViewManager; * } * }); * - * class DisplayAnImageWithStyle extends Component { + * export default class DisplayAnImageWithStyle extends Component { * render() { * return ( * @@ -87,7 +87,7 @@ const ImageViewManager = NativeModules.ImageViewManager; * } * } * - * // App registration and rendering + * // skip these lines if using Create React Native App * AppRegistry.registerComponent( * 'DisplayAnImageWithStyle', * () => DisplayAnImageWithStyle @@ -96,7 +96,7 @@ const ImageViewManager = NativeModules.ImageViewManager; * * ### GIF and WebP support on Android * - * By default, GIF and WebP are not supported on Android. + * When building your own native code, GIF and WebP are not supported by default on Android. * * You will need to add some optional modules in `android/app/build.gradle`, depending on the needs of your app. * diff --git a/Libraries/Text/Text.js b/Libraries/Text/Text.js index 93887b23f21..dac73a1f27c 100644 --- a/Libraries/Text/Text.js +++ b/Libraries/Text/Text.js @@ -57,7 +57,7 @@ const viewConfig = { * import React, { Component } from 'react'; * import { AppRegistry, Text, StyleSheet } from 'react-native'; * - * class TextInANest extends Component { + * export default class TextInANest extends Component { * constructor(props) { * super(props); * this.state = { @@ -90,7 +90,7 @@ const viewConfig = { * }, * }); * - * // App registration and rendering + * // skip this line if using Create React Native App * AppRegistry.registerComponent('TextInANest', () => TextInANest); * ``` */ diff --git a/docs/GettingStarted.md b/docs/GettingStarted.md index eef8a5dfa0f..959cd1ece89 100644 --- a/docs/GettingStarted.md +++ b/docs/GettingStarted.md @@ -33,6 +33,8 @@ Once you've created your project and opened it in the Expo client app, you can p ### Caveats +The Expo client app usually releases about 1 week after any given React Native release, and Create React Native App always provides the latest version of React Native which is supported by the Expo client. You can check [this document](https://github.com/react-community/create-react-native-app/blob/master/VERSIONS.md) to find out what versions are supported. + Because you don't build any native code with Create React Native App, it's not possible to include custom native modules beyond the React Native APIs and components that are available in the Expo client app. If you know that you'll eventually need to include your own native code, Create React Native App is still a good way to get started. In that case you'll just need to "[eject](https://github.com/react-community/create-react-native-app/blob/master/react-native-scripts/template/README.md#ejecting-from-create-react-native-app)" eventually to create your own native builds. If you do eject, the native build instructions below will be required to continue working on your project. diff --git a/docs/HandlingTextInput.md b/docs/HandlingTextInput.md index fe8cca7f56d..9fe4b979789 100644 --- a/docs/HandlingTextInput.md +++ b/docs/HandlingTextInput.md @@ -18,7 +18,7 @@ as "🍕🍕🍕". import React, { Component } from 'react'; import { AppRegistry, Text, TextInput, View } from 'react-native'; -class PizzaTranslator extends Component { +export default class PizzaTranslator extends Component { constructor(props) { super(props); this.state = {text: ''}; @@ -40,6 +40,7 @@ class PizzaTranslator extends Component { } } +// skip this line if using Create React Native App AppRegistry.registerComponent('PizzaTranslator', () => PizzaTranslator); ``` diff --git a/docs/HeightAndWidth.md b/docs/HeightAndWidth.md index 32c4b631630..b2cef363031 100644 --- a/docs/HeightAndWidth.md +++ b/docs/HeightAndWidth.md @@ -18,7 +18,7 @@ The simplest way to set the dimensions of a component is by adding a fixed `widt import React, { Component } from 'react'; import { AppRegistry, View } from 'react-native'; -class FixedDimensionsBasics extends Component { +export default class FixedDimensionsBasics extends Component { render() { return ( @@ -30,6 +30,7 @@ class FixedDimensionsBasics extends Component { } } +// skip this line if using Create React Native App AppRegistry.registerComponent('AwesomeProject', () => FixedDimensionsBasics); ``` @@ -45,7 +46,7 @@ Use `flex` in a component's style to have the component expand and shrink dynami 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. @@ -60,6 +61,7 @@ class FlexDimensionsBasics extends Component { } } +// skip this line if using Create React Native App AppRegistry.registerComponent('AwesomeProject', () => FlexDimensionsBasics); ``` diff --git a/docs/LayoutWithFlexbox.md b/docs/LayoutWithFlexbox.md index 2f3bd6e45b4..d3e70d33be8 100644 --- a/docs/LayoutWithFlexbox.md +++ b/docs/LayoutWithFlexbox.md @@ -22,7 +22,7 @@ Adding `flexDirection` to a component's `style` determines the **primary axis** 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`. @@ -35,6 +35,7 @@ class FlexDirectionBasics extends Component { } }; +// skip this line if using Create React Native App AppRegistry.registerComponent('AwesomeProject', () => FlexDirectionBasics); ``` @@ -46,7 +47,7 @@ Adding `justifyContent` to a component's style determines the **distribution** o 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`. @@ -64,6 +65,7 @@ class JustifyContentBasics extends Component { } }; +// skip this line if using Create React Native App AppRegistry.registerComponent('AwesomeProject', () => JustifyContentBasics); ``` @@ -77,7 +79,7 @@ Adding `alignItems` to a component's style determines the **alignment** of child 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' @@ -97,6 +99,7 @@ class AlignItemsBasics extends Component { } }; +// skip this line if using Create React Native App AppRegistry.registerComponent('AwesomeProject', () => AlignItemsBasics); ``` diff --git a/docs/Props.md b/docs/Props.md index adcf926eeda..1b2ccb3673e 100644 --- a/docs/Props.md +++ b/docs/Props.md @@ -17,7 +17,7 @@ create an image, you can use a prop named `source` to control what image it show import React, { Component } from 'react'; import { AppRegistry, Image } from 'react-native'; -class Bananas extends Component { +export default class Bananas extends Component { render() { let pic = { uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg' @@ -28,6 +28,7 @@ class Bananas extends Component { } } +// skip this line if using Create React Native App AppRegistry.registerComponent('Bananas', () => Bananas); ``` @@ -49,7 +50,7 @@ class Greeting extends Component { } } -class LotsOfGreetings extends Component { +export default class LotsOfGreetings extends Component { render() { return ( @@ -61,6 +62,7 @@ class LotsOfGreetings extends Component { } } +// skip this line if using Create React Native App AppRegistry.registerComponent('LotsOfGreetings', () => LotsOfGreetings); ``` diff --git a/docs/State.md b/docs/State.md index f22013c063c..af95bffd850 100644 --- a/docs/State.md +++ b/docs/State.md @@ -39,7 +39,7 @@ class Blink extends Component { } } -class BlinkApp extends Component { +export default class BlinkApp extends Component { render() { return ( @@ -52,12 +52,13 @@ class BlinkApp extends Component { } } +// skip this line if using Create React Native App AppRegistry.registerComponent('BlinkApp', () => BlinkApp); ``` -In a real application, you probably won't be setting state with a timer. You might set state when you have new data arrive from the server, or from user input. You can also use a state container like [Redux](http://redux.js.org/index.html) to control your data flow. In that case you would use Redux to modify your state rather than calling `setState` directly. +In a real application, you probably won't be setting state with a timer. You might set state when you have new data arrive from the server, or from user input. You can also use a state container like [Redux](http://redux.js.org/index.html) to control your data flow. In that case you would use Redux to modify your state rather than calling `setState` directly. When setState is called, BlinkApp will re-render its Component. By calling setState within the Timer, the component will re-render every time the Timer ticks. -State works the same way as it does in React, so for more details on handling state, you can look at the [React.Component API](https://facebook.github.io/react/docs/component-api.html). +State works the same way as it does in React, so for more details on handling state, you can look at the [React.Component API](https://facebook.github.io/react/docs/component-api.html). At this point, you might be annoyed that most of our examples so far use boring default black text. To make things more beautiful, you will have to [learn about Style](docs/style.html). diff --git a/docs/Style.md b/docs/Style.md index 609a5ee1df3..5641f2fc0b7 100644 --- a/docs/Style.md +++ b/docs/Style.md @@ -18,7 +18,7 @@ As a component grows in complexity, it is often cleaner to use `StyleSheet.creat 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 ( @@ -42,6 +42,7 @@ const styles = StyleSheet.create({ }, }); +// skip this line if using Create React Native App AppRegistry.registerComponent('LotsOfStyles', () => LotsOfStyles); ``` diff --git a/docs/Text.md b/docs/Text.md index d1039fc74e1..183cb90959f 100644 --- a/docs/Text.md +++ b/docs/Text.md @@ -8,7 +8,7 @@ Both iOS and Android allow you to display formatted text by annotating ranges of import React, { Component } from 'react'; import { AppRegistry, Text } from 'react-native'; -class BoldAndBeautiful extends Component { +export default class BoldAndBeautiful extends Component { render() { return ( @@ -21,6 +21,7 @@ class BoldAndBeautiful extends Component { } } +// skip this line if using Create React Native App AppRegistry.registerComponent('BoldAndBeautiful', () => BoldAndBeautiful); ``` @@ -40,7 +41,7 @@ On iOS, you can nest views within your Text component. Here's an example: import React, { Component } from 'react'; import { AppRegistry, Text, View } from 'react-native'; -class BlueIsCool extends Component { +export default class BlueIsCool extends Component { render() { return ( @@ -52,6 +53,7 @@ class BlueIsCool extends Component { } } +// skip this line if using Create React Native App AppRegistry.registerComponent('BlueIsCool', () => BlueIsCool); ``` diff --git a/docs/Tutorial.md b/docs/Tutorial.md index e25077352fe..5354de2f939 100644 --- a/docs/Tutorial.md +++ b/docs/Tutorial.md @@ -21,7 +21,7 @@ In accordance with the ancient traditions of our people, we must first build an import React, { Component } from 'react'; import { AppRegistry, Text } from 'react-native'; -class AwesomeProject extends Component { +export default class HelloWorldApp extends Component { render() { return ( Hello world! @@ -29,7 +29,8 @@ class AwesomeProject extends Component { } } -AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject); +// skip this line if using Create React Native App +AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp); ``` If you are feeling curious, you can play around with sample code directly in the web simulators. You can also paste it into your `index.ios.js` or `index.android.js` file to create a real app on your local machine. @@ -47,7 +48,7 @@ is a built-in component that just displays some text. So this code is defining `HelloWorldApp`, a new `Component`, and it's registering it with the `AppRegistry`. When you're building a React Native app, you'll be making new components a lot. Anything you see on the screen is some sort of component. A component can be pretty simple - the only thing that's required is a `render` function which returns some JSX to render. -The `AppRegistry` just tells React Native which component is the root one for the whole application. You won't be thinking about `AppRegistry` a lot - there will probably just be one call to `AppRegistry.registerComponent` in your whole app. It's included in these examples so you can paste the whole thing into your `index.ios.js` or `index.android.js` file and get it running. +The `AppRegistry` just tells React Native which component is the root one for the whole application. You won't be thinking about `AppRegistry` a lot - there will probably just be one call to `AppRegistry.registerComponent` in your whole app. It's included in these examples so you can paste the whole thing into your `index.ios.js` or `index.android.js` file and get it running. If you have a project from Create React Native App, this is handled for you and it's not necessary to call AppRegistry in your code. ## This App Doesn't Do Very Much diff --git a/docs/UsingAListView.md b/docs/UsingAListView.md index 38c172d53c9..791fc2b5270 100644 --- a/docs/UsingAListView.md +++ b/docs/UsingAListView.md @@ -22,7 +22,7 @@ This example creates a simple `ListView` of hardcoded data. It first initializes 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); @@ -45,7 +45,7 @@ class ListViewBasics extends Component { } } -// App registration and rendering +// skip this line if using Create React Native App AppRegistry.registerComponent('ListViewBasics', () => ListViewBasics); ``` diff --git a/docs/UsingAScrollView.md b/docs/UsingAScrollView.md index 61e956fbd4f..696049f2d01 100644 --- a/docs/UsingAScrollView.md +++ b/docs/UsingAScrollView.md @@ -16,7 +16,7 @@ This example creates a vertical `ScrollView` with both images and text mixed tog 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 ( @@ -56,7 +56,7 @@ class IScrolledDownAndWhatHappenedNextShockedMe extends Component { } } - +// skip these lines if using Create React Native App AppRegistry.registerComponent( 'IScrolledDownAndWhatHappenedNextShockedMe', () => IScrolledDownAndWhatHappenedNextShockedMe);