Commit Graph

1081 Commits

Author SHA1 Message Date
Valentin Shergin 4ba983401f Usage `intrinsicContentSize` property of `RCTRootView` intead of deprecated `intrinsicSize`
Reviewed By: blairvanderhoof

Differential Revision: D4589913

fbshipit-source-id: 6d966e9b90a0cf3e736ac20e2b6f35cbf92ff3f3
2017-02-27 14:04:58 -08:00
Bhuwan Khattar fac21168f6 rename UIExplorerUnitTests/TestBundle to UIExplorerUnitTests/UIExplorerUnitTestsBundle
Reviewed By: cpojer

Differential Revision: D4612650

fbshipit-source-id: 395f540cb33594fc72bfd0177d49fd602a4ce3ca
2017-02-27 14:04:56 -08:00
Bhuwan Khattar a23a3c319c Add @providesModule annotations
Summary: Adding providesModule annotations to files that don't have a `providesModule` annotation but are in directories that packager crawls.

Reviewed By: cpojer

Differential Revision: D4612455

fbshipit-source-id: b23f0d6bbe2d26f480e93b56b67c6c8b1075e9f7
2017-02-27 14:04:56 -08:00
Michael Bolin 48cb932c6e Apply auto-formatter for BUCK files in fbandroid.
fbshipit-source-id: 278ce6f67f5df830b2218e3aca69be103d3c56a6
2017-02-27 14:04:56 -08:00
Gabe Levi 4a60be62bc Deploy v0.40.0
Reviewed By: yungsters

Differential Revision: D4612331

fbshipit-source-id: 3eaa2f99d3181227166064cbee29b9245401a775
2017-02-24 12:45:56 -08:00
Valentin Shergin e361ce8673 `RCTShadowViews`'s `cssNode` property was renamed to `yogaNode`
Reviewed By: javache

Differential Revision: D4590104

fbshipit-source-id: 7767aaa62bcbdce2746c3a26543052dd46be63e0
2017-02-21 08:45:05 -08:00
Mathieu Baudet 4a893ee071 remove unused includes in fbobjc/Libraries
Reviewed By: swolchok

Differential Revision: D4507573

fbshipit-source-id: 7fc6df52bc37c39698c7897be567758469417218
2017-02-19 18:33:49 -08:00
Hector Ramos 6ad41a81bc Clean up Animated docs
Summary:
After taking a look at the existing animation docs, I found that most of the documentation on using `Animated` was spread out throughout the Animations guide and the `Animated` API reference, without any particular structure in place.

This PR aims to clean up the API reference, focusing on documenting all the provided methods exhaustively, and deferring to the Animations guide for long form examples and supporting content.

The `Easing` module is referred to at various points in the API reference, so I decided to clean up this doc as well. easings.net provides some handy visualizations that should make it easier for the reader to understand what sort of easing curve each method provides.

The site was built locally, and I verified all three documents render correctly.

