Commit Graph

594 Commits

Author SHA1 Message Date
James Reggio 9733b92f3d Add `onScrollToTop` to ScrollView for iOS (#21204)
Summary:
This PR exposes the `onScrollToTop` event on iOS using the same event-forwarding infrastructure as other ScrollView events. (As such, its `nativeEvent` object reflects the same fields as other ScrollView events.)

Motivation:
----------

If your app is only interested in knowing the position of a ScrollView after a scroll has completed, it can use `onScrollEndDrag` and `onMomentumScrollEnd` to inspect the `contentOffset` after a drag-initiated scroll has finished. (This is much less expensive than observing the `onScroll` event if you only want to know the end position.) However, neither of these `End` events fire if the ScrollView is scrolled to the top by tapping the status bar.

By exposing `onScrollToTop`, it is now possible for an app to cheaply know when such a scroll has completed.
Pull Request resolved: https://github.com/facebook/react-native/pull/21204

Differential Revision: D9943618

Pulled By: hramos

fbshipit-source-id: ac5ee42b7f12d94655ffda617f8f811138da7f6f
2018-09-19 11:17:30 -07:00
Valentin Shergin 454aa02210 SafeAreaView: A new prop `emulateUnlessSupported` that turns off the custom implementation of `safeAreaInsets` insets
Summary: In some cases, the custom implementation of this prop is undesirable, so this allows to turn it off.

Reviewed By: yungsters

Differential Revision: D9759228

fbshipit-source-id: 4f61cd900c2da9046977c11a61606a4f5f961177
2018-09-11 21:19:18 -07:00
Héctor Ramos 1151c096da Update copyright headers to yearless format
Summary: This change drops the year from the copyright headers and the LICENSE file.

Reviewed By: yungsters

Differential Revision: D9727774

fbshipit-source-id: df4fc1e4390733fe774b1a160dd41b4a3d83302a
2018-09-11 15:33:07 -07:00
Valentin Shergin b960512a5e Fabric: Complete border drawing implementation in RCTViewComponentView
Summary:
@public
Now all configurations or border styles are supported by RCTViewComponentView (and all subclasses).

Reviewed By: sahrens

Differential Revision: D9631868

fbshipit-source-id: 3a5b141ac5ffa9c28f4ebb0718f2fc935b8f1a75
2018-09-07 11:17:53 -07:00
Valentin Shergin 16bd95b689 Expose `RCTBorderDrawing.h` as a public header
Summary:
@public
We will use that in RCTFabric module.

Reviewed By: sahrens

Differential Revision: D9631866

fbshipit-source-id: a8e4074189359ad6014d0506d6a1e020b5d0d330
2018-09-07 11:17:52 -07:00
Kevin Gozali 0df92afc1c Remove NavigatorIOS
Summary:
Legacy navigator impl. There are other alternatives that should be used instead.

Part of the slimmening effort as described here: https://github.com/react-native-community/discussions-and-proposals/issues/6

Reviewed By: TheSavior

Differential Revision: D9677824

fbshipit-source-id: 24ae500751d2a8c398f246d36604a58f0b3c113b
2018-09-07 10:26:20 -07:00
Zack Gomez 5eaa2d29c0 Fix inability to remove 'Disabled' state from AccessibilityStates
Summary:
D8842691 split AccessibilityTraits into multiple RN properties.  However, the accessor code did not support REMOVING traits.
This results in buttons that were disabled (AccessibilityTraits & NotEnabled === true) never being enabled.

Fix the issue by making the split accessors properly mask in the bits, allowing you unset them without disturbing bits managed by the other accessor.

NOTE: setting AccessibilityTraits and AccessibilityRole or AccessibilityStates will still result in bugs.

Reviewed By: shergin

Differential Revision: D9661970

fbshipit-source-id: 77d70dd0754f2eaf8cbf895bfc13757c697a76d8
2018-09-07 10:26:19 -07:00
Oleg Lokhvitsky 5f48d28119 ScrollView snapToStart/snapToEnd
Summary: Added `snapToStart` and `snapToEnd` props to ScrollView which work together with `snapToOffsets` and determine whether the beginning and end of the list automatically count as snap offsets or not. If not, the list is allowed to free-scroll between its start/end and the first/last snap offset.

Reviewed By: sahrens

Differential Revision: D9442386

fbshipit-source-id: 47a5fdb20f884542434b01b1f0a486ed2b478c6e
2018-08-30 13:04:50 -07:00
Oleg Lokhvitsky fd744dd56c ScrollView snapToOffsets
Summary:
* Added snapToOffsets prop to ScrollView. Allows snapping at arbitrary points.

* Fixed pagingEnabled not being overridden by snapToInterval on iOS.

* Fixed Android *requiring* pagingEnabled to be defined alongside snapToInterval.
* Added support for decelerationRate on Android.

* Fixed snapping implementation. It was not calculating end position correctly at all (velocity is not a linear offset).
  * Resolves https://github.com/facebook/react-native/issues/20155
* Added support for new content being added during scroll (mirrors existing functionality in vertical ScrollView).

* Added support for snapToInterval.
  * Resolves https://github.com/facebook/react-native/issues/19552

Reviewed By: yungsters

Differential Revision: D9405703

fbshipit-source-id: b3c367b8079e6810794b0165dfdbcff4abff2eda
2018-08-30 13:04:50 -07:00
Vladimir Timofeev 3949e937cc Make SafeAreaView to work on iOS < 11 (#18534)
Summary:
Currently `SafeAreaView` works only on iOS 11, because implemented in terms of native safeArea API, that not exists in older iOS versions. But this make it hard to use the component in real applications, because content will be under top bars on older versions of iOS and no reliable way to workaround this in js. More motivation in #17638

This changeset emulate safe area in terms of `UIViewController` layout guides API if safeArea not available.

Fixes #17638, #18255

I run RNTester with these simulators: iPhone6 (9.3), iPhone6 (10.0), iPhone6 (11.2), iPhoneX (11.2)
- Start RNTester application
- Look on top header, it should not overlap status bar
- Go to the `<SafeAreaView>` example, open modal
- Modal area should not overlap status bar

<img src="http://vovkasm.skitch.vovkasm.org/iPhone6_10_20662C5B.png" width="40%"> <img src="http://vovkasm.skitch.vovkasm.org/iPhone6_11_20662CC8.png" width="40%">

<img src="http://vovkasm.skitch.vovkasm.org/iPhone6_10_pr_20662DE6.png" width="40%"> <img src="http://vovkasm.skitch.vovkasm.org/iPhone6_11_pr_20662DA8.png" width="40%">

[IOS] [BUGFIX] [SafeAreaView] - Make SafeAreaView to work on iOS < 11
Pull Request resolved: https://github.com/facebook/react-native/pull/18534

Reviewed By: PeteTheHeat, shergin

Differential Revision: D9166052

Pulled By: hramos

fbshipit-source-id: c086e1ae4af13110a7453b770ca75b6e0d5321ea
2018-08-23 12:02:35 -07:00
Héctor Ramos bfa62d4bfb Fix old license that snuck into repo (#20702)
Summary:
Quick trivial PR to add back a necessary header. Fixes CI as well.
Pull Request resolved: https://github.com/facebook/react-native/pull/20702

Differential Revision: D9374430

Pulled By: hramos

fbshipit-source-id: dba0f1d4fc80e39242d8c3e6d1e0007492d2860d
2018-08-16 19:03:38 -07:00
Ramanpreet Nara 33b353c97c Gate usage of WebKit 10.0 APIs
Reviewed By: mmmulani

Differential Revision: D9362001

fbshipit-source-id: 62cde6bcc1f190c168973b173ce55c029328bfbf
2018-08-16 16:52:45 -07:00
Ramanpreet Nara 28b058c341 Dynamically load WebKit
Summary:
@public

We can't dynamically link `WebKit` because doing so will impact cold start of all our Apps.

This diff includes a few changes:
 1. Weakly link the `WebKit` framework in the `ReactInternal` library, so that the compiler doesn't die when it encounters a WebKit symbol.
 2. Undo dynamic linking of WebKit in Catalyst.
 3. Undo dynamic linking of WebKit in AdsManager
 4. Before the first `WKWebView` is instantiated, dynamically load the `WebKit` framework.

The end result of these changes is that WebKit will be loaded only when it's going to be used.

Reviewed By: mmmulani

Differential Revision: D6564328

fbshipit-source-id: a45a44e774d0c61c1fb578a6fa3d16bb08f68ac9
2018-08-16 16:52:45 -07:00
Ramanpreet Nara bacfd92976 Implement 'automaticallyAdjustContentInsets' and 'contentInset' props
Summary:
@public

This diff introduces two new props:
1. **automaticallyAdjustContentInsets**: Controls whether to adjust the content inset for web views that are placed behind a navigation bar, tab bar, or toolbar. The default value is true.
1. **contentInset**: The amount by which the web view content is inset from the edges of the scroll view. Defaults to {top: 0, left: 0, bottom: 0, right: 0}.

**Note:** There're some inconsistencies between how `UIWebView` and `WKWebView` render web pages with respect to the `contentInset` property. These two videos illustrate the problem:

**UIWebView**
[[ P58674349 | Playground.js ]]
https://pxl.cl/9R9V

**WKWebView**
[[ P58674348 | Playground.js ]]
https://pxl.cl/9R9W

Here's a stack overflow answer describing the problem: https://stackoverflow.com/a/35472603.

Reviewed By: shergin

Differential Revision: D6432181

fbshipit-source-id: aee6dac65d28435381ebec90519474b4707c7bab
2018-08-16 16:52:44 -07:00
Ramanpreet Nara 215fa14efc Implement 'backgroundColor' style
Summary:
@public

This diff implements background colors for the `RCTWKWebView` component by proxying the background color prop to the underlying `WKWebView` and its underlying `UIScrollView`.

There's few differences between `backgroundColor` in `RCTWebView` and `RCTWKWebView` implementations:
1. With `UIWebView,` the background color gets applied after the page loads. With `WKWebView`, this isn't necessarily true. This results in a white flicker on solid backgrounds because sometimes, the background color is set before the page loads. This video illustrates the problem: https://our.intern.facebook.com/intern/px/p/9QBH
1. As far as I can tell, `WKWebView` doesn't handle transparent backgrounds correctly. Either that, or I could be setting the background color incorrectly. I set the background color to `rgba(1, 1, 1, 0.5)` and recorded how both `RCTWebView` and `RCTWKWebView` render. These two videos indicate the differences:
**RCTWebView: Lighter background**
https://pxl.cl/9R13
**RCTWKWebView: Darker background**
https://pxl.cl/9R1b

I tried to replicate this on the web. According to [[ https://our.intern.facebook.com/intern/fiddle/zCHu/ | this fiddle ]], `RCTWebView` is correct. Clearly, RCTWKWebView is rendering transparent backgrounds a bit darker than necessary. This doesn't seem simple to debug, so I've created a task to document this work: T23815343. I'll get to it eventually.

Reviewed By: shergin

Differential Revision: D6398209

fbshipit-source-id: 1812cb68133bc18a3278f6b328d7b085362528b0
2018-08-16 16:52:44 -07:00
Ramanpreet Nara 1af17f1648 Implement 'dataDetectorTypes' prop
Summary:
When text is rendered in `WKWebView` WebKit component, the component itself can detect things like phone numbers, flight numbers, links, etc. and render them with additional functionality.

For example, when the text `apple.com` is detected, if the `link` data detector type is enabled, the web view will actually render a link that takes the user to the Apple home page.

In this diff, I implement the `dataDetectorTypes` prop. The data detector types supported are:
1. phoneNumber
1. link
1. address
1. calendarEvent
1. trackingNumber
1. flightNumber
1. lookupSuggestion

These enums are documented in the [[ https://developer.apple.com/documentation/webkit/wkdatadetectortypes | WKDataDetectorTypes docs ]].

Reviewed By: shergin

Differential Revision: D6392546

fbshipit-source-id: 4dd373f0ac52f898163cd959eeef6672e55b42a6
2018-08-16 16:52:44 -07:00
Ramanpreet Nara 721763020a Implement 'mediaPlaybackRequiresUserAction' prop
Summary:
HTML video elements can have the `autoplay` attribute, which forces them to play automatically whenever they load on the page.

In this diff, I introduce a new prop `mediaPlaybackRequiresUserAction`, which allows us to control whether video or audio element autoplays even when `autoplay` is set.

Reviewed By: shergin

Differential Revision: D6382256

fbshipit-source-id: 617508653910d600bc43f7f68c6dfd17ab1b6dd8
2018-08-16 16:52:44 -07:00
Ramanpreet Nara 4ca949b46e Implement 'allowsInlineMediaPlayback` prop
Summary:
For iPhones with small screen sizes (e.g: iPhone 5s), inside the `<WKWebView/>` component, videos will play in fullscreen mode. In this diff, I introduce a prop called `allowsInlineMediaPlayback` that when set to true, will allow videos to play inline.

**Note:** For videos to play inline, the HTML video element must also have a `playsinline` attribute on it.

Reviewed By: shergin

Differential Revision: D6379770

fbshipit-source-id: a0130720ffede6c24a90cad0c97a75b657d77017
2018-08-16 16:52:44 -07:00
Ramanpreet Nara a997c0ac16 Implement 'onShouldStartLoadWithRequest' prop
Summary:
@public

This diff introduces the native backend for a new WKWebView prop: `onShouldStartLoadWithRequest`.

In the final component, the behaviour will be as follows: Whenever the user navigates around in the web view, we call `onShouldStartLoadWithRequest` with the navigation event. If `onShouldStartLoadWithRequest` returns `true`, we continue the navigation. Otherwise, we abort it.

Reviewed By: shergin

Differential Revision: D6370317

fbshipit-source-id: e3cdd7e2a755125aebdb6df67e7b39116228bdfb
2018-08-16 16:52:44 -07:00
Ramanpreet Nara 1584108805 Implement 'reload' and 'stopLoading' methods
Summary:
@public

This diff implements the `reload` and `stopLoading` methods for `WKWebView`. Their functionality is self-explanatory.

Reviewed By: shergin

Differential Revision: D6369292

fbshipit-source-id: ba176f4406e0a67606406f36dd66f7615f4796c3
2018-08-16 16:52:44 -07:00
Ramanpreet Nara 03b57d9db6 Implement 'goForward' and 'goBack' methods
Summary:
@public

This diff implements the `goForward` and `goBack` methods on `WKWebView`.
1. `goForward` moves the web view one screen forward in the browser history.
1. `goBack` moves the web view one screen back in the browser history.

Reviewed By: shergin

Differential Revision: D6367495

fbshipit-source-id: e100ca00e92a6eaa30d2af1af642ba79a9c9feae
2018-08-16 16:52:43 -07:00
Ramanpreet Nara 0022354525 Implement 'injectJavaScript' method
Summary:
@public

This diff introduces a method called `injectJavaScript(script)` on the React Native `<WKWebView/>` component. When called with a string, it evaluates that string as JavaScript within the web view.

Reviewed By: shergin

Differential Revision: D6367445

fbshipit-source-id: f68afeff42535dc991747f96a63f3c956faf13d3
2018-08-16 16:52:43 -07:00
Ramanpreet Nara 90e85a4adc Implement 'decelerationRate' prop
Summary:
@public

The content that renders within the `WKWebView` instance actually renders inside a `UIScrollView`. On that scroll view, we can adjust the `decelerationRate`, which controls how fast the view stops scrolling after the user lets go while scrolling.

In this diff, I implemented the `decelerationRate` prop for `WKWebView`, which gets forwarded to the `UIScrollView` instance underlying the web view.

**Note:** Even though we accept a floating point value for the deceleration rate, the native `UIScrollView` component only allows two inputs:
1. `UIScrollViewDecelerationRateNormal`: 0.998
2. `UIScrollViewDecelerationRateFast`: 0.99

As far as I know, it seems to just round up to the nearest valid `CGFloat` (or down if number > 0.998), for any invalid numbers.

Reviewed By: mmmulani

Differential Revision: D6307262

fbshipit-source-id: 98c4395702415aa36519f9e9bd84f043be3a5881
2018-08-16 16:52:43 -07:00
Ramanpreet Nara 1741fe9571 Implement 'scrollEnabled' prop
Summary:
@public

The content of `WKWebView` renders within a scrollview. In this diff, I'm introducing the prop `scrollEnabled` to allow developers to control whether scrolling is enabled within the scroll view, or not.

Reviewed By: mmmulani

Differential Revision: D6307001

fbshipit-source-id: 5a199c6c3b8535e45a5a3cb6041e822bb7af2362
2018-08-16 16:52:43 -07:00
Ramanpreet Nara e5f95aba9b Implement 'bounces' prop
Summary:
@public

The content that loads inside `WKWebView` renders within a `ScrollView`. Suppose the user pulls the page down when its top edge hits the top edge of the web view. Then, one of two things can happen as the user continues to pull the page down:
1. We let the page be pulled past the top edge of the web view.
1. We fix the page's vertical offset to 0 so that it doesn't move past the top edge of the web view.

The property that controls this behaviour is `<WKWebView bounces={true|false}/>`. In this diff, I implement it.

Reviewed By: mmmulani

Differential Revision: D6306866

fbshipit-source-id: 7763df78676215c3dd0bd7a029497a6eca1873ab
2018-08-16 16:52:43 -07:00
Ramanpreet Nara 7a6dd9807c Implement message passing!
Summary:
@public

This diff implements message passing between the `WKWebView` and React Native. As with `<WebView/>`, we can only send/receive strings.

**Usage:**
1. Set `messagingEnabled` to `true`.
1. To send data from the web view to React Native, call `postMessage(data)` within the web view. This forces React Native to execute the `onMessage` prop on the `WKWebView` component. `onMessage` will be called with an event `e`, where `e.nativeEvent.data` will be the data you passed into `postMessage`.
1. To send data from React Native to the web view, call `UIManager.dispatchViewManagerCommand` to dispatch the `UIManager.RCTWKWebView.Commands.postMessage` command. Look at [[ https://fburl.com/u1wusf2f | this part of the existing `<WebView/>` ]] component for more details. After you make the call, React Native will dispatch a `'message'` event to the `document` object within the webview. You can listen to the event by doing `document.addEventListener('message', callback)`. Let the event dispatched be `e`. Then, `e.data` is the data you sent over from React Native.

[[ P58627181 | This Playground.js ]] illustrates the usage.

Reviewed By: shergin

Differential Revision: D6304850

fbshipit-source-id: 29075ef753296e9fb5a9cddeb1ad0f4ff7e28650
2018-08-16 16:52:43 -07:00
Ramanpreet Nara 3703927e7e Implement onLoading(Start|Finish|Error) and injectedJavaScript props
Summary:
@public

This diff includes four very straightforward changes:
1. Whenever the WebView starts loading, the `onLoadingStart` hook should be executed. The event passed into this hook should be decorated with the `navigationType`.
1. Whenever the WebView errors out while loading, the `onLoadingError` hook should be executed.
1. Whenever the WebView finishes loading (without any errors), the `onLoadingFinish` hook should be executed.
1. The serialized JavaScript passed into the `injectedJavaScript` prop should be executed when the WebView finishes loading. After execution finishes, the `onLoadingFinish` prop should be called with the serialized completion value of this JavaScript.

Reviewed By: shergin

Differential Revision: D6293532

fbshipit-source-id: 21407c766f73413046823ae605afc21e85cf9db6
2018-08-16 16:52:43 -07:00
Ramanpreet Nara 1442c265da Implement WKWebView to replace WebView
Summary:
@public

`UIWebView` has been deprecated and replaced by `WKWebView`. This diff introduces a new component `WKWebView` that simply renders a `WKWebView` on iOS.

This is the first in the stack of many diffs that'll be required to fully replace `UIWebView` with `WKWebView` in the `<WebView/>` React Native component. Eventually, I hope to introduce a prop called `useWebKitImplementation`, which, when true, will force RN to use `WKWebView` instead of `UIWebView` for the `<WebView/>` component.

The only thing that's been implemented so far is the `source` property.

Reviewed By: mmmulani

Differential Revision: D6266100

fbshipit-source-id: 65862e34bd98db7fff0349cf26888afee43a56e4
2018-08-16 16:52:43 -07:00
Steven Cable b21d4914de Check return code from malloc (#20173)
Summary:
Calls abort() in cases where malloc returns NULL.

Checking the return value from malloc is good practice and is
required to pass a [Veracode security scan](https://www.veracode.com/). This will let
developers who are required to submit their software to Veracode
use React Native.
Pull Request resolved: https://github.com/facebook/react-native/pull/20173

Differential Revision: D9235096

Pulled By: hramos

fbshipit-source-id: 9fdc97f9e84f8d4d91ae59242093907f7a81d286
2018-08-08 18:32:19 -07:00
Mats Byrkeland 253b29dbd8 Add accessibilityHint for iOS (#18093)
Summary:
This adds the accessibilityHint for View, Text and Touchable* on iOS.
The accessibilityHint provides some more information about an element
when the accessibilityLabel is not enough.

The accessibilityHint is a core accessibility property on iOS.

From https://developer.apple.com/documentation/objectivec/nsobject/1615093-accessibilityhint:
> An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not obvious from the accessibility label.

Related issue: https://github.com/facebook/react-native/issues/14706

The npm scripts `test`, `flow`, `lint` and `prettier` are satisfied.

I added a couple of examples to the RNTester app. The Accessibility Inspector on Mac helps debugging accessibility stuff on a simulator, but it does not show the accessibilityHint. Therefore I tested the RNTester app on an iPhone 8 device using VoiceOver to verify the hint functionality. It works fine, and I've tested disabling and enabling "read hints" in the VoiceOver settings on the phone.

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

[IOS][FEATURE][Accessibility] - Add accessibilityHint for View, Text, Touchable* on iOS
Closes https://github.com/facebook/react-native/pull/18093

Reviewed By: hramos

Differential Revision: D7230780

Pulled By: ziqichen6

fbshipit-source-id: 172ad28dc9ae2b67ea256100f6acb939f2466d0b
2018-07-25 17:47:42 -07:00
Peter Argany fab5fffbb3 Fixed OSS scroll view bug caused by FBPullToRefresh
Summary:
When I bridged FBPullToRefresh to RN, the integration with ScrollView caused a bug on OSS

TLDR; assuming that a scrollview subview that implemented UIScrollViewDelegate protocol was a custom PTR was a bad idea. This caused some scrollviews to break in OSS. The solution is to define a more explicit protocol.

Further details here:
https://github.com/facebook/react-native/issues/20324

Reviewed By: mmmulani

Differential Revision: D8953893

fbshipit-source-id: 98cdc7fcced41d9e98e77293a03934f10c798665
2018-07-23 13:33:28 -07:00
Valentin Schlattinger e592d6f8c7 fix missing selection indicator lines (#18885)
Summary:
This PR is based on https://github.com/facebook/react-native/pull/13342 by pvinis and fixes https://github.com/facebook/react-native/issues/14442.

As suggested in the discussion on the PR mentioned above, I moved the code from `React/Views/RCTPickerManager.m` to the `initWithFrame` function in `React/Views/RCTPicker.m` and verified that it still fixes the problem.

Before the change in this PR the selection indicator lines are missing when the Picker is initially added to the View and only appear after changing to a different Tab and back. This happens both in the Simulator and my real device (iPhone 6S on iOS 11.3).

![beforechange](https://user-images.githubusercontent.com/7568362/38824104-7b294cae-41a8-11e8-8609-7a647ab3adb8.png)

After the change, the indicator lines always appear. I did not notice any side effects of this change when playing around with the Picker in different configurations.

![afterchange](https://user-images.githubusercontent.com/7568362/38824109-82a5b382-41a8-11e8-8af3-ca07c8b2c30e.png)

https://github.com/facebook/react-native/pull/13342 also fixes this issue but appears to be inactive.

[IOS] [BUGFIX] [PickerIOS] - Fixed missing selection indicator lines
Pull Request resolved: https://github.com/facebook/react-native/pull/18885

Differential Revision: D8945483

Pulled By: hramos

fbshipit-source-id: 2b6c6f42559691530b062503feb24bc305f4a8af
2018-07-20 19:01:32 -07:00
Ziqi Chen ca01290d8e changed prop name currentViewStates to AccessibilityStates on iOS (3/3)
Summary:
Context:
After discussing with yungsters, `currentViewStates` is a very ambiguous name for a prop, especially because there are only two possible values. From a developer's perspective, it makes more sense to just call them `accessibilityStates` because the main use for them is to add states to Talkback and Voiceover.
Also, the actual implementation of what we're changing under the hood in Native Code is abstracted away from developers using React Native, so as long as behavior is as they would expect, it makes more sense to change the name into a clear one.

Changes in this Diff:
Renamed the view property exposed to native iOS code from `currentViewStates`  to `accessibilityStates`
Also deleted setting the userInteractionEnabled view property, because we want to keep it as just an accessibility property.

Reviewed By: PeteTheHeat

Differential Revision: D8896821

fbshipit-source-id: 95674c9b7295f5b9e60994c297acdee83f6226d7
2018-07-19 14:13:01 -07:00
Ziqi Chen 679bff2658 added native iOS functionality for prop currentViewStates
Summary:
Added Native iOS functionality for prop currentViewStates.

On iOS, this property modifies both the view property userInteractionEnabled and also adds corresponding UIAccessibilityTraits to the view.

If disabled is passed in, userInteractionEnabled of the view will be set to false.

The value that is passed into currentviewStates is converted to a UIAccessibilityTrait Enum and masked in with existing UIAccessibilityTraits on that native view.

The native implementation for accessibilityRole is also changed to also mask new UIAccessibilityTraits with existing ones.

Reviewed By: PeteTheHeat

Differential Revision: D8842691

fbshipit-source-id: 919267300c70efed93a7a92377a0178bd8885eb5
2018-07-17 16:06:21 -07:00
Ziqi Chen d9eeae91a0 added image button role on iOS
Summary:
Because we're now separating accessibilityTraits into accessibilityRole and accessibilityState, we're going to only allow one role to be set, and allow on preset combinations of roles that make sense.

This change adds iOS functionality to the role image button because a popular accessibilityTrait combination is image and button.

Reviewed By: ikenwoo

Differential Revision: D8847012

fbshipit-source-id: da386dbf82cb3854d14c228a1116da9f4067fe93
2018-07-16 18:48:15 -07:00
Ziqi Chen f39d0923c7 removed tabbar for iOS 9 compatibility issues
Summary: Removed Accessibility Trait TabBar for iOS compatibility Issues, since tabbar is only available on iOS 10+

Reviewed By: PeteTheHeat

Differential Revision: D8822469

fbshipit-source-id: 34bf00eb930f631a5a4effa0a4159da07c1573f6
2018-07-12 12:32:03 -07:00
Ziqi Chen c27b495a89 added accessibilityRole Prop, added functionality support for role on android
Summary:
Added a new property to View for Accessibility called `accessibilityRole`. This property merges functionality of existing properties: `accessibilityTraits` (iOS) and `accessibilityComponentType` (android).

Currently, nine values are supported with equivalent behavior as `accessibilityTraits` (iOS) when `accessibilityRole` is set on iOS Voiceover and Android TalkBack

```
  | 'none'
  | 'button'
  | 'link'
  | 'search'
  | 'image'
  | 'keyboardkey'
  | 'text'
  | 'adjustable'
  | 'tabbar'
```
They currently support similar behavior on talkback on Android and voice over on iOS
Does not break functionality of existing properties, but have not tested for behavior of setting both this one and the old one.

* iOS - I added a property accessibilityRoles, and basically remapped it to the same thing as accessibilityTraits. I also added in enum mappings for keyboardkey and tabbar.
* Android - Also added a property accessibilityRoles, from the Android side. For the underlying native functionality, I built a helper class that is based off of AccessibilityRolesUtil.java from the accessibility team. Biggest changes made are that I defined my own enums if needed, and also set some properties to match the functionality of iOS Accessibility Traits. I also handled the logic for switch/case statements of setting roles for the android side on this file. Also, I currently haven't localized strings for setRoleDescription, but plan to.
* Javascript - I added a view property accessibilityRoles in ViewPropTypes.

Reviewed By: blavalla

Differential Revision: D8756225

fbshipit-source-id: e03eec40cce86042551764f433e1defe7ee41b35
2018-07-10 12:18:27 -07:00
Ziqi Chen 5f8b44fd22 added check for iOS 11 on ignore inverted colors
Summary:
Added Check for iOS 11 before setting property for `accessibilityIgnoreInvertColor`

Builds on top of
https://our.intern.facebook.com/intern/diff/D8549084/

Reviewed By: shergin

Differential Revision: D8599698

fbshipit-source-id: c5cc26b4c1c20fb9cca5bfe7143fa9dcb217a2d7
2018-06-28 12:09:58 -07:00
Peter Argany 22d068a108 Revert D8549084: Added Accessibility Feature for RN to support Smart Inversion for photos
Differential Revision:
D8549084

Original commit changeset: 82a3bc73c9e6

fbshipit-source-id: 8dca4efe701058710187828d64a055278ff585ab
2018-06-24 10:46:02 -07:00
Ziqi Chen af226078e7 Added Accessibility Feature for RN to support Smart Inversion for photos
Summary:
@public
Added a property `accessibilityIgnoresInvertColors (boolean)`  to Views which allows the Apple API `accessibilityIgnoresInvertColors` to be used in React Native.
Now, when a user has Display: Smart Invert enabled, you can set the property to be true, and things like photos and views with the property set to true will no longer be inverted when Smart Invert is enabled.

This property can also be applied to the Image Component.

Example Use Case:

```
<Image accessibilityIgnoresInvertColors={true} />
```
```
<View accessibilityIgnoresInvertColors={true} />
```

| Before | After |
| ------ | ----- |
| ![original](https://user-images.githubusercontent.com/165856/41738737-b62c6ebc-7547-11e8-8ea3-f82239998071.jpg) | ![feeditem](https://user-images.githubusercontent.com/165856/41738749-beef6de2-7547-11e8-9771-b44e513de0fd.jpg)

Reviewed By: PeteTheHeat

Differential Revision: D8549084

fbshipit-source-id: 82a3bc73c9e6d75d6b50ba013b88127f07692641
2018-06-21 15:31:55 -07:00
Hoa Dinh adb6929b36 Fixed build eats
Reviewed By: skotchvail

Differential Revision: D8529938

fbshipit-source-id: 6a97d2c54757d7e75fe8731efe24704cf7fdf87c
2018-06-20 10:04:22 -07:00
Sean Nicolay b8f30db0ae Fix or mark enum conversions
Reviewed By: adamjernst

Differential Revision: D8077375

fbshipit-source-id: 804ef985a773c7e1af6b7aa690790f57b10368f7
2018-05-22 09:53:54 -07:00
Kevin Gozali f50df4f5ec iOS OSS: deployment target 8.0 => 9.0
Summary: Moving target deployment to iOS 9.0+ from now on, removing customization for iOS 8.

Reviewed By: shergin

Differential Revision: D8053439

fbshipit-source-id: 292c58f15c6e6caf8b28d15c1521812d6ed675c5
2018-05-22 01:16:45 -07:00
Kevin Gozali 6611fefef7 iOS: Exposes the RCTFont size overrides so unit tests can use the same values
Summary:
`RCTFontTests` test in RNTester is broken if the target deployment is <= OS 8.2. This is because RCTFont.mm overrides the OS-defined values, but the override is only visible to RCTFont.mm internals. As the result, when the Unit test tries to create UIFont of the "same" weight, it got a different font - most likely due to internal floating rounding errors.

To mitigate, code that wants to test out internals of RCTFont should import RCTFontConstantsOverride.h

Reviewed By: mmmulani

Differential Revision: D7900954

fbshipit-source-id: e5814ef059a8afdfb5205ca1af46c41b3cfd4318
2018-05-07 17:31:12 -07:00
Jerry Horton 37c820f16e Fix for issue #19086 RCTHasFontHandlerSet(); This function definition…
Summary:
… is not a protoype #19086

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.

<!--
  Required: Write your motivation here.
  If this PR fixes an issue, type "Fixes #issueNumber" to automatically close the issue when the PR is merged.
-->

Fixes #19086

Related to react-native-navigation issue #3019

<!--
  Required: Write your test plan here. If you changed any code, please provide us with
  clear instructions on how you verified your changes work. Bonus points for screenshots and videos!
-->

Created a fresh react native >= 0.55.2 project and only install React Native Navigation. The error "This function declaration is not a prototype" message occurs.

Downgrading to React Native 0.54.4 builds fine.

![screen shot 2018-05-01 at 3 17 51 pm](https://user-images.githubusercontent.com/5680239/39491718-ddfdd6a0-4d52-11e8-937f-7ed9702a2e30.png)

<!--
  Does this PR require a documentation change?
  Create a PR at https://github.com/facebook/react-native-website and add a link to it here.
-->

No documentation change

<!--
  Required.
  Help reviewers and the release process by writing your own release notes. See below for an example.
-->
[iOS] [BUGFIX] [react-native-navigation] - For compatibility with react-native-navigation >= 2.0.2237 https://github.com/facebook/react-native/issues/19086
<!--
  **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 ] [ {Filename}  ]
  [ IOS      ] [ FEATURE     ] [ {Directory} ]   |-----------|
  [ ANDROID  ] [ MINOR       ] [ {Framework} ] - | {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/19089

Differential Revision: D7841198

Pulled By: shergin

fbshipit-source-id: 31638274055c3f143342d2d6dde6d4af7a2ac304
2018-05-01 19:32:07 -07:00
Valentin Shergin f6f7d0484c Fixed typo in RCTShadowView
Summary: Trivial.

Reviewed By: PeteTheHeat

Differential Revision: D7503382

fbshipit-source-id: 0c553553bcde5c2f32bace0fa047aee6a106619b
2018-04-10 12:59:51 -07:00
Peter Argany f96d7ae648 Bridged FBPullToRefresh to JS
Reviewed By: shergin

Differential Revision: D6875099

fbshipit-source-id: 00bbad7569ff047a77f198ad2bf4d77fccbaa2e9
2018-03-27 18:19:30 -07:00
Valentin Shergin c194c18126 Fixed performance regression in `ShadowView`s layout process
Summary:
This fixes perf regression which was introduced by recent refactoring of the layout process.
That is how it used to be:
114c258045/React/Views/RCTShadowView.m (L160-L166)
Note: We have to resert this flag in indication that we already applied those changes and we don't need to traverse this subtree until it is changed again.

Reviewed By: fkgozali

Differential Revision: D7343564

fbshipit-source-id: ba7e00bc5fe4992d777eed20ba0d959fd8f6c037
2018-03-21 11:04:35 -07:00
Sahil Ohri 8466db0fd3 Revert #17927
Summary:
This change is a revert of [#17927](https://github.com/facebook/react-native/pull/17927) pull-request.
The pull-request caused an issue with the keyboard covering the text field at the bottom of the scroll view.

Reviewed By: shergin

Differential Revision: D7246609

fbshipit-source-id: 149f825274c4fa79ab593f1bae3602667d16ddee
2018-03-13 19:27:33 -07:00
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