Commit Graph

545 Commits

Author SHA1 Message Date
Julien K 6c353fd7e9 onPress animation with magnification
Summary:
Related to: #15454

Motivation: Improve tvOS feeling for TouchableHighlight

![changewithaniamtion](https://user-images.githubusercontent.com/7658664/29193477-b99b4a10-7e25-11e7-8b31-e0e4ca9d7720.gif)

- When you select the button he is focus and the underlay is show
- When you press the button, there is an animation, but after the animation, the focus is on the button and the underlay is show

Play with tvParallaxProperties on tvOS, test with and without patch just to see the actual behaviour
```
			<TouchableHighlight
						tvParallaxProperties={{
							enabled: true,
							shiftDistanceX: 0,
							shiftDistanceY: 0,
							tiltAngle: 0,
							magnification: 1.1,
                                                        pressMagnification: 1.0,
							pressDuration: 0.3,
						}}
						underlayColor="black"
						onShowUnderlay={() => (console.log("onShowUnderlay")}
						onHideUnderlay={() =>  (console.log("onHideUnderlay")}
						onPress={() =>  (console.log("onPress")}
					>
						<Image
							style={styles.image}
							source={ uri: 'https://www.facebook.com/images/fb_icon_325x325.png' }
						/>
					</TouchableHighlight>
```
Closes https://github.com/facebook/react-native/pull/15455

Differential Revision: D6887437

Pulled By: hramos

fbshipit-source-id: e18b695068bc99643ba4006fb3f39215b38a74c1
2018-02-27 13:10:02 -08:00
Manman Ren ebbd4371c9 Mark ObjC methods that are called from React Native as dynamic.
Reviewed By: mmmulani

Differential Revision: D7087100

fbshipit-source-id: 18e5726e5b48e7b71fcaab19f6fe73be0cad6233
2018-02-26 12:24:17 -08:00
siddhantsoni 16c9e5b715 Fix: Added scroll Bounds check in scrollToOffset method in RCTScrollView on iOS
Summary:
<!--
Thank you for sending the PR! We appreciate you spending the time to work on these changes.

Help us understand your motivation by explaining why you decided to make this change.

You can learn more about contributing to React Native here: http://facebook.github.io/react-native/docs/contributing.html

Happy contributing!

-->

The scrollToOffset method of RCTScrollView for iOS does not include bound check for the scroll offset provided to the method. This can cause the whole view to scroll out of screen if the offset provided is greater than the bounds of the View.
The same does not happen on Android, where the scroll halts once the last item of the scrollView is in the viewport.
I have added bounds check so the offset resets to the MaxOffset which makes sure the view does not scroll out of the viewport.

The issue can be observed in the following snack:
https://snack.expo.io/H1363Uo8f

![ezgif com-optimize 1](https://user-images.githubusercontent.com/16662518/36068270-2437ae88-0ef7-11e8-96dd-819b4ae0fd67.gif)

To test my changes I ran the code provided in the snack above with the react-native dependency pointing to my branch. As can be see in the video attached below, the scroll halts once it hits the end of the ScrollView even if the scroll offset provided is higher than the bounds of the ScrollView. It also does not scroll up for negative scroll offset.

![ezgif com-optimize](https://user-images.githubusercontent.com/16662518/36068130-9ae4f918-0ef3-11e8-8728-af7b2888bdb8.gif)

[IOS] [BUGFIX] [ScrollView] - Added bounds check to prevent ScrollView from scrolling to an offset which is out of bounds of the ScrollView for iOS.
Closes https://github.com/facebook/react-native/pull/17927

Differential Revision: D7014466

Pulled By: shergin

fbshipit-source-id: a817738d08e1057a4c70f43373132f88fa1461c4
2018-02-25 22:18:31 -08:00
Sophie Alpert 1490ab12ef Update license headers for MIT license
Summary:
Includes React Native and its dependencies Fresco, Metro, and Yoga. Excludes samples/examples/docs.

find: ^(?:( *)|( *(?:[\*~#]|::))( )? *)?Copyright (?:\(c\) )?(\d{4})\b.+Facebook[\s\S]+?BSD[\s\S]+?(?:this source tree|the same directory)\.$
replace: $1$2$3Copyright (c) $4-present, Facebook, Inc.\n$2\n$1$2$3This source code is licensed under the MIT license found in the\n$1$2$3LICENSE file in the root directory of this source tree.

Reviewed By: TheSavior, yungsters

Differential Revision: D7007050

fbshipit-source-id: 37dd6bf0ffec0923bfc99c260bb330683f35553e
2018-02-16 18:31:53 -08:00
Mehdi Mulani f96dfb9468 Disable font scaling when an explicit font handler is set
Reviewed By: sahrens

Differential Revision: D7003464

fbshipit-source-id: f36ff344c50a9c63af6c852138041c1c918259c8
2018-02-16 12:37:51 -08:00
Valentin Shergin f91f7d91a1 Reimagining of RCTShadowView layout API
Summary:
This is reimagining of interoperability layer between Yoga and ShadowViews (at least in Yoga -> RN part).
Goals:
 * Make it clear and easy.
 * Make clear separation between "what layout what", now parent always layout children, noone layout itself.
 * Make possible to interleave Yoga layout with custom imperative layout (may be used in SafeAreaView, Text, Modal, InputAccessoryView and so on).

Reviewed By: mmmulani

Differential Revision: D6863654

fbshipit-source-id: 5a6a933874f121d46f744aab99a31ae42ddd4a1b
2018-02-12 00:32:43 -08:00
Valentin Shergin 114c258045 Enabling round-to-pixel Yoga feature for RN (iOS)
Summary:
This change enables built-in Yoga mechanism which rounds producing layout metrics to closest "pixel" values.
See previous diff for more context.

Reviewed By: fkgozali

Differential Revision: D6889762

fbshipit-source-id: bc2eea44704db4b377e2e14fab9f67be8c935719
2018-02-05 22:17:22 -08:00
Valentin Shergin ceb1d1ca5b Removing our own implementation of round-to-pixel algorithm
Summary:
> Okay, I don't remember where we first met
> But hey, admitting is the first step

This issue has a looong history.
The original algorithm was introduced by Nick Lockwood (nicklockwood Hey Nick! We miss you!) a while ago and from the very beginning this has one small error that basically makes it useless (try to find it yourself, it's fun!)
The problem was discovered and fixed twice (D4133643, D4983054), but every time we found that our <Text> infra was not ready for this, so we reverted and abandoned the change. As part of the last attempt to finally solve the issue, I ported the algorithm to Yoga where it lives today and works very well for Lytho and CK.
For now, the vision is clear:
 * The basic algorithm should live in Yoga for unification and performance reasons.
 * We still have to have `absolutePostion` as part of this API because it might be useful for some components which implement its own custom/non-Yoga-based layout.
 * We have to enable it in RN eventually.

So, this is the first step: Removing old, broken code which we don't plan to fix and use.

Make React Native crisp again!

Reviewed By: fkgozali

Differential Revision: D6888662

fbshipit-source-id: 2e5098d9935dcbe05d66c777dad3a9ec8ac87ec3
2018-02-05 22:17:22 -08:00
Valentin Shergin c19bc79688 `[RCTShadowView isHidden]` was removed
Summary:
It's unused.
Use `display` prop instead to control visiblity of the view.

Reviewed By: fkgozali

Differential Revision: D6888104

fbshipit-source-id: dd37a365033ec36bdfcfa305ec6a965a10dec2cd
2018-02-05 22:17:22 -08:00
Valentin Shergin 9dfa2e7f3c Removed `[ShadowView collectUpdatedFrames:]`
Summary: Another juicy leftover from old Text implementation.

Reviewed By: fkgozali

Differential Revision: D6887942

fbshipit-source-id: d0363d06d566554c03d0ae3293597daf9c387028
2018-02-05 22:17:22 -08:00
Valentin Shergin 0f9fc4b295 `processUpdatedProperties` & `collectUpdatedProperties` was removed from RCTShadowView
Summary: This is leftovers from last <Text> reimplementation; nobody uses it and it does not hooked up with UIManager.

Reviewed By: fkgozali

Differential Revision: D6887795

fbshipit-source-id: 9e2e29af4ba959270096eeb494666d1cacaeba32
2018-02-05 22:17:22 -08:00
Mehdi Mulani a9c684a0ff Allow substituting a default font handler
Reviewed By: nscoding

Differential Revision: D6798995

fbshipit-source-id: 541b4391428d1ee9c0b394033182dc232536c864
2018-01-30 13:51:19 -08:00
Semen Zhydenko 8ffc16c6e7 Typos in code
Summary:
To fix typos

No testing required, changed only internal things names

No

addtionalStyles -> additionalStyles
occured -> occurred
recomendedType -> recommendedType
markDirtyAndPropogate -> markDirtyAndPropagate
targetting -> targeting
RCTApplyTranformationAccordingLayoutDirection -> RCTApplyTransformationAccordingLayoutDirection (tranform -> transform)
Closes https://github.com/facebook/react-native/pull/17587

Differential Revision: D6832696

Pulled By: shergin

fbshipit-source-id: 452287e5ce82df5c6b87126cb21889b7bd9d73c1
2018-01-29 19:17:33 -08:00
Adam Putinski 31288161e1 Add accessibilityElementsHidden prop
Summary:
Allow iOS to have similar accessibility functionality to Android. This PR exposes the `accessibilityElementsHidden` property on iOS which is similar to Android's `importantForAccessibility="no-hide-descendants"`

I didn't see any existing examples for testing native props being passed through, but I did add an example to the RNTester app. I've attached some screenshots using the Accessibility Inspector to verify the property was correctly passed through.

![a](https://user-images.githubusercontent.com/603528/34998153-50e66776-faac-11e7-826d-1445a6813929.png)
![b](https://user-images.githubusercontent.com/603528/34998158-535a7420-faac-11e7-80d4-992fb7cd82dd.png)

I've updated the website with appropriate documentation.

https://github.com/facebook/react-native-website/pull/141

![screen shot 2018-01-16 at 10 23 50](https://user-images.githubusercontent.com/603528/34998202-6f2f39a6-faac-11e7-8651-0cfe8e037a30.png)
![screen shot 2018-01-16 at 10 23 59](https://user-images.githubusercontent.com/603528/34998205-711d6f94-faac-11e7-974d-54340c72fce4.png)

[IOS] [FEATURE] [View] - Added accessibilityElementsHidden property
Closes https://github.com/facebook/react-native/pull/17627

Differential Revision: D6806444

Pulled By: hramos

fbshipit-source-id: 50d31fdb92f4c59ae9355b019c422418b2e6cc24
2018-01-29 14:44:11 -08:00
Valentin Shergin e3ff3cf6cb Removed outdated assertion in RCTShadowView related to breaking change in Yoga
Summary: It's been more than two years; I think everyone already migrated and learned the new behavior.

Reviewed By: emilsjolander

Differential Revision: D6829885

fbshipit-source-id: a86d56fb7235a137e9ce6e360d7ae2224b047313
2018-01-29 10:47:14 -08:00
Vojtech Novak ed5872e2cc Make sure refreshControl shows up on initial render if specified
Summary:
[this commit](2e1707d0e6) which was just a small refactor broke refreshControl behavior - if we render FlatList with refreshing=true, the refreshControl won't be visible on initial render.

The problem is, the [previous beginRefreshing method](2e1707d0e6 (diff-cfafa8d7e42ab87ab863f917e187a4aeL51)) was renamed to `beginRefreshingProgramatically` and the old call was left in one place [here](2e1707d0e6 (diff-cfafa8d7e42ab87ab863f917e187a4aeR47)).

Now, I am not sure what kind of jumping the mentioned commit was fixing, but since this fix only concerns the initial render, I believe it will not influence the jumping fix.

I have tested this locally in my app, can provide a video if needed.

none

 [IOS] [BUGFIX] [RefreshControl] - Make sure refreshControl shows up on initial render if specified
Closes https://github.com/facebook/react-native/pull/17727

Differential Revision: D6827402

Pulled By: shergin

fbshipit-source-id: 25849244e87af54f25d636b6ade7adcf88958980
2018-01-28 22:29:51 -08:00
Valentin Shergin 2716f53220 The New <Text> on iOS
Summary:
This is a complete rewrite of RCTText, the part of React Native which manages Text and TextInput components.

Key points:

* It's understandable now. It follows a simple architectural pattern, and it's easy to debug and iterate. Text flow layout is a first-class citizen in React Native layout system now, not just a wired special case. It also brings entirely new possibilities such as nested interleaving <Text> and <View> components.
* All <Text>-specific APIs were removed from UIManager and co (it's about ~16 public methods which were used exclusively only by <Text>).
* It relies on new Yoga measurement/cloning API and on-dirty handler. So, it removes built-in dirty propagation subsystem from RN completely.
* It caches string fragments properly and granularly on a per-node basis which makes updating text-containing components more performant.
* It does not instantiate UIView for virtual components which reduces memory utilization.
* It drastically improves <TextInput> capabilities (e.g. rich text inside single line <TextInput> is now supported).

Screenshots:
https://cl.ly/2j3r1V0L0324
https://cl.ly/3N2V3C3d3q3R

Reviewed By: mmmulani

Differential Revision: D6617326

fbshipit-source-id: 35d4d81b35c9870e9557d0211c0e934e6072a41e
2018-01-24 00:03:01 -08:00
Spencer Ahrens 65184ec6b0 rename and extend new maintain visible content position feature
Summary:
Builds off of cae7179c94

- Make the prop a dictionary for more configuration options
- Rename `maintainPositionAtOrBeyondIndex` -> `maintainVisibleContentPosition` + `minIndexForVisible`
- Add autoscroll threshold feature

Given the async native of RN JS and background layout, there is no way to trigger the scrollTo from JS without risking a delay, so we add the feature in native code.

== Test Plan ==
ScrollViewExample:
https://youtu.be/pmY8pxC9PRs

Reviewed By: shergin

Differential Revision: D6729160

fbshipit-source-id: 70f9bae460ce84567857a4f696da78ce9b3b834c
2018-01-18 14:01:50 -08:00
Valentin Shergin 6882132421 Introduced -[RCTShadowView contentFrame]
Summary:
Another trivial sugar/helper to access computed by Yoga layout metrics.
We will use it soon in the new Text render/layout engine.

Reviewed By: mmmulani

Differential Revision: D6671979

fbshipit-source-id: d36933415c2fa50bae5cc171434d8f0b281955b7
2018-01-16 12:57:46 -08:00
Semen Zhydenko d2c569795c Typos in comments and log messages
Summary:
No code changes, no testing required.

alligned -> aligned
allignment -> alignment
completly -> completely
conseptually -> conceptually
decendents -> descendants
indefinetly -> indefinitely
dimention -> dimension
doesnt -> doesn't
safegaurd -> safeguard
intialization -> initialization
hierachy -> hierarchy
happend -> happened
gaurd -> guard
programatically -> programmatically
initalized -> initialized
immidiately -> immediately
occured -> occurred
unkown -> unknown
neccessary -> necessary
neccesarily -> necessarily
occuring -> occurring
comoponent -> component
propogate -> propagate
recieved -> received
referece -> reference
perfomance -> performance
recieving -> receiving
subsquently -> subsequently
scoll -> scroll
suprisingly -> surprisingly
targetting -> targeting
tranform -> transform
symetrical -> symmetrical
wtih -> with
Closes https://github.com/facebook/react-native/pull/17578

Differential Revision: D6718791

Pulled By: shergin

fbshipit-source-id: 4ab79c1131ec5971d35a0c7199eba7ec0a0918ad
2018-01-12 22:18:45 -08:00
Spencer Ahrens cae7179c94 new feature to support smooth bi-directional content loading
Summary:
== Problem / Background ==

Most lists paginate in a single direction (standard infinite list), but some paginate in both directions. Most common example is a chat thread where new messages show up on the bottom, and old content can be loaded by scrolling up. Comment threads are another example.

Right now, adding content to the bottom of a scroll view is smooth - the content doesn't jump. But when adding to the top of the scrollview, the content gets pushed down, which is jarring (note this may appear reversed because of inverting the list which is common for chat applications).

== Approach ==

The basic idea is simple - we set a flag in JS, then for every uimanager transaction, we record which is the first eligible and visible view in the ScrollView, and compare it's new origin to the old one. If it has changed, we update the contentOffset of the ScrollView to compensate.

This is done by observing `willPerformMounting` directly (only from scrollviews that have this new property set), and then observing the prev state with prependUIBlock and making the update synchronously in addUIBlock to avoid any flicker.

There is also a way to skip views that we don't care about, like a spinner at the top of the view that we don't want to stay in place - we actually want it to get pushed up by the new content, replaced visually in the viewport.

== Notes ==

Most chat applications will probably want to do a scrollToTop when new content comes in and the user is already scrolled at or near the bottom.

This is glitchy if visible children are re-ordered, which could be fixed with additional logic, but it doesn't come up in the type of applications we're targetting here so punting on that.

== Test Plan ==

https://youtu.be/4GcqDGz9eOE

Reviewed By: shergin

Differential Revision: D6696921

fbshipit-source-id: 822e7dfcb207006cd1ba098356324ea81f619428
2018-01-12 19:16:00 -08:00
Stepan Hruda 2c74f93a62 Change setProjectRoot argument to NuclideUri
Reviewed By: matthewwithanm

Differential Revision: D6624825

fbshipit-source-id: 06df9af5c7be321b19f13efa8125fb10d8e00422
2018-01-10 12:32:55 -08:00
Douglas 3bd89867d6 Import RCTTVRemoteHandler only on tvOS
Summary:
Fix issue #17027 (`RCTModalHostView` has a tvOS dependency that was not wrapped in `TARGET_OS_TV`)

Existing test automation should pass.

[GENERAL] [BUGFIX] [tvOS] Fix cocoapods compile issue in RCTModalHostView
Closes https://github.com/facebook/react-native/pull/17502

Differential Revision: D6688166

Pulled By: hramos

fbshipit-source-id: 38297f439f75a8303f59f83b92e004c6c73d9bf6
2018-01-09 15:46:47 -08:00
Valentin Shergin f96f9c5fd6 Sideeffectless measuring of shadow views
Summary:
That's now possible thanks to new Yoga's clonning API.
That will speed up RCTSurface measuring (see the next diff in stack) and should illuminate a class of problems in CK interop layer.
We also will use it in the new text layout engine (in React Native).

Reviewed By: gkassabli

Differential Revision: D6665632

fbshipit-source-id: e94909f0af89e9c7fc5e46b95090ecb3c52546a2
2018-01-07 18:31:20 -08:00
Valentin Shergin d9e5b313bb Helpers for proper conversion float values between CG and YG representations
Summary:
Yoga and CoreGraphics have different opinions about how "infinity" value
should be represented.
Yoga uses `NAN` which requires additional effort to compare all those values,
whereas GoreGraphics uses `GFLOAT_MAX` which can be easyly compared with
standard `==` operator.

Messing with this can cause super weired bugs like 100% CPU load for couple of seconds somewhere in CoreGraphics.

Reviewed By: mmmulani

Differential Revision: D6665633

fbshipit-source-id: b6236c6fa50d1f8fb0c9576203922f7b24b7301e
2018-01-07 18:31:20 -08:00
Valentin Shergin af226ef949 Designated methods to control dirty propagation
Summary:
Those are supposed to replace all `dirtyText`, `dirtyPropagation`, `isPropagationDirty`, `setTextComputed`, `isTextDirty` and so on.
We will use it widely soon (and remove all old ones).

Reviewed By: mmmulani

Differential Revision: D6665634

fbshipit-source-id: 3c1db7154e90b71446756f2495627b163c779996
2018-01-07 18:31:20 -08:00
Pieter De Baets a0ff8c7706 Fix ReactLegacy and delete RCTViewControllerProtocol
Summary:
It's always bothered that we have this protocol and I figured it could just be merged with RCTWrapperViewController.
Closes https://github.com/facebook/react-native/pull/17290

Reviewed By: mmmulani

Differential Revision: D6611544

Pulled By: javache

fbshipit-source-id: a50b9d5adbeb2c48dbadbbfc1c77ccf6d1aae144
2017-12-20 15:20:00 -08:00
Valentin Shergin 0ae4c47daa `-[UIView _DEBUG_reactShadowView]` was removed
Summary:
Nobody uses it.
If the reference to the bridge is available (which is should be case for testing purposes at least), it is easy to get same information.

Reviewed By: mmmulani

Differential Revision: D6596376

fbshipit-source-id: 066eeb1e9465b4e0cc9d9b5b6bf41722450870e4
2017-12-19 23:46:09 -08:00
Valentin Shergin 7d1dedadd7 New implementation of handling `didUpdateReactSubviews` and `didUpdateReactSubviews` events
Summary:
Motivation:
* Current implementation of `didUpdateReactSubviews` relies on `processUpdatedProperties:parentProperties:` method of RCTShadowView, which we plan to remove.
* The existing implementation does not call handlers on unmounted nodes (because they are not part of traversing tree), which is not correct.
* The current implementation is tight with RCTComponentData, which is conceptually wrong, it should be a UIManager thing.
* The new implementation must be much more performant because of simplicity. (We can measure it only after removing `processUpdatedProperties`.)

Reviewed By: mmmulani

Differential Revision: D6595780

fbshipit-source-id: a517207c17b5d5db839c9ce99a37136292acf78c
2017-12-19 23:46:09 -08:00
Valentin Shergin 19a9c5e41d The Great File Renaming in RCTText
Summary:
The previous file/class name convention seemed cool... but now it drives me BANANAS! It makes all this code really hard to maintain.
So, evething were renamed following common modern RN convention.

Reviewed By: mmmulani

Differential Revision: D6605090

fbshipit-source-id: 88ca13d793a5d2adaac2b7922ec6bd4654aacec5
2017-12-19 20:14:00 -08:00
Pritesh Nandgaonkar f1055bcac8 Make YGNode as c++ struct with properties exposed through accessors
Reviewed By: emilsjolander

Differential Revision: D6592257

fbshipit-source-id: 641e8b9462ad00731a094511f9f5608b23a6bb21
2017-12-19 11:32:49 -08:00
Valentin Shergin 2679f3efb6 Demolishing of background color propagation infra
Summary: As it was mentioned in previous diffs, we are removing this because it overcomplicates rendering layer and provides (almost) no benefits (and cannot be implemented 100% accurate way).

Reviewed By: mmmulani

Differential Revision: D6582560

fbshipit-source-id: 0778db96a45dd8e2520268d5d00792677cb01a20
2017-12-19 09:11:49 -08:00
Valentin Shergin d2dc451407 reactBridgeDidFinishTransaction was finally removed
Summary:
We are removing `reactBridgeDidFinishTransaction`.
Why?
 * It is a performance drain. Supporting this requires dispatching main-thread block on every single transaction complete;
 * It has "too broad" non-conceptual semantic which encouraged using this as a "band-aid solution" for poorly designed components;
 * It is conceptually incompatible with new approaches that we are trying to implement to optimize the render layer;
 * It was deprecated for very long time.

Reviewed By: mmmulani

Differential Revision: D6549729

fbshipit-source-id: 58094aab982c67cec3d7fa3b616c637cb84d697f
2017-12-18 11:47:26 -08:00
Valentin Shergin b263560c73 reactBridgeDidFinishTransaction was removed from RCTTabBar
Summary:
We are removing `reactBridgeDidFinishTransaction`.
Why?
 * It is a performance drain. Supporting this requires dispatching main-thread block on every single transaction complete;
 * It has "too broad" non-conceptual semantic which encouraged using this as a "band-aid solution" for poorly designed components;
 * It is conceptually incompatible with new approaches that we are trying to implement to optimize the render layer;
 * It was deprecated for very long time.

This diff replaces usage of `reactBridgeDidFinishTransaction` with `uiManagerDidPerformMounting` which has very similar semantic except that fact that `uiManagerDidPerformMounting` is called asynchronously on the next run loop tick. And this should be okay because new React partial rendering does not guarantee synchronous execution anyways.

Reviewed By: mmmulani

Differential Revision: D6549586

fbshipit-source-id: 589b814f83b91ed8fabf7e638e7554ab3c9d286e
2017-12-18 11:47:26 -08:00
Valentin Shergin 099b28006b `reactBridgeDidFinishTransaction` was removed from RCTNavigator
Summary:
We are removing `reactBridgeDidFinishTransaction`.
Why?
 * It is a performance drain. Supporting this requires dispatching main-thread block on every single transaction complete;
 * It has "too broad" non-conceptual semantic which encouraged using this as a "band-aid solution" for poorly designed components;
 * It is conceptually incompatible with new approaches that we are trying to implement to optimize the render layer;
 * It was deprecated for very long time.

This diff replaces usage of `reactBridgeDidFinishTransaction` with `uiManagerDidPerformMounting` which has very similar semantic except that fact that `uiManagerDidPerformMounting` is called asynchronously on the next run loop tick. And this should be okay because new React partial rendering does not guarantee synchronous execution anyways.

Reviewed By: mmmulani

Differential Revision: D6549217

fbshipit-source-id: 2649e943e82e6fbe02c7678583a97db3f5800201
2017-12-18 11:47:26 -08:00
Valentin Shergin b8e60a3ca3 reactSetInheritedBackgroundColor was removed from RCTView
Summary:
Now setting explicit backgroundColor style is required for Views with background shadow,
otherwise the shadow will be generated based on content of the view (which is expected behaviour).

Reviewed By: mmmulani

Differential Revision: D6582587

fbshipit-source-id: 0514cb3c57bad17d2af40810b0e0f7ddc96a2c31
2017-12-18 11:47:26 -08:00
Valentin Shergin 2789ba016b zIndex prop was removed from RCTShadowView
Summary:
This was leftovers from old implementation of zIndex feature.
Janic janicduplessis refactored this and moved all logic to UIView layer, so we don't need this prop anymore in shadow realm.
More info: https://github.com/facebook/react-native/pull/14011

Reviewed By: mmmulani

Differential Revision: D6574414

fbshipit-source-id: 2cae19350765689784d7884ed875878d39b4e3f1
2017-12-18 11:47:26 -08:00
Valentin Shergin 098a63a1ce ScrollView related files were moved to dedicated folder
Summary: Trivial.

Reviewed By: rsnara

Differential Revision: D6539747

fbshipit-source-id: 716a02be185bde79e60011fcc226131972e74951
2017-12-11 19:08:00 -08:00
Valentin Shergin a255204e3e Removing `reactBridgeDidFinishTransaction` from RCTScrollView
Summary:
We are removing `reactBridgeDidFinishTransaction`.
Why?
 * It is a performance drain. Supporting this requires dispatching main-thread block on every single transaction complete;
 * It has "too broad" non-conceptual semantic which encouraged using this as a "band-aid solution" for poorly designed components;
 * It is conceptually incompatible with new approaches that we are trying to implement to optimize the render layer;
 * It was deprecated for very long time.

This diff removes `reactBridgeDidFinishTransaction` from RCTScrollView component. As I mentioned, because of the semantic of `reactBridgeDidFinishTransaction` is extremely broad, it's hard to capture what exact case it should handle. Based on comments and existing logic, it seems it tight to `contentSize` property and the size of RCTScrollContentView.

Reviewed By: rsnara

Differential Revision: D6538419

fbshipit-source-id: ccc6f5fea327471f10f1738d3da5214c0d362953
2017-12-11 19:08:00 -08:00
Eric Davison 36ad813899 Adding support for custom accessibility actions on iOS.
Summary:
This feature has been requested by customers.  Our previous (pre-react) application had support for custom accessibility actions.

This feature allows UI elements to provide a list of custom actions that can be read when VoiceOver is enabled.  UI elements expose one accessibility action by default.  Some UI elements may support multiple actions though other mechanisms like tap and hold.  To expose these actions in an accessible way iOS provides custom accessibility actions.

Feature was tested in the iOS simulator using the Accessibility Inspector.  Custom actions were added to a button and observed in the tool.  Custom actions were also invoked using the tool and then stepped through in the debugger.

The feature was also tested on an iPhone.  VoiceOver was enabled on the device and custom actions were observed for controls that exposed them.

We have been using this feature in our app for some time as well.

[IOS] [ENHANCEMENT] [Accessibility] - Added support for custom accessibility actions

Eric Davison
Microsoft Corp.
Closes https://github.com/facebook/react-native/pull/17020

Differential Revision: D6472283

Pulled By: shergin

fbshipit-source-id: 4ac4697dca07028e87ffe71b70c00280e7f2043c
2017-12-04 23:31:50 -08:00
Alex Kotliarskyi e19d9dec9b Make testID work for iOS tabs
Reviewed By: shergin

Differential Revision: D6455054

fbshipit-source-id: 3c667b585e9332a1dbfff1fd3325f2c95985a5be
2017-12-04 11:17:10 -08:00
Sophie Alpert 2e1707d0e6 Fix RCTRefreshControl jumping
Reviewed By: shergin

Differential Revision: D6470066

fbshipit-source-id: 44fb03c264d98af61dccfa0146690fd49ee9f2ab
2017-12-03 16:15:53 -08:00
chendo 19b0a65c5e Improve accessibilityLabel performance
Summary:
Integration testing with Appium on iOS is slow. Profiling with Instruments.app points to `RCTView`'s `accessibilityLabel` method being a hot point in React Native, due to the `RCTRecursiveAccessibilityLabel` function.

I did a baseline benchmark by using Appium's `find_element(accessibility_id: <label>)` call on our application 10 times and got a baseline result of 0.6s for one of our primary screens.

After implementing the change and performing the same call 10 times, I got 0.48s for the same call, for a 20% performance increase in `find_element`.

[iOS] [View] - Improve performance of `RCTView` `accessibilityLabel`

<!--
Help reviewers and the release process by writing your own release notes

**INTERNAL and MINOR tagged notes will not be included in the next version's final release notes.**

  CATEGORY
[----------]        TYPE
[ CLI      ]   [-------------]      LOCATION
[ DOCS     ]   [ BREAKING    ]   [-------------]
[ GENERAL  ]   [ BUGFIX      ]   [-{Component}-]
[ INTERNAL ]   [ ENHANCEMENT ]   [ {File}      ]
[ IOS      ]   [ FEATURE     ]   [ {Directory} ]   |-----------|
[ ANDROID  ]   [ MINOR       ]   [ {Framework} ] - | {Message} |
[----------]   [-------------]   [-------------]   |-----------|

[CATEGORY] [TYPE] [LOCATION] - MESSAGE

 EXAMPLES:

 [IOS] [BREAKING] [FlatList] - Change a thing that breaks other things
 [ANDROID] [BUGFIX] [TextInput] - Did a thing to TextInput
 [CLI] [FEATURE] [local-cli/info/info.js] - CLI easier to do things with
 [DOCS] [BUGFIX] [GettingStarted.md] - Accidentally a thing/word
 [GENERAL] [ENHANCEMENT] [Yoga] - Added new yoga thing/position
 [INTERNAL] [FEATURE] [./scripts] - Added thing to script that nobody will see
-->
Closes https://github.com/facebook/react-native/pull/17022

Differential Revision: D6459462

Pulled By: shergin

fbshipit-source-id: 3de7e5dc075281e35e62b4d4234d3f7fac5aae23
2017-12-01 10:16:39 -08:00
Nikita Tuk 15179f1798 Fixed fractional border width on iOS
Summary:
Incorrect render for borders that are not proportional to device pixel: borders get stretched and become significantly bigger than expected.
Rdar: http://www.openradar.me/15959788

Incorrect render for borders that are not proportional to device pixel: borders get stretched and become significantly bigger than expected.
Rdar: http://www.openradar.me/15959788

Reviewed By: shergin

Differential Revision: D6317674

fbshipit-source-id: 6bc331447458583a02c0e56d0d011a31d31d70a8
2017-11-21 12:16:21 -08:00
Douglas 45185947ee Fix tvOS compile issues; enable TVEventHandler in Modal (fix #15389)
Summary:
**Motivation**

Fix an issue (#15389) where `TVEventHandler` would not work when a modal was visible.  The solution adds the gesture recognizers from the native `RCTTVRemoteHandler` to the native modal view (except for the menu button recognizer, which still needs special handling in modals).  This PR also fixes some breakages in compiling React Native for tvOS.

**Test plan**

Compilation fixes should enable tvOS compile test to pass in Travis CI.

The modal fix can be tested with the following component, modified from the original source in #15389 .

``` javascript
import React, { Component } from 'react';
import ReactNative from 'ReactNative';
import {
    Text,
    View,
    StyleSheet,
    TouchableHighlight,
    TVEventHandler,
    Modal,
} from 'react-native';

export default class Events extends Component {

    constructor(props) {
        super(props);

        this.state = {
            modalVisible: false,
        };
        this._tvEventHandler = new TVEventHandler();
    }

    _enableTVEventHandler() {
        this._tvEventHandler.enable(this, (cmp, evt) => {
            const myTag = ReactNative.findNodeHandle(cmp);
            console.log('Event.js TVEventHandler: ', evt.eventType);
            // if (evt.eventType !== 'blur' && evt.eventType !== 'focus') {
            //  console.log('Event.js TVEventHandler: ', evt.eventType);
            // }
        });
    }

    _disableTVEventHandler() {
        if (this._tvEventHandler) {
            this._tvEventHandler.disable();
            delete this._tvEventHandler;
        }
    }

    componentDidMount() {
        this._enableTVEventHandler();
    }

    componentWillUnmount() {
        this._disableTVEventHandler();
    }

    _renderRow() {
        return (
            <View style={styles.row}>
                {
                    Array.from({ length: 7 }).map((_, index) => {
                        return (
                            <TouchableHighlight
                                key={index}
                                onPress={() => { this.setState({ modalVisible: !this.state.modalVisible }); }}
                            >
                                <View style={styles.item}>
                                    <Text style={styles.itemText}>{ index }</Text>
                                </View>
                            </TouchableHighlight>
                        );
                    })
                }
            </View>
        );
    }

    onTVEvent(cmp, evt) {
      console.log('Modal.js TVEventHandler: ', evt.eventType);
    }

    hideModal() {
      this.setState({
        modalVisible: false
      });
    }

    render() {
        return (
            <View style={styles.container}>
                <Modal visible={this.state.modalVisible}
                       onRequestClose={() => this.hideModal()}>
                    <View style={styles.modal}>
                        { this._renderRow() }
                        { this._renderRow() }
                    </View>
                </Modal>
                { this._renderRow() }
                { this._renderRow() }
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'darkslategrey',
    },
    row: {
        flexDirection: 'row',
        padding: 30,
    },
    item: {
        width: 200,
        height: 100,
        borderColor: 'cyan',
        borderWidth: 2,
        margin: 30,
        alignItems: 'center',
        justifyContent: 'center',
    },
    itemText: {
        fontSize: 40,
        color: 'cyan',
    },
    modal: {
        flex: 1,
        backgroundColor: 'steelblue',
    },
});
```
**Release Notes**

After this change, the `onRequestClose` property will be required for a `Modal` in Apple TV.
Closes https://github.com/facebook/react-native/pull/16076

Differential Revision: D6288801

Pulled By: hramos

fbshipit-source-id: 446ae94a060387324aa9e528bd93cdabc9b5b37f
2017-11-09 13:54:54 -08:00
Vojtech Novak 75d62bf0a8 fix #10747 (ScrollView rendered incorrectly with RefreshControl)
Summary:
set the y offset to 0, since 0 offset is where we want to be after we hide the refreshControl.

Tested in emulator with ios 8, 9, 10 and also with section headers.
Closes https://github.com/facebook/react-native/pull/15033

Differential Revision: D6265930

Pulled By: shergin

fbshipit-source-id: b249c4713de68fc6b3a32cee7f995dc352315970
2017-11-07 16:16:56 -08:00
Robert Paul fd9c3618fc - Adding locale prop to DatePickerIOS
Summary:
<!--
Thank you for sending the PR! We appreciate you spending the time to work on these changes.

Help us understand your motivation by explaining why you decided to make this change.

You can learn more about contributing to React Native here: http://facebook.github.io/react-native/docs/contributing.html

Happy contributing!

-->

While building a React Native application, I've come across the use case of wanting to set a specific locale for DatePickers irrespective of the users OS region setting. Since this is a feature available to native DatePicker components, I think it would be helpful to expose this in React Native as well.

Testing can be done by passing a `locale` prop to a DatePickerIOS. Example:

```
<DatePickerIOS
  date={this.state.date}
  mode="date"
  locale="fr_FR"
  onDateChange={date => this.setState({ date: date })}
/>
```

<!--
Help reviewers and the release process by writing your own release notes

**INTERNAL and MINOR tagged notes will not be included in the next version's final release notes.**

  CATEGORY
[----------]        TYPE
[ CLI      ]   [-------------]      LOCATION
[ DOCS     ]   [ BREAKING    ]   [-------------]
[ GENERAl  ]   [ BUGFIX      ]   [-{Component}-]
[ INTERNAL ]   [ ENHANCEMENT ]   [ {File}      ]
[ IOS      ]   [ FEATURE     ]   [ {Directory} ]   |-----------|
[ ANDROID  ]   [ MINOR       ]   [ {Framework} ] - | {Message} |
[----------]   [-------------]   [-------------]   |-----------|

[CATEGORY] [TYPE] [LOCATION] - MESSAGE

 EXAMPLES:

 [IOS] [BREAKING] [FlatList] - Change a thing that breaks other things
 [ANDROID] [BUGFIX] [TextInput] - Did a thing to TextInput
 [CLI] [FEATURE] [local-cli/info/info.js] - CLI easier to do things with
 [DOCS] [BUGFIX] [GettingStarted.md] - Accidentally a thing/word
 [GENERAL] [ENHANCEMENT] [Yoga] - Added new yoga thing/position
 [INTERNAL] [FEATURE] [./scripts] - Added thing to script that nobody will see
-->
[IOS][ENHANCEMENT][DatePickerIOS] - Adding a locale prop.
Closes https://github.com/facebook/react-native/pull/16639

Differential Revision: D6241981

Pulled By: hramos

fbshipit-source-id: 77b1b85c09f3e12d6b3e103b3d1ffd1f12e2cea9
2017-11-04 14:40:24 -07:00
Mehdi Mulani b8a5136d22 Fix memory leak in RCTSafeAreaView
Summary:
According to the retain code collector, RCTSafeAreaView is in a cycle:
-> _bridge -> RCTCxxBridge -> _moduleDataByName -> __NSDictionaryM -> RCTModuleData -> _instance -> RCTUIManager -> _viewRegistry -> __NSDictionaryM -> RCTSafeAreaView
This should break the cycle.

Reviewed By: shergin

Differential Revision: D6213668

fbshipit-source-id: efb9c1dd148b72f66fe4485b81c16cd4c2d18b17
2017-11-02 08:51:34 -07:00
Y.Shing 2546c95ac8 Fix iOS 11 WebView extra white space on top due to contentInsetAdjustmentBehavior
Summary:
Same IOS 11 issue as https://github.com/facebook/react-native/pull/15023
Fixes the annoying 20px content insert on top.
<!--
Thank you for sending the PR! We appreciate you spending the time to work on these changes.

Help us understand your motivation by explaining why you decided to make this change.

You can learn more about contributing to React Native here: http://facebook.github.io/react-native/docs/contributing.html

Happy contributing!

-->

Fix the behaviour of WebView when building the iOS project with Xcode 9 due to the `contentInsetAdjustmentBehavior`.

![expected](https://user-images.githubusercontent.com/5630513/32207551-b7789668-bdca-11e7-840a-f325b2767d08.jpg)
![iphone_x_after](https://user-images.githubusercontent.com/5630513/32207557-beb8fd6e-bdca-11e7-87d0-18d533f20125.jpg)

![issue_normal_iphone_ios11](https://user-images.githubusercontent.com/5630513/32207572-d773be5c-bdca-11e7-8e28-8f0783eef1cd.jpg)
![iphone_x_before](https://user-images.githubusercontent.com/5630513/32207581-e3e93234-bdca-11e7-847d-f801bbf05d55.jpg)

<!--
Help reviewers and the release process by writing your own release notes

**INTERNAL and MINOR tagged notes will not be included in the next version's final release notes.**

  CATEGORY
[----------]        TYPE
[ CLI      ]   [-------------]      LOCATION
[ DOCS     ]   [ BREAKING    ]   [-------------]
[ GENERAl  ]   [ BUGFIX      ]   [-{Component}-]
[ INTERNAL ]   [ ENHANCEMENT ]   [ {File}      ]
[ IOS      ]   [ FEATURE     ]   [ {Directory} ]   |-----------|
[ ANDROID  ]   [ MINOR       ]   [ {Framework} ] - | {Message} |
[----------]   [-------------]   [-------------]   |-----------|

[CATEGORY] [TYPE] [LOCATION] - MESSAGE

 EXAMPLES:

 [IOS] [BREAKING] [FlatList] - Change a thing that breaks other things
 [ANDROID] [BUGFIX] [TextInput] - Did a thing to TextInput
 [CLI] [FEATURE] [local-cli/info/info.js] - CLI easier to do things with
 [DOCS] [BUGFIX] [GettingStarted.md] - Accidentally a thing/word
 [GENERAL] [ENHANCEMENT] [Yoga] - Added new yoga thing/position
 [INTERNAL] [FEATURE] [./scripts] - Added thing to script that nobody will see
-->
 [IOS] [BUGFIX] [WebView] - Fix extra white space added to webView due to iOS 11 contentInsetAdjustmentBehavior
Closes https://github.com/facebook/react-native/pull/16519

Differential Revision: D6195670

Pulled By: shergin

fbshipit-source-id: 08d4d4dc700059bb7707e038dc4f592af0275896
2017-10-30 23:29:20 -07:00
Aditya Kumar bbc90b4dc2 Move RCTConvertSelectorForType to their respective using modules
Reviewed By: javache

Differential Revision: D6137419

fbshipit-source-id: a30193469e7a061331d3d6798324475890c75625
2017-10-26 17:03:41 -07:00