![screencapture-localhost-8079-react-native-docs-animations-html-1487212173651](https://cloud.githubusercontent.com/assets/165856/23004694/d3db1670-f3ac-11e6-9d4e-0dd6079b7c5c.png)

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

Differential Revision: D4581314

Pulled By: hramos

fbshipit-source-id: 27c0bce2afac8f084311b9d6113a2641133b42e5
2017-02-17 14:48:17 -08:00
dlowder-salesforce e29ba72ba7 Add missing reference image for tvOS ImageSnapshotTest
Summary:
This should fix the failing ImageSnapshotTest that was added to the IntegrationTests for iOS and tvOS.
Closes https://github.com/facebook/react-native/pull/12391

Differential Revision: D4578345

Pulled By: javache

fbshipit-source-id: 13ff305276c46256fcdbb9fc070a8c08cdc0dd0a
2017-02-17 05:20:15 -08:00
Spencer Ahrens 6283878e17 API update and bug fixes
Reviewed By: bvaughn, yungsters

Differential Revision: D4563798

fbshipit-source-id: 0591cef7c854b525d77e526af783284d9696cb48
2017-02-16 19:04:04 -08:00
Spencer Ahrens 63d3ea17a7 Improve flow typing
Summary:
- Properly inherit flow types from base components, including `defaultProps`
- template-ify the `Item` type as it flows from the `data` prop into `ItemComponent`

Note that for `SectionList` is is harder to do the `Item` typing because each section in the
`sections` array can have a different `Item` type, plus all the optional overrides...not sure how to
tackle that.

Reviewed By: yungsters

Differential Revision: D4557523

fbshipit-source-id: a0c5279fcdaabe6aab5fe11743a99c3715a44032
2017-02-16 19:04:04 -08:00
Mehdi Mulani b99c1d3557 Disable ImageSnapshotTest on tvOS
Summary: This test is failing there, so let's disable it for now.

Reviewed By: shergin

Differential Revision: D4562533

fbshipit-source-id: bf7e871bc227f870d4b7c228b41e65e725f54255
2017-02-14 18:48:53 -08:00
David Hart 67f6b32409 Rename YGUnitPixel to YGPoint...
Summary:
...to reflect the modern world we live in with dynamic DPI platforms :)
Closes https://github.com/facebook/yoga/pull/375

Reviewed By: dshahidehpour

Differential Revision: D4528518

Pulled By: emilsjolander

fbshipit-source-id: e422bd4ae148e02c598a7b484a6adfa8c0e1e0c9
2017-02-14 14:31:31 -08:00
Spencer Ahrens a141e63ee4 Add SectionSeparatorComponent support
Summary: Makes it easy to render separators between sections, as opposed to between items.

Reviewed By: yungsters

Differential Revision: D4555707

fbshipit-source-id: 34572ab4b2c5b47db640543149fe2551c34ccf7b
2017-02-14 11:47:50 -08:00
Spencer Ahrens 91bda43e56 Fix `getItemLayout` flow type to include `index`
Summary:
The index is used to make sure the layout corresponds to the correct index, which can get
out of sync if cell layout is cached and then cells are re-ordered.

Reviewed By: bvaughn

Differential Revision: D4554721

fbshipit-source-id: 9acb37f390a6e40ad89f813b78f81b399ec11e9a
2017-02-13 18:15:43 -08:00
Mehdi Mulani b2c545dcb6 Try to re-enable some failing tests
Reviewed By: fkgozali

Differential Revision: D4552657

fbshipit-source-id: ce247839a8ea8a85885c2b20ca4f50801adf88e1
2017-02-13 17:51:22 -08:00
Spencer Ahrens 73e0b01b06 SectionList
Summary:
Simple API takes structured `sections` prop instead of `data` array. `sections` is an array of
`Section` objects, each of which has a `key` and an `itemData` array which is analogous to a
`FlatList` `data` prop, plus optional props like `ItemComponent` that can be overridden on a
per-section level, allowing heterogeneous section item rendering via clean composition.

Flattens the sections data and renders with VirtualizedList under the hood. Doesn't support
sticky headers yet.

Reviewed By: yungsters

Differential Revision: D4519354

fbshipit-source-id: 58de959dadb6f55f681245ecd99a5dc356a48f36
2017-02-13 16:32:17 -08:00
Spencer Ahrens 0a86c1cb15 debug overlay
Reviewed By: yungsters

Differential Revision: D4534822

fbshipit-source-id: ceef5bc5c0dc8cdc0d3927e198273b4411045bde
2017-02-13 13:03:30 -08:00
Valentin Shergin 7686274e13 Removed RTL workaround in RCTShadowText
Reviewed By: fkgozali

Differential Revision: D4511274

fbshipit-source-id: f658afb4e1c943cc9ecab2dd2a91f251edd3fa36
2017-02-13 12:00:57 -08:00
Sokovikov fe075732af update image on gratuitous example
Summary:
Update image since previous one was deleted

