Commit Graph

614 Commits

Author SHA1 Message Date
zhongwuzw ebe282773d Fixes wrong time unit of scroll event throttle (#25098)
Summary:
We need to use second for calculation, so change 17ms to 0.017s instead.

## Changelog

[iOS] [Fixed] - Fixes wrong time unit of scroll event throttle
Pull Request resolved: https://github.com/facebook/react-native/pull/25098

Reviewed By: sahrens, cpojer

Differential Revision: D15576526

Pulled By: sammy-SC

fbshipit-source-id: ddd8dd9098cbe582c6923ce8466892c363c090fc
2019-06-05 13:52:19 +01:00
Spencer Ahrens 39776a82f0 don't throttle below 16ms
Summary: For some reason the scroll events are sometimes generated with highly irregular spacing, some coming less than a millisecond apart. For interactions that must track scrolling exactly, this can cause them to glitch. With a scroll throttle of less than 17 ms, the intention is clear that the UI should be updated in sync with the scroll view so we shouldn't drop any events.

Reviewed By: PeteTheHeat

Differential Revision: D15068841

fbshipit-source-id: 730e7cb29cc3ddae66f37cf7392e02e0cc9d7844
2019-04-30 22:29:11 +02:00
Craig_Martin e3ac3293d9 Add scrollToOverflowEnabled prop to ScrollView (#24296)
Summary:
ScrollView's scrollTo behavior on iOS was recently changed to limit the offset to the content size plus any content inset (see #23427). This departure from the old behavior created UI issues for anyone that is using the over-scroll ability for the purpose of positioning elements at specific coordinates on the screen. Examples include using this behavior to position TextInputs above the virtual keyboard programmatically when focused or moving drop down elements positioned near the bottom of the content toward the top of the screen when selected to show a larger absolutely positioned item list. Default behavior does not change and this is an "opt-in" type of prop to re-enable the old behavior.

[iOS] [Added] - Added scrollToOverflowEnabled prop to ScrollView
Pull Request resolved: https://github.com/facebook/react-native/pull/24296

Differential Revision: D14762619

Pulled By: cpojer

fbshipit-source-id: d2a552b5cb321d52e8ea4116327bf9ec647a3aae
2019-04-08 23:22:33 +02:00
zhongwuzw 0167cf2813 Fix triangle views on iOS (#23402)
Summary:
Fixes #22824 #21945 , the bug comes from #21208 , it was to fix #11897. Now Let's constrain edge adjust only when view has corners.

[iOS] [Fixed] - Fix triangle views on iOS
Pull Request resolved: https://github.com/facebook/react-native/pull/23402

Differential Revision: D14059192

Pulled By: hramos

fbshipit-source-id: be613bf056d3cc484f281f7ea3d08f251971700a
2019-04-08 23:17:41 +02:00
zhongwuzw f6516d20ca Fix scrollview over bounds of content size (#23427)
Summary:
Fix scrollview `offset` out of content size in iOS, Android uses `scrollTo` and `smoothScrollTo` which not have this issue.

Fixes like #13594 #22768 #19970 .

[iOS] [Fixed] - Fixed scrollView offset out of content size.
Pull Request resolved: https://github.com/facebook/react-native/pull/23427

Differential Revision: D14162663

Pulled By: cpojer

fbshipit-source-id: a95371c8d703b6d5f604af0072f86c01c2018f4a
2019-03-22 18:22:45 +01:00
Rostislav Simonik 6aca514b3a Add fix for refresh control state's race condition. (#21763)
Summary:
Fixes #21762
Pull Request resolved: https://github.com/facebook/react-native/pull/21763

Differential Revision: D14064621

Pulled By: cpojer

fbshipit-source-id: 63010248a46cb49ed17ed89d7c55945aa7b22973
2019-03-22 18:20:58 +01:00
Ram N 02697291ff Remove TabbarIOS from OSS
Reviewed By: fkgozali

Differential Revision: D13858496

fbshipit-source-id: ba9dd9912f4abcbeb3326f412ec91be9bee9cfd3
2019-01-30 23:41:40 -08:00
Kevin Gozali 4c69ccd0fb Revert D13860038: [react-native][PR] Add ability to control scroll animation duration for Android
Differential Revision:
D13860038

Original commit changeset: f06751d063a3

fbshipit-source-id: 5d89137aed0d549004e790068c1e4998ebccdaf1
2019-01-29 18:00:54 -08:00
Michał Osadnik 7e8b810499 Add ability to control scroll animation duration for Android (#22884)
Summary:
Motivation:
----------
This is one of the more sought after feature requests for RN:
react-native.canny.io/feature-requests/p/add-speed-attribute-to-scrollto

This PR adds the support to add a "duration" whenever using "scrollTo" or "scrollToEnd" with
a scrollView. Currently this only exists for Android as the iOS implementation will be somewhat more involved.

This PR is also backwards compatible and does not yet deprecate the "animated" boolean. It may not make sense to ever deprecate "animated", as it could be the flag that is used when devs want the system default duration (which is 250ms for Android). I'm not sure what it is for iOS. It would simplify things to remove "animated", though.
Pull Request resolved: https://github.com/facebook/react-native/pull/22884

Differential Revision: D13860038

Pulled By: cpojer

fbshipit-source-id: f06751d063a33d7046241c95348b6abbb327d36f
2019-01-29 07:18:09 -08:00
Pavlos Vinieratos 61ca119650 Replace deprecated `stringByReplacingPercentEscapesUsingEncoding:` with `stringByAddingPercentEncodingWithAllowedCharacters:` (#19792)
Summary:
Replace some NSString deprecated methods.
motivation for these prs is less warnings reported on xcode everytime we compile a rn app.

N/A

[INTERNAL] [DEPRECATIONS] [NSString] - Replace NSString deprecation methods.
Pull Request resolved: https://github.com/facebook/react-native/pull/19792

Differential Revision: D8515136

Pulled By: cpojer

fbshipit-source-id: 4379ef4e229ef201685b87e54ac859ba3d30a833
2019-01-25 05:25:39 -08:00
Hagen Hübel 5ebe84c704 Removed method call to RCTRootView::setReactPreferredFocusedView as ... (#21596)
Summary:
…it doesn't exist (#21593)

Fixes #21593

RCTTVView.m contains a method called `setHasTVPreferredFocus`, where the following function call breaks the build:

      [(RCTRootView *)rootview setReactPreferredFocusedView:self];

`setReactPreferredFocusedView` was formerly part of **RCTRootViewInternal.h** but was removed sometime.
Pull Request resolved: https://github.com/facebook/react-native/pull/21596

Differential Revision: D13761925

Pulled By: cpojer

fbshipit-source-id: be536786d7a8209f3a97b039e17d68d0aa653a0d
2019-01-22 07:33:44 -08:00
Jeff Held c93edb5ffd Apply thumbTintColor to Sliders on iOS (#22177)
Summary:
Applies the `thumbTintColor` prop to Sliders on iOS (which has been supported since iOS 5.0). Updates other documentation so that it is not labeled as Android-only, including the RNTester app
Pull Request resolved: https://github.com/facebook/react-native/pull/22177

Differential Revision: D13695554

Pulled By: hramos

fbshipit-source-id: 250f6574b193a37b3cd237bcf42612c3e91bf813
2019-01-16 15:13:43 -08:00
Karl Sander 9ed36b77e9 Fix for #22891: change type for iOS accessiblityActions from NSString to NSArray<NSString*> (#22892)
Summary:
The bug is described in #22891.

It's possible this might not be the right fix, since the original type comes from the commit introducing the feature (36ad813899). But after making this change custom VoiceOver actions work in my real project and my reduced test project.

Changelog:
----------

[iOS] [Fixed] - Fix supplying an array of custom VoiceOver actions via accessibilityActions prop
Pull Request resolved: https://github.com/facebook/react-native/pull/22892

Differential Revision: D13682727

Pulled By: hramos

fbshipit-source-id: a165af4ba78d2dbeca5bffbf60beb9ba50498f8d
2019-01-15 17:01:49 -08:00
Luna Wei b5e6ae0fc4 Unify native props
Summary: Unify native props for Switch

Reviewed By: TheSavior, mdvacca

Differential Revision: D13563403

fbshipit-source-id: d219febf197bd024d1ef2acda9f42e40bdf39532
2019-01-07 15:39:21 -08:00
Doug Russell ee7c702308 Accessibility Escape
Summary: Pull Request resolved: https://github.com/facebook/react-native/pull/22047

Differential Revision: D13146179

Pulled By: cpojer

fbshipit-source-id: b8a089114a5deafee47dd482e484d413c8c39137
2018-12-06 19:44:21 -08:00
ifsnow c45d290b07 Fixed for supporting mediaPlaybackRequiresUserAction under iOS 10. (#22208)
Summary:
There is a problem that the `mediaPlaybackRequiresUserAction` property does not work in WKWebView(`useWebKit`) under iOS 10.

I fully know you are currently working to migrate the core's WebView to the standalone `react-native-webview` project. This has already been submitted to PR in `react-native-webview` and will be merged soon. I hope this fix applies to `react-native` before your migration is done.
Pull Request resolved: https://github.com/facebook/react-native/pull/22208

Differential Revision: D13334868

Pulled By: cpojer

fbshipit-source-id: f2a811a477054155ed5fe62ab31e4d63f70e7848
2018-12-04 20:46:42 -08:00
Valentin Shergin 585f7b916d Summary:
Calling -[UIScrollView setContentOffset] with NaN values can cause a crash. That's not clear why exactly the computation returns NaN sometime, but the implemented sanitizing should help to detect this problem during development (and this also prevents the app from crashing).

See attached task for more details.

Reviewed By: fkgozali

Differential Revision: D13242729

fbshipit-source-id: 747bf1b42e02597e9f1300eee24547563ab29b27
2018-11-28 17:29:30 -08:00
Jason Hu 8911353c47 create api to allow clients to present a client credential for authentication (#22316)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/22316

Pull Request resolved: https://github.com/facebook/react-native/pull/22315

In order for TLS Mutual Auth to work for webviews, the caller must present a credential. Expose a setter that can be called to set a credential.

Reviewed By: RSNara

Differential Revision: D13095969

fbshipit-source-id: d136556a0030f799651d574b6e47ce38295b108e
2018-11-16 18:44:35 -08:00
danibonilha 0de99bc8f5 Split ViewAccessibility into DeprecatedViewAccessibility and rename r… (#21422)
Summary:
This PR splits and renames all references of ViewAccessibility to DeprecatedViewAccessibility
Related to #21342
Pull Request resolved: https://github.com/facebook/react-native/pull/21422

Reviewed By: yungsters

Differential Revision: D10132659

Pulled By: RSNara

fbshipit-source-id: 68c371230c69ed37c3e44bf8a36043adb04afc78
2018-10-05 10:03:10 -07:00
James Reggio 9e6522374b Fix artifacting on RN-drawn borders with asymmetric radii (#21208)
Summary:
This PR fixes an obscure rendering bug on iOS for borders with asymmetric radii. It appears to be a problem with the custom drawing that React Native performs when it cannot use native UIKit/CoreAnimation border drawing.
Pull Request resolved: https://github.com/facebook/react-native/pull/21208

Differential Revision: D10130120

Pulled By: hramos

fbshipit-source-id: d9fbc5c622c060db15658d038a068216b47bb26d
2018-10-01 12:52:20 -07:00
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