Commit Graph

534 Commits

Author SHA1 Message Date
Valentin Shergin 6d67e2dbbc Bunch of utility funcs were moved to RCTUIManagerUtils
Summary: Because `RCTUIManager` is already overcomplicated and that stuff deserves separate file and header.

Reviewed By: javache

Differential Revision: D5856653

fbshipit-source-id: 7001bb8ba611976bf3b82d6a25f5619810a35b34
2017-09-26 14:08:28 -07:00
tfallon@mail.depaul.edu 03ae65bc25 Fixes removeClipSubviews check for offscreen rendering of ListViews
Summary:
This issue has been open for a really long time, but I'm pretty sure this is the line that needed to change:
https://github.com/facebook/react-native/issues/1831

What was happening here is that `CGRectIsEmpty` returns true when either height or width is zero. With the current logic, one of those would always be zero when the parent was rendered off screen. This ensures that there the intersection be of CGSizeZero for the view to actually be clipped.

That being said, there seems to be something more complex going on here that I'm not understanding? I would think that you'd simply want to check if the child view's frame is within the bounds of the parent at all. If it was, then don't clip it. If I'm in the wrong, could someone explain this a bit more? If so, I'll fix this issue.

Using this [repository](https://github.com/jcharlet/react_native_listview_bug), this one line change fixes the issue and still clips cells as they are scrolled off screen.
Closes https://github.com/facebook/react-native/pull/15669

Differential Revision: D5815056

Pulled By: shergin

fbshipit-source-id: 32382e4954139e4d5af67d786422fd87173b1a1a
2017-09-26 11:01:39 -07:00
Mehdi Mulani e220878b00 Add a hack to fix the Modal component interacting with LayoutAnimation
Summary: As per the comment, <Modal> uses entering/leaving the view hierarchy as a cue to show/hide the modal. By re-adding it, we are causing a bunch of confusion.

Reviewed By: shergin

Differential Revision: D5893607

fbshipit-source-id: ecd05799751a9bba843998ae93f24fe35edca8b4
2017-09-25 11:07:55 -07:00
Jakub Grzmiel d005c8c08a Fix format warnings for clang 5.0
Reviewed By: mzlee

Differential Revision: D5900751

fbshipit-source-id: 4e9aea068aab3d2d882b8fb103a8828e861da97c
2017-09-25 10:30:53 -07:00
Valentin Shergin 983b05441d Introducing <SafeAreaView>
Summary:
<SafeAreaView> renders nested content and automatically applies paddings reflect the portion of the view
that is not covered by navigation bars, tab bars, toolbars, and other ancestor views.
Moreover, and most importantly, Safe Area's paddings feflect physical limitation of the screen,
such as rounded corners or camera notches (aka sensor housing area on iPhone X).

Reviewed By: mmmulani

Differential Revision: D5886411

fbshipit-source-id: 7ecc7aa34de8f5527c4e59b0fb4efba3aaea28c8
2017-09-24 23:01:25 -07:00
Valentin Shergin 8b4ed9490c Introducting `-[UIManager.setLocalData:forView:]`, the way to provide environmental data to ShadowView
Summary:
In some cases we need a way to specify some environmental data to shadow view
to improve layout (or do something similar), so `localData` serves these needs.
For example, any stateful embedded native views may benefit from this.
Have in mind that this data is not supposed to interfere with the state of
the shadow view.

Reviewed By: mmmulani

Differential Revision: D5884711

fbshipit-source-id: f0bf66e4608894ec4479b8aca262afcfba6b9f4b
2017-09-24 23:01:25 -07:00
Mehdi Mulani 9bf936ccba Avoid oversending modalDismissed event
Reviewed By: shergin

Differential Revision: D5895366

fbshipit-source-id: 6d1ca424d2d43fadb48354a1cbad94714448a380
2017-09-23 10:46:17 -07:00
Mehdi Mulani a389ffbd84 Add onDismiss to Modal.js
Summary: Adds an onDismiss so that navigation events can be chained to the dismissing of a modal.

Reviewed By: sahrens

Differential Revision: D5852953

fbshipit-source-id: a86e36fdd5b0b206c2dd9fa248e2a88da22efa31
2017-09-21 15:01:52 -07:00
Kellie Medlin e846a9f82f Fix build errors exposed by building against clang 5.0
Reviewed By: rachit-siamwalla

Differential Revision: D5828898

fbshipit-source-id: 23fa587bcd1d1b6c612cc816f1aa7b03da0c187d
2017-09-14 00:35:02 -07:00
Sean Holbert 73c3aa8d32 (iOS) Support for DemiBold alias of SemiBold (font-weight 600)
Summary:
For more information on font weight naming see [this post](https://www.quora.com/What-is-the-difference-between-Medium-Demi-and-Semibold-fonts).

DemiBold is fairly common in font naming. For example, iOS React Native lacks support of "AvNext-DemiBold".

Also removed warning about `NSUInteger` <=> `NSInteger` comparison, by making `i` an `NSUInteger`

Before and after screenshots:

![before-fix](https://user-images.githubusercontent.com/177857/30182567-1dfebcb0-93cc-11e7-9b51-78ef6f41c447.png)

![after-fix](https://user-images.githubusercontent.com/177857/30182570-1f90ea94-93cc-11e7-8f68-008ae648ffbe.png)

Add any DemiBold font to an iOS react native project.  Set fontWeight to `'600'` on a `<Text />` component. The font weight should be applied appropriately.
Closes https://github.com/facebook/react-native/pull/15856

Differential Revision: D5800928

Pulled By: shergin

fbshipit-source-id: 9095e3e150847f9cb828aa5d080567846441e55d
2017-09-08 23:01:41 -07:00
Neo d3007b0fd2 fix fontWeight regression
Summary:
fix the regression I mentioned in https://github.com/facebook/react-native/pull/15162#issuecomment-319696706

as no one is working on this, I take the step, although I know nothing about Objective C

I find the key point is that the keys in `NSDictionary` are not ordered as presented, it's a hash table, so no grantee on keys order, so I create a new array to do that, then it will check `ultralight` before `light` and `semibold` before `bold`
Closes https://github.com/facebook/react-native/pull/15825

Differential Revision: D5782142

Pulled By: shergin

fbshipit-source-id: 5346b0cb263e535c0b445e7a2912c452573248a5
2017-09-06 23:51:57 -07:00
Valentin Shergin 7b962397b6 Fixed clowntoun related to `-[RCTShadowView canHaveSubviews]`
Summary:
Shame on me.
Naming can be hard. We have to use positive logic to avoid this kind of bugs. :(

In the bright future we also have to rename `isYogaLeafNode` to something with positive logic, like `canHaveYogaChildNodes`.
But before we can do this, we have to have solid plan how to unify it with Android.

Reviewed By: mmmulani

Differential Revision: D5780917

fbshipit-source-id: 1ddaaea06f5618b91528cc87f1433a55b5fae4ac
2017-09-06 23:51:57 -07:00
Janic Duplessis 64be88398d Fix content offset validation
Summary:
Content offset was broken because on initial render contentSize is {0,0} so any positive offset is lost. Also inset top/bottom and left/right were inversed �, this led to bad initial scrolling offset when using contentInset. This fixes it by making sure contentSize is actually measured (not {0,0}. I guess it's possible that the content is ACTUALLY {0,0} but in that case I don't think it really matters).

**Test plan**
Tested that a scrollview has proper scroll position when specifying contentOffset. Also tested that it works well with contentInset.
```js
<ScrollView contentOffset={{y: 100}}>
  <View style={{height: 1000}} />
</ScrollView>
```
Closes https://github.com/facebook/react-native/pull/15670

Differential Revision: D5771221

Pulled By: shergin

fbshipit-source-id: 455ed8fd5a4ad1ec61780b573d1a8ef1d77dd124
2017-09-05 16:35:03 -07:00
Jacob Parker b48149ed94 Expose barStyle for NavigatorIOS and TabBarIOS
Summary:
Exposes barStyle property. Code already existed in RCTConvert, so that’s why there’s no conversion code here.
Closes https://github.com/facebook/react-native/pull/10936

Differential Revision: D4224759

Pulled By: shergin

fbshipit-source-id: b6346940e69933d42a21cd38b9a2fa75d049f8e6
2017-08-25 00:14:46 -07:00
Valentin Shergin 6493a85754 RCTShadowView have got `rootView` property
Summary:
We have to have a way to track ownership of shadow view.
Previous solution with traversing the hierarchy to figure out the root view does not actually work in some cases when the view is temporary detached from hierarchy.
This is also how it work on Andorid.

Reviewed By: mmmulani

Differential Revision: D5686112

fbshipit-source-id: a23a10e8c29c7572ac69403289db136c9d5176a9
2017-08-24 00:05:48 -07:00
Alin Panaitiu 28c1c88ef7 Adjust row height by font size in PickerIOS
Summary:
- [x] Explain the **motivation** for making this change.
- [x] Provide a **test plan** demonstrating that the code is solid.
- [x] Match the **code formatting** of the rest of the codebase.
- [x] Target the `master` branch, NOT a "stable" branch.

There is a problem where setting a bigger fontSize in PickerItem style
clips the top and bottom of the text.
This solves that problem by computing the row height using the font
size.

Create a PickerIOS component and set a larger font size (e.g. 50). The row height will grow accordingly.

Example with `fontSize=50`: [Screenshot](http://i.imgur.com/YwK5fOc.png)
Closes https://github.com/facebook/react-native/pull/13513

Differential Revision: D5692124

Pulled By: shergin

fbshipit-source-id: 4629403e37ad68cdbc0b17b48ba924a77e133078
2017-08-23 20:30:10 -07:00
Valentin Shergin 950c2b2a73 ScrollView: `contentOffset` validatation now respects `contentInset`
Summary:
> The property contentInset can change the maximum and minimum values of the content offset to allow scrolling outside of the scrollable area. Its type is UIEdgeInsets, which consists of 4 numbers: {top, left, bottom, right}. When you introduce an inset, you change the range of the content offset. For example, setting the content inset to have a value of 10 for its top value allows the content offset’s y value to reach -10. This introduces padding around the scrollable area.
( https://www.objc.io/issues/3-views/scroll-view/ )

See also: https://github.com/facebook/react-native/pull/15395

Reviewed By: mmmulani

Differential Revision: D5607192

fbshipit-source-id: 1acd6a84e2bcfefc6e82861cfbdfe6247d0e4264
2017-08-22 16:41:55 -07:00
Douglas Lowder 0d3039f1a0 Fix for Modal behavior when menu button pressed on Apple TV (Issue #15313)
Summary:
**Motivation**

On Apple TV, pressing the menu button destroys the native view that backs the `Modal` component, causing an app using this component to get into a broken state.  This fix implements `onRequestClose` for tvOS to have the same behavior as it does for the Android back button.

**Test plan**

Manually tested this with the `ModalExample` in the `RNTester` app.  See also the test code in issue #15313.
Closes https://github.com/facebook/react-native/pull/15341

Differential Revision: D5651035

Pulled By: shergin

fbshipit-source-id: 54bf66887bbe85940567e63e90b437ac4a8daf9a
2017-08-17 15:22:12 -07:00
Douglas Lowder 0e7375ae36 Apple TV: RCTTabBar selection controlled by native after render (fix #15081)
Summary:
**Motivation**

Fix flickering in TabBarIOS on Apple TV... issue #15081

After this change, on Apple TV, TabBarIOS item selections will be controlled purely from the native side after initial render with the `selected` prop.  This is necessary because the `UITabBar` implementation in tvOS moves the selection before calling `shouldSelectViewController:`; this issue does not occur on iOS.

**Test plan**

Existing CI should still pass. Issue is resolved when testing the example code in #15081 .
Closes https://github.com/facebook/react-native/pull/15220

Differential Revision: D5601671

Pulled By: javache

fbshipit-source-id: c18e7d3482d6c07d534ff40a443a6f642d4267bb
2017-08-10 05:36:06 -07:00
Julien K f06d992964 Fix syntax error
Summary:
It is not itemPositoning it is itemPositioning

I have test it on iOS and tvOS
Closes https://github.com/facebook/react-native/pull/15426

Differential Revision: D5591807

Pulled By: javache

fbshipit-source-id: 0ad0bc32012c63f93f6b1528cae46c6dcba56706
2017-08-09 04:25:08 -07:00
Jake Murzy 614dd077b3 add `pinchEnabled` prop to ScrollView
Summary:
When false, ScrollView disables use of pinch gestures to zoom in and out. This allows ScrollView's pinch gesture responder to be disabled to only allow zooming programmatically. The default value is ~false~ true.

**Test Plan**
Tested that pinch gesture responder is disabled when pinchEnabled=false.

/cc  nicklockwood sahrens

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

Differential Revision: D5491953

Pulled By: shergin

fbshipit-source-id: eae16f92ec616e415b4ddacfccb84c697582daf9
2017-08-06 23:55:16 -07:00
Dmitry Patsura 30d5b9dbf5 RCTNavigatorManager - drop unneeded error callback
Summary:
Hey!

So, I was interested to contibure, and started from todo

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

Differential Revision: D5546610

Pulled By: javache

fbshipit-source-id: 58e1b67786cbafa20399ac12dde9fcc3920abe94
2017-08-02 10:23:42 -07:00
Adam Miskiewicz 1954438533 Add 'contentInsetAdjustmentBehavior' (new in iOS 11) to ScrollView
Summary:
In iOS11, Apple added a new layout feature called "Safe Areas" (this blog post talks a bit about it: https://www.bignerdranch.com/blog/wwdc-2017-large-titles-and-safe-area-layout-guides/).

UIScrollView is one component that is affected by this change in Apple's API. When the `contentInsetAdjustmentBehavior` is set to `automatic`, for example, it will adjust the insets (and override any manually set insets) automatically based on whether or not there's a UINavigationBar, a UITabBar, a visible status bar, etc on the screen. Frustratingly, Apple decided to default to `Automatic` for this behavior, which will cause any apps that set contentInset/contentContainerStyle padding to have their values offset by, at the very least, the size of the status bar, when they compile their app for iOS 11. Here's more information about this behavior: https://developer.apple.com/documentation/uikit/uiscrollview/2902261-contentinsetadjustmentbehavior?language=objc

Mostly, this is a really straightforward change -- it simply adds a new iOS-only prop to ScrollView that allows setting `contentInsetAdjustmentBehavior`. But I did decide to default the behavior to `never`, so that it mimics the behavior we've seen in iOS < 11. I think it's good to keep something as crucial as scrollview content insets non-magical, and also keep it behaving similarly between platforms.
Closes https://github.com/facebook/react-native/pull/15023

Reviewed By: javache

Differential Revision: D5517552

Pulled By: hramos

fbshipit-source-id: c9ce4bf331b3d243228268d826fdd4dcee99981d
2017-07-31 12:23:34 -07:00
Tom Clarkson 42f7b9e717 Improved window.postMessage implementation
Summary:
Adds a queue to postMessage so that messages sent close together are not lost.

Setting location="a";location="b" results in only "b" reaching shouldStartLoadWithRequest. Making the second update asynchronous with setTimeout does not fix the issue unless a delay is added.

With this update, postMessage queues "b" until it gets a "message:received" event that confirms "a" has already been processed.

The included test sends two messages from a webview and checks that both are received. It fails against the preexisting code with the first message being dropped.
Closes https://github.com/facebook/react-native/pull/11304

Differential Revision: D5481385

Pulled By: hramos

fbshipit-source-id: 9b6af195eeff8f20c820e2fcdac997c90763e840
2017-07-28 11:35:25 -07:00
Saad Ismail 560bab17e1 Revert D5441491: [react-native][PR] Add 'contentInsetAdjustmentBehavior' (new in iOS 11) to ScrollView
Differential Revision: D5441491

fbshipit-source-id: 0ae920c6c020f41ee0fde38e57b735f87b26d4a9
2017-07-26 13:32:41 -07:00
Adam Miskiewicz 6e28b39d78 Add 'contentInsetAdjustmentBehavior' (new in iOS 11) to ScrollView
Summary:
In iOS11, Apple added a new layout feature called "Safe Areas" (this blog post talks a bit about it: https://www.bignerdranch.com/blog/wwdc-2017-large-titles-and-safe-area-layout-guides/).

UIScrollView is one component that is affected by this change in Apple's API. When the `contentInsetAdjustmentBehavior` is set to `automatic`, for example, it will adjust the insets (and override any manually set insets) automatically based on whether or not there's a UINavigationBar, a UITabBar, a visible status bar, etc on the screen. Frustratingly, Apple decided to default to `Automatic` for this behavior, which will cause any apps that set contentInset/contentContainerStyle padding to have their values offset by, at the very least, the size of the status bar, when they compile their app for iOS 11. Here's more information about this behavior: https://developer.apple.com/documentation/uikit/uiscrollview/2902261-contentinsetadjustmentbehavior?language=objc

Mostly, this is a really straightforward change -- it simply adds a new iOS-only prop to ScrollView that allows setting `contentInsetAdjustmentBehavior`. But I did decide to default the behavior to `never`, so that it mimics the behavior we've seen in iOS < 11. I think it's good to keep something as crucial as scrollview content insets non-magical, and also keep it behaving similarly between platforms.
Closes https://github.com/facebook/react-native/pull/15023

Differential Revision: D5441491

Pulled By: shergin

fbshipit-source-id: 7b56ea290f7f6eca5f1d996ff8488f40b866c2e6
2017-07-25 10:28:42 -07:00
Pieter De Baets ca9e26cecd Mark non-extern strings static
Reviewed By: shergin

Differential Revision: D5479934

fbshipit-source-id: 2dcf873f44c4847e838d0fae10ecd754d43be262
2017-07-25 04:49:46 -07:00
Kip Ricker cfeaefb4e0 iOS: Fix font weight resolution
Summary:
**Issue:**
Some fonts are defined with weights that don't match with the UIFontWeight constants.

**Example:**
UIFontWeightTraits for Roboto font
Light: -0.230
Thin: -0.365

Currently, the UIFontWeightTrait is always used if it != 0.0, and given the UIFontWeight constants for Light and Thin:
UIFontWeightThin -0.6
UIFontWeightLight -0.4

A style font weight of "300" or "200" will both resolve to Roboto-Thin as its weight -0.365 is closer to -0.4 (UIFontWeightLight) and -0.6 (UIFontWeightThin) than -0.230 (Roboto-Light).

**Proposed fix:**
When resolving `getWeightOfFont` try to match the name of weight to the name of the font first, and guess the font with UIFontWeightTrait as the fall back.

**Test Plan:**
Attempt to display Roboto at weights "200" and "300" and Roboto-Thin and Roboto-Light should be displayed correctly.

Current:
![simulator screen shot jul 7 2017 11 44 42 am](https://user-images.githubusercontent.com/889895/28506859-31b274e8-6fe3-11e7-8f92-f41ff2183356.png)

Fixed:
![simulator screen shot jul 7 2017 11 42 25 am](https://user-images.githubusercontent.com/889895/28506861-365ea3f4-6fe3-11e7-992c-9f426785037f.png)
Closes https://github.com/facebook/react-native/pull/15162

Differential Revision: D5479817

Pulled By: javache

fbshipit-source-id: a9f93d8ce69a96fb685cb09393d1db42486cc0c2
2017-07-24 08:33:04 -07:00
Tomas Reimers aa9a19ab8d Remove onScrollAnimationEnd
Summary:
<!--
Thank you for sending the PR!

If you changed any code, please provide us with clear instructions on how you verified your changes work. In other words, a test plan is *required*. Bonus points for screenshots and videos!

Please read the Contribution Guidelines at https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md to learn more about contributing to React Native.

Happy contributing!
-->
Closes https://github.com/facebook/react-native/pull/15156

Differential Revision: D5479265

Pulled By: shergin

fbshipit-source-id: a2dfa3a4357e126838a17dac4797d1d845cd56ae
2017-07-24 00:32:17 -07:00
Valentin Shergin f5d9b5210e ScrollView: Couple of unnecessary checks was removed from RCTCustomScrollView
Summary:
* Now `setFrame:` is called by autoresizing masks, so it is safe.
* Nobody calls `setBounds:`, so it is also safe.

Reviewed By: javache

Differential Revision: D5414441

fbshipit-source-id: 6fc51c7598c4817301db51f627aa1e9840642fec
2017-07-18 14:46:22 -07:00
Valentin Shergin 1d22f8fb27 ScrollView: Smart `contentOffset` preserving
Summary:
Previous `contentOffset` can be invalid for a new layout and overscroll the ScrollView, so the diff fixes that.
Also documented here: https://github.com/facebook/react-native/issues/13566

Reviewed By: mmmulani

Differential Revision: D5414442

fbshipit-source-id: 7de1b4a4571108a37d1795e80f165bca5aba5fef
2017-07-18 14:46:22 -07:00
Valentin Shergin 301830dc2a ScrollView: Use autoresizing masks for layouting actual UIScrollView
Summary:
Surprisingly enough, even if semantically the code remains identical, layouting via autoresizing masks applies changes to subviews a bit earlier than iOS calls `layoutSubviews`.
This allows us to avoid situations where we already explicitly set calculated by Yoga frames and want to scroll to some subview, but actual layout have not done yet and internal views has wrong frames.

Reviewed By: javache

Differential Revision: D5414440

fbshipit-source-id: d4152c9c68dc17f6827832dcb45e5ba86fb82831
2017-07-18 14:46:22 -07:00
Valentin Shergin fa1d4e8d81 ScrollView/TextInput: The amnesty of `scrollRectToVisible`
Reviewed By: javache

Differential Revision: D5414438

fbshipit-source-id: 45b6a32bc2584ed99efd1514d724e2b5ca29d8e9
2017-07-18 14:46:22 -07:00
Steffen Matthischke 048a9ab10c RCTScrollEvent: get all required values injected rather than accessing the scroll view
Summary:
This PR fixes #15006 by removing all UI API calls from RCTScrollEvent.

`-[RCTScrollEvent arguments]` can now be called from a background thread.
The Main Thread Checker of Xcode 9 will not any longer produce runtime issues when calling this method.

1. create a React Native (version: this PR) project with a scroll view
2. open it in Xcode 9
3. launch it
4. scroll the scroll view
5. observe the runtime issues in Xcode. There should not contain "UI API called from background thread"-issues.

I verified my changes on this branch: https://github.com/HeEAaD/Demo-ReactNative-UI-not-on-main-thread/tree/fix

<!--
Thank you for sending the PR!

If you changed any code, please provide us with clear instructions on how you verified your changes work. In other words, a test plan is *required*. Bonus points for screenshots and videos!

Please read the Contribution Guidelines at https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md to learn more about contributing to React Native.

Happy contributing!
-->
Closes https://github.com/facebook/react-native/pull/15008

Differential Revision: D5424734

Pulled By: shergin

fbshipit-source-id: 56beec2d7603ea6782d55622567509f3758a4517
2017-07-14 21:03:53 -07:00
Yu Wang 5701ae2145 Support `shadowView.rootView`
Reviewed By: shergin

Differential Revision: D5418509

fbshipit-source-id: 585b088678096ccf8416ea21a675d8953bfa82c8
2017-07-14 18:26:04 -07:00
Adam Miskiewicz 8ea6cea39a MaskedViewIOS -- A way to apply alpha masks to views on iOS
Summary:
It's very important in complex UIs to be able to apply alpha channel-based masks to arbitrary content. Common use cases include adding gradient masks at the top or bottom of scroll views, creating masked text effects, feathering images, and generally just masking views while still allowing transparency of those views.

The original motivation for creating this component stemmed from work on `react-navigation`. As I tried to mimic behavior in the native iOS header, I needed to be able to achieve the effect pictured here (this is a screenshot from a native iOS application):

![iOS native navbar animation](https://slack-imgs.com/?c=1&url=https%3A%2F%2Fd3vv6lp55qjaqc.cloudfront.net%2Fitems%2F0N3g1Q3H423P3m1c1z3E%2FScreen%2520Shot%25202017-07-06%2520at%252011.57.29%2520AM.png)

In this image, there are two masks:

- A mask on the back button chevron
- A gradient mask on the right button

In addition, the underlying view in the navigation bar is intended to be a UIBlurView. Thus, alpha masking is the only way to achieve this effect.

Behind the scenes, the `maskView` property on `UIView` is used. This is a shortcut to setting the mask on the CALayer directly.

This gives us the ability to mask any view with any other view. While building this component (and testing in the context of an Expo app), I was able to use a `GLView` (a view that renders an OpenGL context) to mask a `Video` component!

I chose to implement this only on iOS right now, as the Android implementation is a) significantly more complicated and b) will most likely not be as performant (especially when trying to mask more complex views).

Review the `<MaskedViewIOS>` section in the RNTester app, observe that views are masked appropriately.

![example](https://d3vv6lp55qjaqc.cloudfront.net/items/250X092v2k3f212f3O16/Screen%20Recording%202017-07-07%20at%2012.18%20PM.gif?X-CloudApp-Visitor-Id=abb33b3e3769bbe2f7b26d13dc5d1442&v=5f9e2d4c)
Closes https://github.com/facebook/react-native/pull/14898

Differential Revision: D5398721

Pulled By: javache

fbshipit-source-id: 343af874e2d664541aca1fefe922cf7d82aea701
2017-07-11 15:05:57 -07:00
Valentin Shergin 7cdd4d48c8 Nits: `[NSNull null] was changed to `(id)kCFNull`
Reviewed By: javache

Differential Revision: D5398734

fbshipit-source-id: 823e860b5da9cc9850fafa49c1d9b746580856b0
2017-07-11 12:31:15 -07:00
Christian Brevik 684e03590b Support native ViewManager inheritance on iOS
Summary:
**Motivation**
This is a re-worked version of #14260, by shergin's suggestion.

For iOS, if you want to inherit from a native ViewManagers, your custom ViewManager will not automatically export the parents' props. So the only way to do this today, is to basically copy/paste the parent ViewManager-file, and add your own custom logic.

With this PR, this is made more extensible by exporting the `baseModuleName` (i.e. the iOS `superclass` of the ViewManager), and then using that value to re-establish the inheritance relationship in `requireNativeComponent`.

**Test plan**
I've run this with a test project, and it works fine there. But needs more testing.

Opened this PR as [per shergin's suggestion](https://github.com/facebook/react-native/pull/10946#issuecomment-311860545) though, so we can discuss approach.

**Discussion**
* Android already supports inheritance, so this change should be compatible with that. But, not every prop available on `UIManager.RCTView.NativeProps` is actually exported by every ViewManager. So should `UIManager.RCTView.NativeProps` still be merged with `viewConfig.NativeProps`, even if the individual ViewManager does not export/use them to begin with?
* Does this break other platforms? [UWP](https://github.com/Microsoft/react-native-windows)?
Closes https://github.com/facebook/react-native/pull/14775

Differential Revision: D5392953

Pulled By: shergin

fbshipit-source-id: 5212da616acfba50cc285e2997d183cf8b2cd09f
2017-07-10 16:01:12 -07:00
Nathaniel Rankin Webb 502604074c Fixed ScrollView's .scrollToEnd to refrain from exceeding start boundary.
Summary:
Thanks for submitting a pull request! Please provide enough information so that others can review your pull request:

> **Unless you are a React Native release maintainer and cherry-picking an *existing* commit into a current release, ensure your pull request is targeting the `master` React Native branch.**

Explain the **motivation** for making this change. What existing problem does the pull request solve?

The problem occurs when a ScrollView's content height is smaller than the ScrollView height.  If the method `scrollToEnd` is called on the ScrollView, it will pull the content down until the bottom of the content is aligned with the bottom of the Scrollview container.

This fix will ensure the proper functionality: That the furthest the ScrollView can scroll down is to where the top of the content container is at the origin (i.e., the ScrollView scroll number cannot be less than 0).

Prefer **small pull requests**. These are much easier to review and more likely to get merged. Make sure the PR does only one thing, otherwise please split it.

**Test plan (required)**

Demonstrate the code is solid. Example: The exact commands you ran and their output, screenshots / videos if the pull request changes UI.

Make sure tests pass on both Travis and Circle CI.

I tested on a scenario where the ScrollView is almost the full size of the screen, and the content of the ScrollView has a height of much less.  In this situation, the `scrollToEnd` method was executed and the content stayed in the same position.  This is the intended behavior.  If the content of the ScrollView is smaller than the height of the ScrollView, then the `scrollToEnd` method should not scroll anywhere.

**Code formatting**

Look around. Match the style of the rest of the codebase. See also the simple [style guide](https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md#style-guide).

For more info, see the ["Pull Requests" section of our "Contributing" guidelines](https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md#pull-requests).
Closes https://github.com/facebook/react-native/pull/12889

Reviewed By: javache

Differential Revision: D5289894

Pulled By: sahrens

fbshipit-source-id: df2e779ee855c1dea85d33649d754371ad244bca
2017-06-21 18:20:34 -07:00
Hank Brekke ec68536e08 iOS `presentationStyle` Modal Appearance
Summary:
When using `<Modal` on larger iOS devices, esp. iPad and iPhone 7 Plus devices, there is no way to use the system functionality for controlling the appearance of modals (`presentationStyle`), which improves the native system's animation and display of smaller content appearing within large horizontal space.

I've added a new picker for selecting a `presentationStyle` within  the RNTester app. See below for the appearance of this change, as well as the relevant changes to the RN documentation.

![may-22-2017 09-49-50](https://cloud.githubusercontent.com/assets/3521186/26315020/6d4b1cb0-3ed5-11e7-8ac8-a996f1ee00f9.gif)
<img width="1051" alt="screen shot 2017-05-22 at 9 50 12 am" src="https://cloud.githubusercontent.com/assets/3521186/26315021/6d4cbf7a-3ed5-11e7-9d13-a5d20c9f3533.png">
Closes https://github.com/facebook/react-native/pull/14102

Differential Revision: D5281990

Pulled By: shergin

fbshipit-source-id: 882d8cb79e7adb0b4437cdf26e5e7ab1fc04f4c1
2017-06-20 19:22:57 -07:00
Yu Wang 70e0455522 Implement nativeID prop to allow native code to reference react managed views in iOS
Reviewed By: javache

Differential Revision: D5228055

fbshipit-source-id: 8c934501d4ac946d80bf93d2ddb50f5fc38aea3c
2017-06-20 19:01:27 -07:00
Valentin Shergin a04322fa1b Support `display: none;` style (iOS)
Summary:
Yes, `display: none;` did not work on iOS before this commit.
Now it "just works". It can be useful when some view needs to be hidden temporary and efficiently.

Reviewed By: javache

Differential Revision: D5173936

fbshipit-source-id: 83a03fff04dd3a872d7dd6bf673189f932906776
2017-06-20 17:16:46 -07:00
Valentin Shergin ac3f345b07 Fixed assertion caused by invalid layout of hidden Yoga nodes
Summary:
That's interesting!
If we apply `display: none;` style to some node, Yoga will stop calculation layout for this subtree (which is reasonable).
So, from RN perspective we have to stop applying layout for hidden subtree because it is meaningless and causes another errors.

Note: We do actually not support `display: none;` yet. It stops computing layout, but it does not hide the views!

Reviewed By: javache

Differential Revision: D5168651

fbshipit-source-id: 29a9385c76a0f9d637285fc0d268ccc39879ca0a
2017-06-20 17:16:46 -07:00
Valentin Shergin abfa63c67e Introducing -[RCTShadowView canHaveSubviews]
Summary:
Override `canHaveSubviews` in RCTShadowView subclass to disallow any nested content.
For now, this prop will be checked only in DEV mode for performance reasons.

Reviewed By: javache

Differential Revision: D5189083

fbshipit-source-id: 87087dd806e1fd7320128dab969b13642174f81c
2017-06-20 17:16:46 -07:00
John O'Leary 62b20ce582 Scrollview updatedChildFrames data controlled by prop
Summary: Optimize ScrollView by adding flag "DEPRECATED_sendUpdatedChildFrames" to gate whether updatedChildFrames data is computed and propagated on scroll events.  The frame data is used in ListView by the onChangeVisibleRows prop.  When this prop is not defined, unnecessary computation in ScrollView should not be performed.

Reviewed By: sahrens

Differential Revision: D5174898

fbshipit-source-id: e3eaed8760b76becf14dfeb00122bdebdaeae4ef
2017-06-08 12:03:02 -07:00
Jean Regisser 5114b61b5e Add support for flashScrollIndicators on iOS
Summary:
Flashing scroll indicators is a standard behavior on iOS to show the user there's more content.

Launch RNTester on iOS, go to the ScrollView section, tap the "Flash scroll indicators" button.
You'll see this:

![Flash scroll indicators](https://cloud.githubusercontent.com/assets/57791/26250919/ebea607a-3cab-11e7-96c6-27579cc809ab.gif)

I've exposed the method `flashScrollIndicators` on all scrolling components that were already exposing a `scrollToXXX` method so it's usable from those components using a ref.

Let me know what you think.
Closes https://github.com/facebook/react-native/pull/14058

Differential Revision: D5103239

Pulled By: shergin

fbshipit-source-id: caad8474fbe475065418d771b17e4ea9766ffcdc
2017-06-06 13:06:48 -07:00
Valentin Shergin 072d2709df Introducing `-[RCTView reactAccessibleView]`
Summary:
Sometimes, when we implement some custom RN view, we have to proxy all accessible atributes directly to some subview which actually has accesible content. So, in other words, this allows bypass some axillary views in terms of accessibility.
Concreate example which this approach supposed to fix:
https://github.com/facebook/react-native/pull/14200/files#diff-e5f6b1386b7ba07fd887bca11ec828a4R208

Reviewed By: mmmulani

Differential Revision: D5143860

fbshipit-source-id: 6d7ce747f28e5a31d32c925b8ad8fd4b98ce1de1
2017-06-02 14:19:57 -07:00
adamjmcgrath 23a34d4c65 Ignore "Frame load interrupted" errors in UIWebView
Summary:
Am writing an OAuth flow using `WebView`, when the OAuth provider redirects back to the [redirect_uri](https://developers.facebook.com/docs/facebook-login/manually-build-a-login-flow#logindialog) I intercept the request using `onShouldStartLoadWithRequest`, get the access token from the url and close the `WebView`.

The problem I see is that when the OAuth provider redirects to the `redirect_uri` and I intercept it by returning false from `onShouldStartLoadWithRequest`, I get a WebKitErrorDomain error code 102 ("Frame load interrupted").

Looking at some other iOS libraries that implement OAuth with a WebView - it seems that the error can be ignored. eg.

https://github.com/facebook/facebook-ios-sdk/blob/master/FBSDKCoreKit/FBSDKCoreKit/Internal/WebDialog/FBSDKWebDialogView.m#L146

https://github.com/evernote/evernote-sdk-ios/blob/master/evernote-sdk-ios/internal/ENOAuthViewController.m#L147

You can recreate the error using a url that automatically redirects, eg http://www.facebook.com -> https://www.facebook.com

```js
<WebView
  source={{ uri: 'http://www.facebook.com' }}
  onShouldStartLoadWithRequest={(event) => {
    if (event.url.startsWith('https://www.facebook.com')) {
      return false;
    }
    return true;
  }}
/>
```
Closes https://github.com/facebook/react-native/pull/12482

Differential Revision: D5154115

Pulled By: shergin

fbshipit-source-id: 25151d00a1f97e17760617ee5aac6a0140c733c8
2017-05-31 00:16:13 -07:00
Valentin Shergin 44af4d19d3 Fixed <TextInput>'s padding and border size computation and layout
Summary: Previosly `borderWidth` did not affect actual content inset (which was a problem).

Reviewed By: mmmulani

Differential Revision: D5072483

fbshipit-source-id: d43cba7414a9335b9f9fd4d1565d7aee403cce0e
2017-05-29 16:01:04 -07:00
Janic Duplessis 1658f36630 Improve z-index implementation on iOS
Summary:
This avoids reordering views because it created some bugs when the native hierarchy is different from the shadow views. This leverages `layer.zPosition` and takes z-index in consideration when we check what view should be the target of a touch.

**Test plan**
Tested that this fixes some layout issues that occurred when using sticky headers in the Expo home screen.
Closes https://github.com/facebook/react-native/pull/14011

Differential Revision: D5108437

Pulled By: shergin

fbshipit-source-id: 0abfe85666e9d236a190e6f54cdd5453cacfbcac
2017-05-28 21:45:32 -07:00
Adam Comella 35338e9008 iOS: Avoid adding extra spaces to accessibility label
Summary:
In some cases, `RCTRecursiveAccessibilityLabel` could return an accessibility label that had leading space, trailing space, or multiple spaces between words. This is because it always added a space before adding a label even if the label turned out to be empty.

This is fixed by being stricter about adding spaces.

Found test cases that used to introduce leading space, trailing space, or multiple spaces between words and verified that there aren't any extra spaces after the fix.

```
{/* Used to have leading space */}
<View accessible={true}>
  <View />
  <View accessibilityLabel='Two' />
  <View accessibilityLabel='Three' />
</View>

{/* Used to have 2 spaces between "One" and "Three" */}
<View accessible={true}>
  <View accessibilityLabel='One' />
  <View />
  <View accessibilityLabel='Three' />
</View>

{/* Used to have trailing space */}
<View accessible={true}>
  <View accessibilityLabel='One' />
  <View accessibilityLabel='Two' />
  <View />
</View>
```

Additionally, my team is using this fix in our app.

Adam Comella
Microsoft Corp.
Closes https://github.com/facebook/react-native/pull/14177

Differential Revision: D5127891

Pulled By: shergin

fbshipit-source-id: 42c3022895d844959e0037eaf381b326af3cd6d1
2017-05-24 23:15:41 -07:00
Feng999 a3d58ba570 Update RCTScrollView.m
Summary:
fix problem of function scrollToEnd: There are some strange thing happened when contentSize.height(width)  is smaller than bounds.size.height(width).  In fact, there is no need to scroll in this case.

Thanks for submitting a PR! Please read these instructions carefully:

- [x] Explain the **motivation** for making this change.
- [x] Provide a **test plan** demonstrating that the code is solid.
- [x] Match the **code formatting** of the rest of the codebase.
- [x] Target the `master` branch, NOT a "stable" branch.

What existing problem does the pull request solve?

A good test plan has the exact commands you ran and their output, provides screenshots or videos if the pull request changes UI or updates the website. See [What is a Test Plan?][1] to learn more.

If you have added code that should be tested, add tests.

Sign the [CLA][2], if you haven't already.

Small pull requests are much easier to review and more likely to get merged. Make sure the PR does only one thing, otherwise please split it.

Make sure all **tests pass** on both [Travis][3] and [Circle CI][4]. PRs that break tests are unlikely to be merged.

For more info, see the ["Pull Requests"][5] section of our "Contributing" guidelines.

[1]: https://medium.com/martinkonicek/what-is-a-test-plan-8bfc840ec171#.y9lcuqqi9
[2]: https://code.facebook.com/cla
[3]: https://travis-ci.org/facebook/react-native
[4]: http://circleci.com/gh/facebook/react-native
[5]: https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md#pull-requests
Closes https://github.com/facebook/react-native/pull/13180

Differential Revision: D4928778

Pulled By: javache

fbshipit-source-id: 8b74833593ee317df726a4035ec71bbc77d13afe
2017-05-24 11:45:46 -07:00
Valentin Shergin 5058e7eb05 Several layout related helper methods of RCTShadowView was moved to new (+Layout) category.
Reviewed By: javache

Differential Revision: D4865327

fbshipit-source-id: 4df71b57433370ee09c3f1288c4d6241a33f440a
2017-05-08 11:31:20 -07:00
Valentin Shergin 18fd18e792 Assertion on attempt to get layout metrics from dirtied Yoga node
Reviewed By: javache

Differential Revision: D4865294

fbshipit-source-id: e1bd2f297af87ffa817003f9e4dae94ad2c96644
2017-05-01 12:16:42 -07:00
Lukas Wöhrl 992e37c8bc Fix sizing of non strech items
Summary:
Fixes the sizing of items so that under most scenarios it calcultes its height by it's content for non exact measurings. This introduces a new useLegacyStretchBehaviour flag on the config to opt out of this change as it is breaking.

See facebook/yoga#505
Closes https://github.com/facebook/yoga/pull/506

Reviewed By: astreet

Differential Revision: D4954016

Pulled By: emilsjolander

fbshipit-source-id: d28bd5d174cd76951fb94df85e3b0cfab7f81ff7
2017-04-28 06:18:30 -07:00
Valentin Shergin ca07a5fd5f Adopting Yoga's YGConfig in RCTShadowView
Reviewed By: javache

Differential Revision: D4932540

fbshipit-source-id: 4a5ff3b34fc635b3291dff9a7c1a603179c90fa7
2017-04-27 13:05:55 -07:00
Valentin Shergin ca6e0b37cf `reactRespondsToTouch:` was removed
Summary:
* It complicates Touch Handling mechanism.
* The same functionality can be (and should be) implemented via overriding standard `hitTest:` method.
* It was marked as deprecated a while ago.

Reviewed By: mmmulani

Differential Revision: D4667776

fbshipit-source-id: 2e047c3308563a2849ea351a242270f0800fead2
2017-04-10 12:32:31 -07:00
Valentin Shergin bc1ea548d0 Better TextInput: Simplified focus/first-responder management on iOS
Summary:
Pair `reactWillMakeFirstResponder` and `reactDidMakeFirstResponder` was replaced with just `reactFocus` method
which is supposed to incapsulate all "focus" and "focus-later-if-needed" functionality.

Reviewed By: mmmulani

Differential Revision: D4664626

fbshipit-source-id: 8d3b7935ca26d32ba1d1826a585cce0396fcc885
2017-04-03 15:16:16 -07:00
Shruti Malugu edbb48c67a Replacing all instances of [UIApplication sharedApplication] wi…
Summary:
…th RCTSharedApplication()

Thanks for submitting a PR! Please read these instructions carefully:

- [ ] Explain the **motivation** for making this change.
          Using React Native latest version with Cocoapods 1.2.0 causes the following error inside iOS app extensions

> /react-native/React/Modules/RCTAccessibilityManager.m:67:70: ‘sharedApplication’ is unavailable: not available on iOS (App Extension) — Use view controller based solutions where appropriate instead.

Moving the use of [UIApplication sharedApplication] to RCTSharedApplication() which is safe on app extension

- [ ] Provide a **test plan** demonstrating that the code is solid.
        I am not sure how to test such that all the features which touch the modified code are tested.

- [ ] Match the **code formatting** of the rest of the codebase.
- [ ] Target the `master` branch, NOT a "stable" branch.

What existing problem does the pull request solve?
    Using React Native latest v
Closes https://github.com/facebook/react-native/pull/13227

Differential Revision: D4816338

Pulled By: javache

fbshipit-source-id: e3e3c77882990ad1817b0b633521cff52571ecd0
2017-04-01 03:34:41 -07:00
Ben Alpert 1d367004e9 Improve feel of scroll snapping behavior on iOS
Reviewed By: sahrens, shergin

Differential Revision: D4768384

fbshipit-source-id: 6319d058292be6ba38c059d8d1a1bf70bac603e2
2017-03-29 07:16:01 -07:00
Sokovikov c87c4d052f Fixed previously broken support for negative `scale` (`transform` style property)
Summary:
closes #13081

UIExplorer, TransformExample
Closes https://github.com/facebook/react-native/pull/13083

Reviewed By: mmmulani

Differential Revision: D4758237

Pulled By: shergin

fbshipit-source-id: 58385a4cde7a739b6657c293c381644a92918265
2017-03-24 18:15:42 -07:00
Pieter De Baets 9d377e98a0 Fix warnings in React.xcodeproj
Summary:
Various fixes of xcode projects and cleaning up some warnings
Closes https://github.com/facebook/react-native/pull/13109

Differential Revision: D4762652

Pulled By: lacker

fbshipit-source-id: b452976a58962439de4adecc8e703264af40cb38
2017-03-23 11:36:17 -07:00
Valentin Shergin 64c327ae68 Fixed issue where setting `zero scale` transfrom matrix to UIView brokes `hitTest` mechanism
Summary:
The Math Strikes Back

Several related things:
 * When we specify `scale: 0;` style for some view it ends up with calling `CATransform3DScale` with zero scale parameter.
 * In this case `CATransform3DScale` returns transform matrix full of zeros. It actually depends on representation and matrix-type (2d or 3d) but in UIView debugger it appears as [0, 0, 0, 0, ...]. And probably it is correct result.
 * By default, for hit-testing, UIKit uses specially optimized logic based on GPU/CALayer infrastructure under the hood. And the transform matrix full of zeros breaks this algorithm. I guess, it happens because zero-matrix doesn't quite make sense.

So, `scale: 0;` is a weird edge case, and in this diff, we are trying to illuminate it by replacing with epsilon value.

Related SO issues:
http://stackoverflow.com/questions/25964224/cgaffinetransformscale-not-working-with-zero-scale
http://stackoverflow.com/questions/7937369/animate-uiview-scale-to-zero

Reviewed By: blairvanderhoof

Differential Revision: D4734475

fbshipit-source-id: 7241cdffa86c05a6552860a25789e2281588ba23
2017-03-19 22:01:55 -07:00
ShiHui 1195a8f3e6 Fix RCTPicker crash
Summary:
If user slide picker when picker item is zero, `UIPickerViewDelegate` will call `pickerView:didSelectRow:inComponent` row=0, `_items[row][@"value"]` will crash.
Closes https://github.com/facebook/react-native/pull/12187

Differential Revision: D4709882

Pulled By: mkonicek

fbshipit-source-id: 772c819d4eaef41ac983287877bda2918f40b1a7
2017-03-14 17:46:24 -07:00
Pieter De Baets 41f3d0cf2d Expose getter for 'flex' property
Summary: Helps mitigate part of https://github.com/facebook/react-native/pull/12245 while we wait for a more comprehensive solution.

Reviewed By: emilsjolander

Differential Revision: D4571776

fbshipit-source-id: 185cd1b0d3af37724136a37471df412c2000dfe4
2017-03-13 06:00:19 -07:00
Valentin Shergin 264d60b979 Setting `availableSize` for `RCTRootShadowView` on earlier stage
Summary:
Moving setting `availableSize` for `RCTRootShadowView` on earlier stage allows to prevent situations where `availableSize` is not specified yet, but Yoga layout is already happening.
Because `availableSize` equals {infinity, infinity} by default (in this case), Yoga returns a lot of nodes with infinit metrics, which confises UIKit.

Reviewed By: mmmulani

Differential Revision: D4672170

fbshipit-source-id: f9d8c84799dcbdb6b9230ddef6284d84df268833
2017-03-08 19:00:14 -08:00
Martin Konicek 48f30eca7e Move iOS Maps out of the GitHub repo to internal fb codebase
Summary:
MapView has been deprecated in open source for a while: http://facebook.github.io/react-native/docs/mapview.html
We still want to use it internally. Moving it away from the GitHub folder.

Reviewed By: mmmulani

Differential Revision: D4646199

fbshipit-source-id: f469971e448dbca12afe141b43fa8a2518c7d467
2017-03-08 05:01:36 -08:00
Janic Duplessis 5353d39172 Remove unused native iOS sticky headers implementation
Summary:
Remove the native iOS sticky headers implementation that has been replaced by the js Animated one. Also remove a line in JS that made sure we passed null to native so it did not use the native implementation.

**Test plan**
Made sure there were no more mentions of sticky / header in native ScrollView related code.
Tested that sticky headers still work :o
Closes https://github.com/facebook/react-native/pull/12696

Differential Revision: D4657391

Pulled By: ericvicenti

fbshipit-source-id: 16324a45ca4ce5cd143293c61394a0fa7ad0c4a1
2017-03-05 14:21:40 -08:00
Emil Sjolander 4d69f4b2d1 Add display:none support to react native
Summary:
This diff adds display:none support to React Native. This enables hiding components which still calling their render method and keeping them within the state of your application. This enables preserving state in a component even though the component is not visible. Previously this was often implemented by rendering a component off screen as a work around. See below playground for usage.

```
class Playground extends React.Component {
  render() {
    return (
      <View style={{width: '100%', height: '100%', flexDirection: 'row', backgroundColor: 'white'}}>
        <View style={{width: 100, height: 100, display: 'none', backgroundColor: 'red'}}/>
        <View style={{width: 100, height: 100, backgroundColor: 'blue'}}/>
      </View>
    );
  }
}
```

Reviewed By: astreet

Differential Revision: D4611771

fbshipit-source-id: 0dbe0494d989df42994ab9ad5125d47f3233cc5a
2017-03-01 09:16:05 -08:00
Emil Sjolander 31f848a5fa Expose alignContent to react native
Summary:
This diff adds alignContent (https://developer.mozilla.org/en-US/docs/Web/CSS/align-content) support to React Native. This enables aligning the lines of multi-line content. See below playground for example usage.

```
class Playground extends React.Component {
  render() {
    return (
      <View style={{width: '100%', height: '100%', flexDirection: 'row', backgroundColor: 'white', flexWrap: 'wrap', alignContent: 'space-between'}}>
        <View style={{width: 100, height: 100, marginLeft: 10, marginTop: 10, backgroundColor: 'red'}}/>
        <View style={{width: 100, height: 100, marginLeft: 10, marginTop: 10, backgroundColor: 'red'}}/>
        <View style={{width: 100, height: 100, marginLeft: 10, marginTop: 10, backgroundColor: 'red'}}/>
        <View style={{width: 100, height: 100, marginLeft: 10, marginTop: 10, backgroundColor: 'red'}}/>
        <View style={{width: 100, height: 100, marginLeft: 10, marginTop: 10, backgroundColor: 'red'}}/>
        <View style={{width: 100, height: 100, marginLeft: 10, marginTop: 10, backgroundColor: 'red'}}/>
        <View style={{width: 100, height: 100, marginLeft: 10, marginTop: 10, backgroundColor: 'red'}}/>
      </View>
    );
  }
}
```

Reviewed By: astreet

Differential Revision: D4611803

fbshipit-source-id: ae7f6b4b7e9f4bc78d2502da948214294aad4dd2
2017-03-01 09:16:05 -08:00
Emil Sjolander cc275557be Add margin auto support to react native
Summary:
This diff adds margin:auto (https://drafts.csswg.org/css-flexbox-1/#auto-margins) support to React Native. This enables layout not previously supported without inserting empty 'spacer' views. See below Playground for usage.

```
class Playground extends React.Component {
  render() {
    return (
      <View style={{width: '100%', height: '100%', flexDirection: 'row', backgroundColor: 'white'}}>
        <View style={{width: 100, height: 100, backgroundColor: 'red'}}/>
        <View style={{width: 100, height: 100, marginLeft: 'auto', backgroundColor: 'blue'}}/>
      </View>
    );
  }
}
```

Reviewed By: astreet

Differential Revision: D4611753

fbshipit-source-id: e78335565c193f7fb263129a638b444715ba5ab0
2017-03-01 09:16:05 -08:00
Emil Sjolander 23f2f5f239 default root node to size of parent contraints
Reviewed By: dshahidehpour

Differential Revision: D4634616

fbshipit-source-id: 089eb4313c5bb810a6ff56f158cd19cec71808ec
2017-03-01 07:15:23 -08:00
Emil Sjolander 702564fb60 Pass the parent size to YGNodeCalculateLayout instead of the node size
Reviewed By: astreet

Differential Revision: D4611417

fbshipit-source-id: 2fb0eedffa17f0ec89b601722a1717a72e216b9e
2017-02-28 08:14:51 -08:00
Valentin Shergin b00c1fa3b6 `accessibilityViewIsModal` property was exposed for any view (iOS only)
Reviewed By: mmmulani

Differential Revision: D4582786

fbshipit-source-id: 0902b8cc762042e772798ea7eaa350bc9d737cfb
2017-02-27 23:46:14 -08:00
Benoit VALLON ca2741609a Fix badgeColor for previous iOS 10 versions
Summary:
The actual badgeColor prop causes the following error when run on device with a version inferior to iOS 10 like iPad 2 and iPad mini 1.

`*** Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '-[UITabBarItem setBadgeColor:]: unrecognized selector sent to instance 0x7968be80'`

This PR fixes it by checking at runtime if the selector is available for the current running version.

It also makes the color available at start by using the variable `self.barItem`. Currently, the color appears only after a reload.
Closes https://github.com/facebook/react-native/pull/12354

Differential Revision: D4598036

Pulled By: shergin

fbshipit-source-id: 9f104fc27db51213a54273e33c5a22f1b350c55e
2017-02-22 12:04:10 -08:00
Adam Comella 6fbc2c9972 iOS: Remove leading space from accessibilityLabel
Summary:
In some cases, the accessibilityLabel contains a leading space. This is because `RCTRecursiveAccessibilityLabel` adds a space before every iteration of the loop including the first.

After this change, the contract is that:
  - `RCTRecursiveAccessibilityLabel` always returns a string with a leading space.
  - `accessibilityLabel` never returns a string with a leading space.

**Test plan**

I created a test app with the following code:

```
<View style={{height: 100, width: 100, backgroundColor: 'steelblue'}} accessible={true}>
  <View style={{height: 20, width: 20, backgroundColor: 'red'}} accessibilityLabel='One' />
  <View style={{height: 20, width: 20, backgroundColor: 'yellow'}} accessibilityLabel='Two' />
  <View style={{height: 20, width: 20, backgroundColor: 'green'}} accessibilityLabel='Three' />
</View>
```

Before this change, the accessibilityLabel of the outermost View was " One Two Three" (notice the leading space).

After this change, it is "One Two Three" as desired.

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

Reviewed By: javache

Differential Revision: D4596761

Pulled By: shergin

fbshipit-source-id: 7d5ff704e858d9f277d1547339a2831ffa90f592
2017-02-22 11:16:13 -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
Pieter De Baets bdd27f4696 Break apart -[RCTComponentData propBlockForKey:inDictionary:]
Reviewed By: shergin

Differential Revision: D4578549

fbshipit-source-id: 726773fdf8c97cdcc3b0540b32278e36c00b19b5
2017-02-20 05:15:25 -08:00
Valentin Shergin ba170ec78c Simplifying mess with RCTRootViewSizeFlexibility
Summary:
Now things look much more clear, I hope.
This diff:
 * Introduces new property of `RCTRootShadowView` `availableSize` which represents exactly what we transmit to layout engine;
 * Illuminates conflict between logical `availableSize` and explicitly specified size of DOM node (current `size`);
 * Splits overcomplicated `setSize:forView:` method into two unrelated ones;
 * Changes actual values of `RCTRootViewSizeFlexibility` enum constants for simpler usage;
 * Completely removes `sizeFlexibility` concept from `RCTRootShadowView` (in favor of special values of `availableSize`);
 * Makes the code clearer finally.

This is beginning of big effort to improve `RCTRootView` and co.

Reviewed By: mmmulani

Differential Revision: D4562834

fbshipit-source-id: f5baaf2859ea430d44645a6b5d35f222f15a668e
2017-02-19 23:19:47 -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
Mehdi Mulani 93a263d874 Make RCTRefreshControl not dependent on order of setting properties
Summary: With the Cxx bridge, properties are not guaranteed to be set it any order (and furthermore, they should not be). RCTRefreshControl previously had its title set first, and would crash otherwise. This fixes that.

Reviewed By: mhorowitz

Differential Revision: D4580253

fbshipit-source-id: 39baecceb8b67c6a851c08ba9cabbf4dc99359cb
2017-02-17 15:16:01 -08:00
Emil Sjolander 1b5eb36e2f Fix up some small issues with YGUnitAuto
Reviewed By: wwjholmes

Differential Revision: D4567045

fbshipit-source-id: ace5fd89bd534a6bb5ec7dba0c3afbf13d62d7c9
2017-02-16 06:59:33 -08:00
Kevin Gozali a512f6dcf6 ios: exposed 'RCTConvert UITabBarSystemItem:' in the header file
Summary: This method was defined in the .m file already, so we can just expose it to the header for other usages.

Reviewed By: mmmulani, shergin

Differential Revision: D4557942

fbshipit-source-id: a1be8af8e31b88a152cabfab6d4cf82316088572
2017-02-15 02:17:17 -08:00
Valentin Shergin 5263699f90 Introducing RCTRootShadowView.baseDirection property
Reviewed By: dshahidehpour

Differential Revision: D4555904

fbshipit-source-id: 8f0a2a9a38af42334188bc1cc5e0f6dded8592ae
2017-02-14 15:33:15 -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
Lukas Wöhrl dbaa687518 Feature auto margin
Summary:
Even so I know there are some opinions against ```margin: 0 auto``` it's still part of the spec: https://www.w3.org/TR/css-flexbox-1/#auto-margins and pretty usefull if you have to position via ```justify-content```.

This PR adds an implementation for that.

It adds an additonal ```YGUnitAuto``` and margins got ```YGNodeStyleSetMarginAuto``` functions as well.
Closes https://github.com/facebook/yoga/pull/357

Reviewed By: astreet

Differential Revision: D4501142

Pulled By: emilsjolander

fbshipit-source-id: 86519f8632496f46e78a7c9dbc5b21e212e3e0c7
2017-02-14 14:31:31 -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
Valentin Shergin d8748233ca Removing `transformMatrix` and `decomposedMatrix` properties
Summary: We deprecated `transformMatrix` and `decomposedMatrix` in D3239960 10 months ago. This revision finally removes remains of this functionality from native code.

Reviewed By: mmmulani

Differential Revision: D4515760

fbshipit-source-id: b4d5b7e834ac4a775f4992b28270b4ff961889a6
2017-02-07 14:02:20 -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
Valentin Shergin 233015c93e `[-RCTUIManager setFrame:forView:]` was replaced with `[-RCTUIManager setSize:forView:]`
Reviewed By: fkgozali

Differential Revision: D4511712

fbshipit-source-id: 5c51d573bf638cb9b55d5f03b9f1882dc6129510
2017-02-06 11:01:11 -08:00
Valentin Shergin 54d3e83bbf Fixed crash in RCTScrollView on iOS 8
Reviewed By: javache

Differential Revision: D4508906

fbshipit-source-id: 08955f338879f708d35f4784e858a92b542e8661
2017-02-03 15:28:34 -08:00
Valentin Shergin 91910d87de Better RTL support especially for ScrollView's
Reviewed By: fkgozali

Differential Revision: D4478913

fbshipit-source-id: 525c17fa109ad3c35161b10940776f1426ba2535
2017-02-02 09:58:30 -08:00
Valentin Shergin f33f84e75f Deprecating/removing `setFrame`, `setLeftTop`, and co.
Summary:
Motivation:
 * `RCTShadowView`'s `frame` property actually represents computed layout of the view. We must not use it as a setter for yoga node styles;
 * Using `frame` and `setLeftTop` in existing way actually works only for view with absolute positioning, so it is super rare and special case;
 * Internally, setting `frame` only make sense to `RootView`, and in that case there we always must not change `origin` we are introducing `setSize` method.

Changes:
 * `[-RCTShadowView setFrame:]` was removed, `frame` property is readonly now;
 * `[-RCTShadowView setLeftTop:]` was removed; no replacement provided;
 * `[-RCTShadowView size]` read-write property was added;
 * `[-RCTUIManager setFrame:forView:]` was deprecated, use (just introduced) `setSize:forView:` instead;
 * `[-RCTUIManager setSize:forView:]` was added.

If you are still need some of removed methods, you are probably doing something wrong. Consider using `setIntrinsicContentSize`-family methods,
`setSize`-family methods, or (in the worst case) accessing `yogaNode` directly.

Reviewed By: javache

Differential Revision: D4491384

fbshipit-source-id: 56dd84567324c5a86e4c870a41c38322dc1224d2
2017-02-01 13:13:27 -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
Max Graey c68195929b Fix skew transform on native side (iOS & Android)
Summary:
According to #11992 fix skew transform in native code as well

janicduplessis vjeux
Closes https://github.com/facebook/react-native/pull/12106

Differential Revision: D4479880

fbshipit-source-id: d84780842b555f6352d84d229b5b6c5c3c6a0647
2017-01-28 12:43:30 -08:00
Rob Hogan 2a5cb9a773 Typo: bagde -> badge
Summary:
Simple typo fix for an Obj-C local variable.
Closes https://github.com/facebook/react-native/pull/12099

Differential Revision: D4477106

fbshipit-source-id: 7626a22981e24946398d5f6299fd7dab664a1419
2017-01-27 14:58:27 -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
Eric Vicenti 65513e501a Bug fix for nil TVView on pop
Summary:
Explain the **motivation** for making this change. What existing problem does the pull request solve?

This change is required when you try to set a focus on a view that doesn't exist and thus cannot be focused. In my specific use case, this occurred when trying to set a focus on a list item in a setInterval when the View (with the specific list item) had been popped. The while loop ran infinitely (eventually freezing the app) since the rootView doesn't exist. This adds that check and breaks out if so.

All obj-c tests ran successfully.

dlowder-salesforce
Closes https://github.com/facebook/react-native/pull/12073

Differential Revision: D4468989

Pulled By: ericvicenti

fbshipit-source-id: 7926c887035722c983c41cb6b6d9df567010c2ee
2017-01-26 09:43:32 -08:00
Valentin Shergin 64041669ee The warning 'cannot calculate shadow efficiently' is not a warning anymore
Reviewed By: fkgozali, yungsters

Differential Revision: D4445304

fbshipit-source-id: 3a37150ae2beaf44b505dc36b575b7d44619e071
2017-01-25 12:28:50 -08:00