*Test plan (required)**

UIExplorer

<img width="305" alt="screen shot 2017-02-10 at 13 23 11" src="https://cloud.githubusercontent.com/assets/1488195/22821355/1d98dc06-ef94-11e6-8f6b-8e3ea2c328ae.png">
Closes https://github.com/facebook/react-native/pull/12328

Differential Revision: D4550913

fbshipit-source-id: 7a75e80f207394cafbe94402685753e9228442c3
2017-02-13 01:30:32 -08:00
Spencer Ahrens 4388783a21 Add multi column support
Reviewed By: angelahess

Differential Revision: D4540706

fbshipit-source-id: d8f84d13484d50692405c4a461c8d6c0e49f2cc9
2017-02-10 10:06:31 -08:00
Spencer Ahrens 7ac1cc744c Fix nav state persistence
Summary:
We were saving the old state, so it would always be one screen away when reloading before.
Now it works the same way as android. Ideally we would factor out all this shared code...

Reviewed By: ericvicenti

Differential Revision: D4537509

fbshipit-source-id: 28ea8fd579521bd45829013364e884678af81c30
2017-02-09 14:16:17 -08:00
Valentin Shergin ec673d0771 Added support of `direction` style property
Summary: Now layout direction (LTR or LTR) can be specified not only for whole app but also for view subtree via `direction` style property.

Reviewed By: mmmulani

Differential Revision: D4510206

fbshipit-source-id: 4e56c5886b6e42f2343165eb76be897e681c5ba4
2017-02-06 21:00:16 -08:00
Satyajit Sahoo a06ced4b16 Add perspective transform support on Android
Summary:
Rebased #6926 against master.

Fixes #2915
Closes https://github.com/facebook/react-native/pull/11713

Differential Revision: D4513111

fbshipit-source-id: 9fb653c4bfd64eda12a605f6cabb0159b2af8f73
2017-02-04 11:13:32 -08:00
Spencer Ahrens a3457486e3 Better ListView - FlatList
Summary:
We really need a better list view - so here it is!

Main changes from existing `ListView`:

* Items are "virtualized" to limit memory - that is, items outside of the render window are unmounted and their memory is reclaimed. This means that instance state is not preserved when items scroll out of the render window.
* No `DataSource` - just a simple `data` prop of shape `Array<any>`. By default, they are expected to be of the shape `{key: string}` but a custom `rowExtractor` function can be provided for different shapes, e.g. graphql data where you want to map `id` to `key`. Note the underlying `VirtualizedList` is much more flexible.
* Fancy `scrollTo` functionality: `scrollToEnd`, `scrollToIndex`, and `scrollToItem` in addition to the normal `scrollToOffset`.
* Built-in pull to refresh support - set set the `onRefresh` and `refreshing` props.
* Rendering additional rows is usually done with low priority, after any interactions/animations complete, unless we're about to run out of rendered content. This should help apps feel more responsive.
* Component props replace render functions, e.g. `ItemComponent: ReactClass<{item: Item, index: number}>` replaces `renderRow: (...) => React.Element<*>`
* Supports dynamic items automatically by using `onLayout`, or `getItemLayout` can be provided for a perf boost and smoother `scrollToIndex` and scroll bar behavior.
* Visibility callback replaced with more powerful viewability callback and works in vertical and horizontal mode on at least Android and iOS, but probably other platforms as well. Extra power comes from the `viewablePercentThreshold` that lets the client decide when an item should be considered viewable.

Demo:

https://www.facebook.com/groups/576288835853049/permalink/753923058089625/

Reviewed By: yungsters

Differential Revision: D4412469

fbshipit-source-id: e2d891490bf76fe14df49294ecddf78a58adcf23
2017-02-04 10:28:47 -08:00
Bhuwan Khattar 57daad98f0 Rename files to match @providesModule annotations
Reviewed By: davidaurelio

Differential Revision: D4507911

fbshipit-source-id: b8c9b77d7d9a2d8b2ae80d85d116f456766acba0
2017-02-03 15:58:58 -08:00
Bhuwan Khattar d82f2553fb Replace @provides with @providesModule
Reviewed By: davidaurelio

Differential Revision: D4494624

fbshipit-source-id: 192cc77126a99b3a3baeb806ed605c2194c4713a
2017-02-02 08:58:33 -08:00
Marc Horowitz 81b2d69575 Fork UIExplorer.xcodeproj into UIExplorerCxx.xcodeproj
Reviewed By: javache

Differential Revision: D4434102

fbshipit-source-id: 45e128e7d985b58c04dda14f8e692051a552a491
2017-02-01 14:14:33 -08:00
Satyajit Sahoo 295a0150d4 Support customizing thumb, track and progress colors for slider on Android
Summary:
**Motivation**

Ability to customize slider colors is desirable to match the brand. Currently iOS allows using images for slider parts, but android doesn't have any customization options. This PR adds support for customizing `thumbTintColor`, `trackTintColor` and `progressTintColor`.

**Test plan (required)**

Run UIExplorer example with the changes and verify everything works fine.

![image](https://cloud.githubusercontent.com/assets/1174278/22020752/f32a6eec-dcdf-11e6-928d-481bb28bd0a3.png)

cc brentvatne
Closes https://github.com/facebook/react-native/pull/11946

Differential Revision: D4427474

fbshipit-source-id: ec3a38db600bac6108691a4cfa15e2409143b9f3
2017-02-01 00:43:29 -08:00
Valentin Shergin d1990f8fc4 Better (right) implementation of `intrinsicContentSize`
Reviewed By: emilsjolander

Differential Revision: D4486767

fbshipit-source-id: d37ea11f9f48425d4d99c29e8bfb6c8ed2353f04
2017-01-31 16:58:32 -08:00
Satyajit Sahoo 31099aa233 Support tintColor and thumbTintColor for Switch on Android
Summary:
**Motivation**

`Switch` on Android doesn't allow changing the colors unlike iOS. Changing the colors is desirable in a lot of cases to match the brand colors.

The PR adds support for the `tintColor`, `onTintColor` and `thumbTintColor` props on Android, which more or less behave the same as iOS. The only difference is `tintColor` styles the border color on iOS, whereas it styles the background color on Android.

**Test plan (required)**

Run UIExplorer with the changes, and ensure that the switch example works properly. Here are screenshots from iOS and Android to compare.

![image](https://cloud.githubusercontent.com/assets/1174278/22018002/b05d6482-dcd2-11e6-9c00-f55a71d6ce29.png)

![image](https://cloud.githubusercontent.com/assets/1174278/22018012/b923e974-dcd2-11e6-8d4e-86994f5a66e6.png)

cc brentvatne
Closes https://github.com/facebook/react-native/pull/11940

Differential Revision: D4427491

fbshipit-source-id: 16c569d2e2261daaea93fffa83198f8f6b59a6c8
2017-01-31 13:43:43 -08:00
Peter W 1beb6274b8 Clarify ActionSheetIOSExample.js
Summary:
The `successCallback` passed via `static showShareActionSheetWithOptions(options, failureCallback, successCallback)` has two parameters (see [native code](e1577df1fd/Libraries/ActionSheetIOS/RCTActionSheetManager.m (L174))), and the name used for the first parameter in the JS example is confusing. This fixes that.

The first parameter is a boolean indicating whether the user completed the sharing (when TRUE) or cancelled it (when FALSE). Instead of calling it "success" in the example, I propose using `completed`, which is more in line with what you see in the native code.

Otherwise, we have a "successCallback" function whose first parameter tells us if we were "successful", and that's confusing (indeed, I think it already caused some confusion in the [react-native-share](https://github.com/EstebanFuentealba/react-native-share/) module: see [this issue](https://github.com/EstebanFuentealba/react-native-share/issues/48)).
Closes https://github.com/facebook/react-native/pull/11914

Differential Revision: D4490039

Pulled By: mkonicek

fbshipit-source-id: 5d7f01eae760e3fb271e7fa080c2f0147c53418a
2017-01-31 13:28:32 -08:00
Sokovikov 412acd237a fix gratuitous app crash
Summary:
Now it fails

<img src="https://cloud.githubusercontent.com/assets/1488195/22402686/1bb46f5a-e61a-11e6-9c4a-7b01e7f89508.gif" width="300"/>

**Test plan (required)**
UIExplorer
Closes https://github.com/facebook/react-native/pull/12110

Differential Revision: D4480641

fbshipit-source-id: c9941e9cc2f0624c7120cfb17a3534c92207bf7a
2017-01-29 12:43:27 -08:00
Andrei Coman 9f10b85e10 Fix UIExplorer for android getting in a broken state
Summary:
If you have a new example that you add to the UIExplorer, enter the example, but
then change the name of the example or remove it, the explorer enters a
completely broken state. It remembers the name of the last module entered and
keeps trying to enter it. Reloading, refreshing, nothing will work until you
completely reinstall the app.
This fixes this by not trying to render the current module if it doesn't exist.
It will simply skip it.

Reviewed By: yungsters

Differential Revision: D4475088

fbshipit-source-id: d4a530b235aa2712d663377e33fe65091163d262
2017-01-29 04:13:27 -08:00
Janic Duplessis 850c71c2f3 Remove usages of RecyclerViewBackedScrollView in UIExplorer and NetworkOverlay
Summary:
RecyclerViewBackedScrollView was deprecated, this removes usages in Examples as well as in NetworkOverlay.

**Test plan**
Tested that RecyclerViewBackedScrollView deprecation warning doesn't show up anymore.
Closes https://github.com/facebook/react-native/pull/11999

Differential Revision: D4443707

Pulled By: hramos

fbshipit-source-id: 087afc9f183b3f2087965a2fe84301f422e48e9c
2017-01-28 10:43:35 -08:00
Martin Konicek 9dee696ed8 Add scrollToEnd to ScrollView and ListView
Summary:
**Motivation**

A basic task of making a React Native ScrollView or ListView scroll to the bottom is currently very hard to accomplish:
- https://github.com/facebook/react-native/issues/8003
- https://github.com/facebook/react-native/issues/913
- http://stackoverflow.com/questions/29829375/how-to-scroll-to-bottom-in-react-native-listview

**NOTE:** If you're building something like a chat app where you want a ListView to keep scrolling to the bottom at all times, it's easiest to use the [react-native-invertible-scrollview](https://github.com/exponent/react-native-invertible-scroll-view) component rather calling `scrollToEnd` manually when layout changes. The invertible-scrollview uses a clever trick to invert the direction of the ScrollView.

This pull request adds a `scrollToEnd` method which scrolls to the bottom if the ScrollView is vertical, to the right if the ScrollView is horizontal.

The implementation is based on this SO answer:
http://stackoverflow.com/questions/952412/uiscrollview-scrol
Closes https://github.com/facebook/react-native/pull/12088

Differential Revision: D4474974

Pulled By: mkonicek

fbshipit-source-id: 6ecf8b3435f47dd3a31e2fd5be6859062711c233
2017-01-27 10:13:29 -08:00
Ryan Gomba 7e869b9d0a Drive any numerical prop via NativeAnimated
Summary:
In theory, we should be able to animate any non-layout property, including custom ones. While there is still work to be done on the native side to fully enable this, we should start by dropping the prop whitelist.
Closes https://github.com/facebook/react-native/pull/10658

Differential Revision: D4379031

Pulled By: ericvicenti

fbshipit-source-id: fe9c30ea101e93a8b260d7d09a909fafbb82fee6
2017-01-26 18:28:53 -08:00
Pieter De Baets 0fc62eebc3 Revert D4450924: Expose StatusBar height on iOS
Differential Revision: D4450924

fbshipit-source-id: a883a7417e85f0a923d5fcc4d5efff75b99c2272
2017-01-25 17:59:30 -08:00
Mathieu Acthernoene eebfd33b70 Expose StatusBar height on iOS
Summary:
Following the PR https://github.com/facebook/react-native/pull/6195, this adds a `HEIGHT` constant on `StatusBar` for iOS.

Combined with `statusBarFrameDidChange` and `statusBarFrameWillChange` StatusBar native events, it solves various problems with In-Call cellar bar / Location bar / others 40pt status bars, and offers a correct `keyboardVerticalOffset` value for the KeyboardAvoidingView component.
Closes https://github.com/facebook/react-native/pull/12041

Differential Revision: D4450924

Pulled By: hramos

fbshipit-source-id: 664798260f4226140f3fa3f9222a415a305d0d78
2017-01-23 12:58:34 -08:00
Philipp von Weitershausen 16bb6e87ba XHR: support typed arrays for request payloads
Summary:
Support `xhr.send(data)` for typed arrays.

**Test plan:** run UIExplorer example on iOS and Android.
Closes https://github.com/facebook/react-native/pull/11904

Differential Revision: D4425551

fbshipit-source-id: 065ab5873407a406ca4a831068ab138606c3361b
2017-01-20 18:43:27 -08:00
Luke Miles 577fd0cbb9 Fix typo for messaging test in webview example
Summary:
Simple fix for a typo in the webview examples.
Closes https://github.com/facebook/react-native/pull/11794

Differential Revision: D4393755

fbshipit-source-id: 43939c4f6eaede51a0e3948181eb58132ba84191
2017-01-20 13:58:27 -08:00
Fred Liu 8f5a72de8e Remove listener
Reviewed By: hedgerwang

Differential Revision: D4440698

fbshipit-source-id: 24a4a42aa6ca4c5f62df3ab9c1f3f37ea632f153
2017-01-19 22:28:27 -08:00
yueshuaijie 94f71a3884 Add one more parameter(keyboardType) to AlertIOS.promot().
Summary:
Add one more parameter which can specify the keyboard type of first text input(if exists) to AlertIOS.prompt().

Example usage:
`AlertIOS.prompt('Type a phone number', null, null, 'plain-text', undefined, 'phone-pad')`
Closes https://github.com/facebook/react-native/pull/8781

Differential Revision: D4437900

Pulled By: hramos

fbshipit-source-id: 8141cc0d7c70d13603cd5a1d5ea3f1ab1ce437a6
2017-01-19 14:43:37 -08:00
Satyajit Sahoo 72be2d35cc Add selectionColor prop for Text on Android
Summary:
**Motivation**

Customizing the selection color allows to use brand colors in the app. The PR implements a `selectionColor` prop for `Text` component similar to `TextInput`.

**Test plan (required)**

Run UIExplorer example with the changes and verify everything works fine.

![image](https://cloud.githubusercontent.com/assets/1174278/22023258/70197d84-dceb-11e6-8662-2879d78d14d4.png)

cc brentvatne
Closes https://github.com/facebook/react-native/pull/11947

Differential Revision: D4430265

fbshipit-source-id: 462f16548d93ab03aadb27d6f12acf90842627ab
2017-01-18 12:58:44 -08:00
Peter Salanki 52d8851fc8 Cache policy control for image source
Summary:
In the context of an app an image exists in three resolutions on the server: `thumb` (30px) `feed` (300px) `full` (900px). When looking at an individual item a user can come either from the feed, via a permalink or from other parts of the app. This allows a situation where the `feed` image might or might not already be loaded somewhere in the app. In the detail view I want to render `thumb` with a blur (to quickly display something), then the `feed` image if it exists to have something decent to display until `full` loads. However it is quite a waste to load the `feed` image if it isn't already in cache, and will slow down the time until `full` is loaded. It is possible to track the navigation from feed->detail and that the `feed` image has actually completed loading by the feed component however as component hierarchies grow this turns into quite a lot of prop passing and bad separation of concerns.

NSURLRequests accepts a [Cache Policy](https://developer.apple.com/reference/fo
Closes https://github.com/facebook/react-native/pull/10844

Differential Revision: D4425959

Pulled By: lacker

fbshipit-source-id: 679835439c761a2fc894f56eb6d744c036cf0b49
2017-01-17 17:13:31 -08:00
Douglas Lowder a531efe26e Add an integration test for WebSocket
Summary:
**Motivation**

See if we can safely run a WebSocket test in Travis CI
Closes https://github.com/facebook/react-native/pull/11433

Differential Revision: D4342024

Pulled By: ericvicenti

fbshipit-source-id: 137fb0c39ed7ea3726e2778d5c0bdac4cef6ab89
2017-01-16 13:28:43 -08:00
Philipp von Weitershausen 3c806652cf Consolidate XHR UIExplorer examples
Summary:
The XHRExample file had been forked between iOS and Android for various reasons that are no longer valid, making maintenance unnecessarily difficult. New features demos had in fact been added in separate files to avoid further duplication. This change continues on that same trajectory and splits the entire example file into multiple files. This makes them much easier to handle. We also get rid of the iOS/Android fork.

**Test plan:** Run UIExplorer app, specifically the XHR examples, on both iOS and Android.
Closes https://github.com/facebook/react-native/pull/11901

Differential Revision: D4419882

Pulled By: ericvicenti

fbshipit-source-id: ec12836dfa8e1b9259b92a7510914857a8db58d5
2017-01-14 18:58:26 -08:00
Michael Lee 55f0294b7d clean up buck dep order
Reviewed By: adamjernst

Differential Revision: D4404770

fbshipit-source-id: d5801cc2b529f513e1531840310b884af951d702
2017-01-11 14:43:31 -08:00
Emil Sjolander 3f49e743be Add percentage support to react native
Summary:
Adds support for percentage value in react native.

syntax: property: 100 | property | '100%'

supported properties:
padding
margin
width
height
minWidth
minHeight
maxWidth
maxHeight
flexBasis

```
class Playground extends React.Component {
  render() {
    return (
      <View style={{backgroundColor: 'white', padding: 10, paddingTop: 30, height: '100%'}}>
        <Text>
          If you want to quickly test out something,
          open the Playground.js file and start coding.
        </Text>
        <View style={{backgroundColor: 'red', height: 50, width: 50}}/>
        <View style={{backgroundColor: 'blue', height: '50%', width: '50%'}}/>
      </View>
    );
  }
}
```

Reviewed By: astreet

Differential Revision: D4376549

fbshipit-source-id: c41d68a7555396f95d063a7527ee081773ac56dc
2017-01-11 03:58:37 -08:00
Timur Gibadullin 6e2595e8ee Fix TicTacToe example layout
Summary:
I noticed that after starting a new game the board is not correctly layouted:

![-08-2017 21-39-21](https://cloud.githubusercontent.com/assets/3778452/21752532/06afc648-d5eb-11e6-9f8a-ccdad00d3a6f.gif)

Maybe this bug was introduced after the change of flex behaviour in 0.36.
Just replacing empty view with null fixed it.

**Test plan (required)**

 - launch the TicTacToe app
 - complete a round
 - press on new game

 a new board should be centred both vertically and horizontally
Closes https://github.com/facebook/react-native/pull/11775

Differential Revision: D4392024

Pulled By: ericvicenti

fbshipit-source-id: d2742d6ecafd786c38212adeb3c952f18a0e6f2b
2017-01-09 00:28:37 -08:00