Commit Graph

1107 Commits

Author SHA1 Message Date
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
Adam Comella 01d5eff425 iOS: Add a maxFontSizeMultiplier prop to <Text> and <TextInput> (#20915)
Summary:
**Motivation**

Whenever a user changes the system font size to its maximum allowable setting, React Native apps that allow font scaling can become unusable because the text gets too big. Experimenting with a native app like iMessage on iOS, the font size used for non-body text (e.g. header, navigational elements) is capped while the body text (e.g. text in the message bubbles) is allowed to grow.

This PR introduces a new prop on `<Text>` and `<TextInput>` called `maxFontSizeMultiplier`. This enables devs to set the maximum allowed text scale factor on a Text/TextInput. The default is 0 which means no limit.

Another PR will add this feature to Android.

**Test Plan**

I created a test app which utilizes all categories of values of `maxFontSizeMultiplier`:
  - `undefined`: inherit from parent
  - `0`: no limit
  - `1`, `1.2`: fixed limits

I tried this with `Text`, `TextInput` with `value`, and `TextInput` with children. For `Text`, I also verified that nesting works properly (if a child `Text` doesn't specify `maxFontSizeMultiplier`, it inherits it from its parent).

Lastly, we've been using a version of this in Skype for several months.

**Release Notes**

[GENERAL] [ENHANCEMENT] [Text/TextInput] - Added maxFontSizeMultiplier prop to prevent some text from getting unusably large as user increases OS's font scale setting (iOS)

Adam Comella
Microsoft Corp.
Pull Request resolved: https://github.com/facebook/react-native/pull/20915

Differential Revision: D9646739

Pulled By: shergin

fbshipit-source-id: c823f59c1e342c22d6297b88b2cb11c5a1f10310
2018-09-04 17:50:42 -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
Tim Yung 19a8a578dc RN: Improve ViewPropTypes
Summary:
Makes a couple improvements to `ViewPropTypes`.

- Remove deprecated transform props. We are now using exact object types, so they are already disallowed.
- Remove garbage types for `accessibilityLabel`.

Reviewed By: TheSavior

Differential Revision: D9542088

fbshipit-source-id: f9128353e19cff22caf52c896c9c137f01aea276
2018-08-29 17:49:24 -07:00
David Vacca eb225fa173 Revert changes of the name for AndroidHorizontalScrollView
Summary: This diff reverts the changes in the name for AndroidHorizontalScrollView and AndroidHorizontalScrollContentView that caused a redbox for continuous OTA users

Reviewed By: fkgozali

Differential Revision: D9561972

fbshipit-source-id: 3d8e9ee8bb6081107bc8d315af16885bb003148e
2018-08-29 15:48:59 -07:00
David Vacca 575f7d478d Implement HorizontalScrollView component
Summary: This diff implements the HorizontalScrollView component for Android Fabric C++, as part of this diff I also re-named the components AndroidHorizontalScrollContentView for RCTAndroidHorizontalScrollContentView and AndroidHorizontalScrollView for RCTAndroidHorizontalScrollView. This might sound against our plan of removing the RCT preffix, but it is to make it simpler to map components between current implementation of RN and Fabric (otherwise we don't know when to add the RCT preffix in Android side to find the right View Manager), later we can just remove the preffix from C++, Android, iOS and JS.

Reviewed By: shergin, achen1

Differential Revision: D9122729

fbshipit-source-id: e9299552857c6dd0c18abfa5fa49a3d50e221729
2018-08-28 23:03:33 -07:00
Eli White d2c27f5bff Remove view configs from JS
Summary: Apparently different apps have different implementations of view managers that support different props. This is a problem that we will need to address. Unfortunately, this means we can't have a static config defined in JS. We will need to find another approach to this problem.

Reviewed By: sahrens

Differential Revision: D9500178

fbshipit-source-id: b591559164fcf29f5fd43e13a0f2da15011491c6
2018-08-24 14:04:09 -07:00
Tim Yung 47dc31d464 RN: Nullable Image, Text, & View Props
Summary:
Changes the Flow prop types for `Image`, `Text`, and `View` to be nullable and optional.

This makes these components easier to compose.

Reviewed By: sahrens

Differential Revision: D9494285

fbshipit-source-id: c3f17147f063b31217b239a3abc085d1850f8df9
2018-08-24 10:48:08 -07:00
Eli White 1329d18c6a Require that JS defined Component Attributes match Native ones in dev
Summary: As we move these configs to JS from native, until we have codegen that ensures everything stays up to date, this adds a dev mode check to ensure they are consistent.

Reviewed By: yungsters

Differential Revision: D9475011

fbshipit-source-id: 9d6f7b6c649229cae569d840eda3d5f7b7aa7cb2
2018-08-23 13:01:41 -07:00
Eli White 97472892d7 Back out "[react-native][PR] Make Flow and PropType types checks consistent for view style props."
Summary: Reverting due to problems with prepack.

Reviewed By: gaearon

Differential Revision: D9482931

fbshipit-source-id: 0ec5d0fb80dab32a07521a465dd2a501e6bb4d30
2018-08-23 11:34:26 -07:00
Tim Yung 055c941c40 A11Y: Leverage New `AccessibilityProps` Props
Summary: Adds new accessibility props more widely.

Reviewed By: TheSavior

Differential Revision: D9466018

fbshipit-source-id: 63ce58f725c7fd924d979d821037011d83c0334e
2018-08-23 00:18:47 -07:00
Eli White b620ccab49 Deprecate View prop-type definitions
Summary: This diff moves the prop-type definitions for View out into it's own file. We will be able to do this with a bunch of the prop-type definitions and then move them out into a deprecated npm package.

Reviewed By: yungsters

Differential Revision: D9444394

fbshipit-source-id: 4fd0a78533211b598ba2da4eb5015ffcc20bb675
2018-08-22 18:31:36 -07:00
Tim Yung 3aea678c38 RN: Reduce ForwardRef(View) Noise in Systrace
Summary: When running a trace, reduce the noise from the `__DEV__`-only `ForwardRef(View)` elements.

Reviewed By: ejanzer

Differential Revision: D9445865

fbshipit-source-id: 7cfe87bab6dd62d3800d2ca239724b5063c55c89
2018-08-22 17:49:32 -07:00
Eli White f5be89b8b9 Require all Android View Attributes are defined in flow prop types
Summary: This caught a few flow types that weren't defined for attributes that Android exposes. Ensuring that these stay in sync will be necessary for codegen in the future.

Reviewed By: sahrens

Differential Revision: D9444165

fbshipit-source-id: 8ee00af7b732c35d7f6befcdf79f77b73eac6a1b
2018-08-22 13:03:15 -07:00
Eli White d0eb8ff858 Put View ViewConfig in JS
Summary: Moving this config to native for android so we skip the native lookup for the config.

Reviewed By: yungsters

Differential Revision: D9415726

fbshipit-source-id: 84cac3f0dfa4f6ea8800de77676f1e2896ee463d
2018-08-22 13:03:15 -07:00
Alexander Perepelitsyn 2b6599e9c8 Make Flow and PropType types checks consistent for view style props. (#20773)
Summary:
Description:
------------
While creating a custom component I added a prop `style: ?ViewStyleProp`. When I tried to pass the following object
```
style={{
  opacity: new Animated.Value(0),
}}
```
to this `style` prop I received a yellow box with the warning:
```
Warning: Failed prop type: Invalid prop `opacity` of type `object` supplied to `MyComponent`, expected `number`.
```

Then I browsed through the source code and found an inconsistency in types checks. Namely,
https://github.com/facebook/react-native/blob/master/Libraries/StyleSheet/StyleSheetTypes.js#L158 has the following declaration `opacity?: number | AnimatedNode`, whereas https://github.com/facebook/react-native/blob/master/Libraries/Components/View/ViewStylePropTypes.js#L50 is willing to accept **only** a `number`: `opacity: ReactPropTypes.number`.
Pull Request resolved: https://github.com/facebook/react-native/pull/20773

Differential Revision: D9464634

Pulled By: TheSavior

fbshipit-source-id: fa21f706cb890dbeec136f1c4fab468904cd284b
2018-08-22 12:31:20 -07:00
Chun Chen b9c28c236b Expose scrollEnabled as iOS prop for TextInput (#20719)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/20719

Expose scrollEnabled as iOS prop for TextInput

Reviewed By: mmmulani

Differential Revision: D9383477

fbshipit-source-id: 7e803767f6b2fafceac932fecd9dd59dc6ab5295
2018-08-17 19:02:16 -07:00
Ramanpreet Nara b18fddadfe Warn when 'scalesPageToFit' prop is used
Summary:
@public

The `WKWebView` class doesn't expose a `scalesPageToFit` property, unlike `UIWebView`. Therefore, the `scalesPageToFit` RN prop is be a bit tricky to implement with `WKWebView`.

For the time being, this diff adds warnings to `<WebView/>` whenever `useWebKit={true}` and `scalesPageToFit` is set. I've also updated the documentation to reflect that we don't support `scalesPageToFit` prop with the new implementation of `<WebView/>`.

Reviewed By: shergin

Differential Revision: D6429271

fbshipit-source-id: adf858cb67ba221c70d6d6f1bd6cff505e90c365
2018-08-16 16:52:44 -07:00
Ramanpreet Nara 95801f1eda Move WKWebView into WebView.ios.js
Summary:
@public

This diff adds the `useWebKit` property to the `<WebView/>` React Native component. On iOS, when this property is true, we use `RCTWKWebView`. Otherwise, we use `RCTWebView`. On Android, this property does nothing.

Reviewed By: shergin

Differential Revision: D6423374

fbshipit-source-id: 006bfaaf12984fac0174c0b5bb897c009c026cd0
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 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
Eli White 76948ad1bd Typing View style as ViewStyleProp
Summary: Locking down view style so that invalid styles can't be passed into View.

Reviewed By: yungsters

Differential Revision: D9309097

fbshipit-source-id: 69e7e3c5626609cfd47c167027a55470c42228c8
2018-08-14 16:32:11 -07:00
Tim Yung f805d35154 RN: Fix Touchable Debug View
Summary: Fixes the `Touchable` debug view. The `child.type` is no longer a subclass of `React.Component` and no longer has `displayName`. It should be fine to have a hard dependency on `Text` and `View`, because... what app does not use them?

Reviewed By: TheSavior

Differential Revision: D9232036

fbshipit-source-id: 06f4091bf8e21cada3af50def2fdd41a6ad84f79
2018-08-13 12:01:57 -07:00
Jordan Brown f125815efc Add flow suppressions to xplat android
Summary:
.android.js files may be checked (when the next version of flow is released) by using `flow start --flowconfig-name .flowconfig.android` and `flow status --flowconfig-name .flowconfig.android`

This diff adds suppressions to the errors that are in .android.js files, which flow does not check right now.

When site is `react_native_fb` or `react_native_android_fb`, error will be suppressed when checking with .flowconfig.android
When site is `react_native_fb` or `react_native_ios_fb`, error will be suppressed when checking with .flowconfig.

You can use `react_native_fb` when it should be suppressed for both.

The controller you requested could not be found.

Reviewed By: TheSavior

Differential Revision: D9122178

fbshipit-source-id: 0ec9d3cae3d887f58645e6585b2a3f6c3889b13e
2018-08-13 11:16:41 -07:00
Ramanpreet Nara a5ce1ad767 Ensure WebViews render about:blank correctly
Summary:
@public

This diff fixes two bugs:
1. When you load a `<WebView/>` with an HTML source string, HTML source doesn't render in the `<WebView/>`. Instead, we get this warning: https://pxl.cl/grz3. Here's what the above page should look like when correctly rendered: https://pxl.cl/grzt

2. Furthermore, you render a blank `<WebView/>` (i.e: with no source prop), it should display a blank page. Instead, we get this warning: https://pxl.cl/grz3

**Bugfix:**
One solution I found was to ensure that `about:blank` is always whitelisted. That way, we don't ever abort navigations to blank pages, which occur when we do:

```ObjectiveC
/** Line 134 in RCTWebView.m */
[_webView loadHTMLString:@"" baseURL:nil];
```

and

```ObjectiveC
/** Line 115 in RCTWebView.m */
if (html) {
  NSURL *baseURL = [RCTConvert NSURL:source[@"baseUrl"]];
  if (!baseURL) {
    baseURL = [NSURL URLWithString:@"about:blank"];
  }
  [_webView loadHTMLString:html baseURL:baseURL];
  return;
}
```

Reviewed By: yungsters, mmmulani

Differential Revision: D9259852

fbshipit-source-id: e1b9673fcd8c3d0df77308df8c4a632a2b596bfb
2018-08-13 10:18:17 -07:00
Wayne Cheng f536a0c268 Adding flow strict local to remaining possible files in xplat/JS
Summary:
ag -L --ignore __snapshots__ 'flow strict|noflow|generated|The controller you requested could not be found.' | ag '\.js$' | xargs ag -l 'flow' | sort > ~/temp
  cat ~/temp | xargs ag -L 'flow strict' | xargs sed -i '' 's/flow$/flow strict-local/'
  until flow check; do flow check --json | jq -r '.errors[].message[0].path' | sort | uniq | xargs hg revert; done

allow_many_files
The controller you requested could not be found.
The controller you requested could not be found.

Reviewed By: TheSavior

Differential Revision: D9004573

fbshipit-source-id: 936bd5741706b781be06bf08b6ad805a69407dfd
2018-08-09 08:54:44 -07:00
Eli White 370e0db970 Move View native require call to new file
Summary: Moving out the requireNativeComponent call into a new file. We want this long term for all of our view managers to support codegen of the native side and so we can move the viewConfigs into JS.

Reviewed By: yungsters

Differential Revision: D9231619

fbshipit-source-id: 7c89587cc6a76e92b309c4941577291e56af8c7c
2018-08-08 18:46:53 -07:00
Johannes Baldursson 610412385b Exposed scrollEnabled on TextInput (#19330)
Summary:
On iOS, it is not possible to select a range of text using a `Text` component (see #13938). Because of how the `Text` component is implemented on iOS, this will not work without a complete re-write. On Android however, this is not an issue.

As the `TextInput` component has evolved, it can more or less be used as a drop-in replacement on iOS by setting `multiline={true}` and `editable={false}`. Except for one detail: the text input field has scrolling activated and it's not possible to turn off. (See #1391 and #15962).

This pull request addresses that issue, simply by exposing the `scrollEnabled` property:

```
<TextInput
    multiline
    editable={false}
    scrollEnabled={false}
  />
```

1. Create a multiline `TextInput` component, with the attributes presented above.
2. Run on iOS
3. The `TextInput` field should not be able to scroll

facebook/react-native-website#367

[IOS] [FEATURE] [TextInput] - Made it possible to turn off scrolling on a multiline TextInput component
Pull Request resolved: https://github.com/facebook/react-native/pull/19330

Differential Revision: D9235061

Pulled By: hramos

fbshipit-source-id: 99d278004fc236b47dde7e61d74c71e8a3b9d170
2018-08-08 18:46:53 -07:00
Eli White 457a74cbc2 Move Switch native require call to new file
Summary: Moving out the requireNativeComponent call into a new file. We want this long term for all of our view managers to support codegen of the native side and so we can move the viewConfigs into JS.

Reviewed By: yungsters

Differential Revision: D9191214

fbshipit-source-id: d0bddbb50bb1cf6b5a727d72faf834b007ad9440
2018-08-08 15:03:01 -07:00
Jordan Brown b64b9dbece Replace '@flow strict(-local)' with '@flow' in .android.js files
Summary:
Flow doesn't check .android.js files yet anyway.

I'm going to be adding suppressions in a followup diff. It would be nice to not have >1k suppressions saying that we can't do certain things in `flow strict` when we don't even typecheck with regular `flow` just yet

I ran these commands to produce this diff:
`find . -name '*.android.js' -exec sed -i 's/flow strict-local/flow/g' {} +`
`find . -name '*.android.js' -exec sed -i 's/flow strict/flow/g' {} +`

Followed https://unix.stackexchange.com/questions/112023/how-can-i-replace-a-string-in-a-files to do it.

The controller you requested could not be found.

Reviewed By: TheSavior

Differential Revision: D9143783

fbshipit-source-id: e9af4fe695ebdba4db4083de1697cc248d48eb0d
2018-08-08 10:48:19 -07:00
Ziqi Chen 91b3a3055a changed documentation for accessibilityHint
Summary:
Changed documentation for accessibility Hint so that its no longer only available on iOS

Also added full description of documentation for accessibility Role as it was missing earlier

Reviewed By: PeteTheHeat

Differential Revision: D9072572

fbshipit-source-id: c8d20f30df588717d9ec37721c2aa3c86a0664c6
2018-08-08 01:31:46 -07:00
Janic Duplessis 476a831ea0 Un-deprecate TextInput.State.focusTextInput and TextInput.State.blurTextInput (#20326)
Summary:
In https://github.com/facebook/react-native/pull/18936 we decided to deprecate `focusTextInput` and `blurTextInput` but since then I found a valid use case for it that is pretty much impossible to implement otherwise.

React Navigation uses it to blur / re-focus the input during the swipe back gesture. Blur can be done with Keyboard.dismiss but without this api we cannot re-focus the text field that was focused if the swipe back gesture is cancelled. See https://github.com/react-navigation/react-navigation/blob/master/src/navigators/createKeyboardAwareNavigator.js#L21-L34

I think it is best to just bring back this api.
Pull Request resolved: https://github.com/facebook/react-native/pull/20326

Differential Revision: D9182810

Pulled By: hramos

fbshipit-source-id: 3740421ffafb8f814522d15788f3466324177c16
2018-08-06 15:01:50 -07:00
Tim Yung 0bfbf307c8 RN: Fix `testID` on Switch
Summary: My recent refactor of `Switch` broke `testID` from being passed down to the underlying component. This fixes that.

Reviewed By: TheSavior

Differential Revision: D9127216

fbshipit-source-id: 6d442b1cc19cf9f44cb48faac58e5abe9f36064b
2018-08-01 19:16:20 -07:00
Tim Yung 9a4fd6b78d Switch: Warn for Deprecated Color Props
Summary:
Introduces warnings to `Switch` when the deprecated props are being used.

See D9081343 for more details on the specific prop changes.

Reviewed By: blairvanderhoof

Differential Revision: D9081451

fbshipit-source-id: 7f997fc97d316038f0917d2540b982bd9cf34d03
2018-07-31 21:01:41 -07:00
Tim Yung 965adee109 RN: Revamp Switch Component
Summary:
Revamps the Switch API with the goal of increasing the pit of success:

- Introduce `trackColor` which encourages callers configuring the color to set colors for both cases.
- Introduce `ios_backgroundColor` which allows customizing the iOS-only background fill color.
- Deprecate `tintColor` because it is not obvious that this is for the `false` case.
- Deprecate `onTintColor` because the prop is named unconventionally like a callback.
- Renamed `thumbTintColor` to `thumbColor`.

This revision also cleans up the `Switch` component in the following ways:

- More precise Flow types for native components.
- Inline iOS-specific style (so that the code gets stripped on Android).
- Minor documentaiton cleanup.

After this commit, all deprecated props will continue working.

Next, I plan to introduce warnings.

Eventually (e.g. in a couple releases), we can drop support for the deprecated props.

Reviewed By: TheSavior

Differential Revision: D9081343

fbshipit-source-id: c5eb949047dd7a0ffa72621839999d38e58cada8
2018-07-31 21:01:41 -07:00
Wayne Cheng 86f8e9e760 Adding flow strict to as many xplat files as possible
Summary:
ag -L --ignore __snapshots__ 'flow strict$|noflow|generated|The controller you requested could not be found.' | ag '\.js$' | xargs ag -l 'flow' | sort > ~/temp
  cat ~/temp | xargs ag -L 'flow strict' | xargs sed -i '' 's/flow$/flow strict/'
  cat ~/temp | xargs ag -L 'flow strict$' | xargs sed -i '' 's/flow strict-local$/flow strict/'
  until flow; do flow check --json | jq -r '.errors[].message[0].path' | sort | uniq | xargs hg revert; done

allow_many_files
The controller you requested could not be found.
The controller you requested could not be found.

Reviewed By: yungsters

Differential Revision: D9003523

fbshipit-source-id: d0c9fbfe3c32e65d57819fa040d06cd6ebbd59cc
2018-07-27 12:31:42 -07:00
Trish Saylor 78676915ad Create a reusable IG Switch component with UIDocs and snapshot test
Summary: Switch is a standard component and needs some extra styling of the colors to be used in IG, so I've created a reusable switch component for Instagram React Native and added server snapshot tests with UIDocs for it so it will appear in https://our.intern.facebook.com/intern/uidocs/?docset=rn_iig for more people to use.

Reviewed By: lostatseajoshua

Differential Revision: D9023261

fbshipit-source-id: dd460ca4506e2fc072ed03cca56b4a3c172123bd
2018-07-27 06:46:26 -07:00
Ziqi Chen 121e2e5ca6 accessibilityTraits + accessibilityComponentType >> accessibilityRole + accessibilityStates 2/3
Summary:
Previously, I created two props, `accessibilityRole` and `accessibilityStates` for view. These props were intended to be a cross-platform solution to replace  `accessibilityComponentType` on Android and `accessibilityTraits` on iOS.

In this stack, I ran a code mod to replace instances of the two old properties used in our codebase with the new ones.
For this diff, I did a search for all the remnant uses of `accessibilityComponentType` that was not caught by my script, and I manually changed them to `accessibilityRole` and `accessibilityStates`. If the same prop also set `accessibilityTraits` I also removed that here because the two new props works on both platforms.

It was difficult to write a script for this, because most of them were contextual changes.
Out of the contextual changes, most of them followed one of these two patterns:

Before:

```
const accessibilityComponentType = 'button';
const accessibilityTraits = ['button'];

if (this.props.checked) {
  accessibilityTraits.push('selected');
}
if (this.props.disabled) {
 accessibilityTraits.push('disabled');
}

      contentView = (
        <AdsManagerTouchableHighlight
          accessibilityComponentType={accessibilityComponentType}
          accessibilityTraits={accessibilityTraits}
```

After:
      const accessibilityRole = 'button';
      const accessibilityStates = [];

        if (this.props.checked) {
          accessibilityStates.push('selected');
        }
        if (this.props.disabled) {
           accessibilityStates.push('disabled');
        }

      contentView = (
        <AdsManagerTouchableHighlight
          accessibilityRole={accessibilityRole}
          accessibilityStates={accessibilityStates}

Before:

```
  <PressableBackground
          accessible={this.props.accessible}
          accessibilityLabel={this.props.accessibilityLabel}
          accessibilityTraits={this.props.accessibilityTraits}
```

After:

```
  <PressableBackground
          accessible={this.props.accessible}
          accessibilityLabel={this.props.accessibilityLabel}
          accessibilityRole={this.props.accessibilityRole}
          accessibilityRole={this.props.accessibilityStates}
```

In addition to changing the props on the components,
Another fix I had to do was to add props  accessibilityRole and accessibilityStates to components that don't directly inherit properties from view including text input and touchables.

Reviewed By: PeteTheHeat

Differential Revision: D8943499

fbshipit-source-id: fbb40a5e5f5d630b0fe56a009ff24635d4c8cc93
2018-07-25 23:48:26 -07:00
Ziqi Chen 50e400128e accessibilityTraits + accessibilityComponentType >> accessibilityRole + accessibilityStates 1/3
Summary:
Previously, I created two props, `accessibilityRole` and `accessibilityStates` for view. These props were intended to be a cross-platform solution to replace  `accessibilityComponentType` on Android and `accessibilityTraits` on iOS.

In this stack, I ran a code mod to replace instances of the two old properties used in our codebase with the new ones.
For this diff, I wrote a script that focuses on replacing instances of the two properties that only added a single role to `accessibilityTraits` and `accessibilityComponentType`. In summary, this script:
* replaces instances of `accessibilityTraits = "<iOStrait>"` with `accessibilityRole = "<iOStrait>"`
* replaces instances of `accessibilityTraits = {['<iOStrait>']}` with `accessibilityRole = "<iOStrait>"`
* replaces instances of `accessibilityTraits = {"<iOStrait>"}` with `accessibilityRole = "<iOStrait>"`
* removes instances of `accessibilityComponentType`

```

The following is the codeshift script I wrote:
/**
 * Copyright (c) 2015-present, Facebook, Inc.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * format
 */

'use strict';

export default function transformer(file, api) {
  const j = api.jscodeshift;
  const root = j(file.source);

  let hasChanges = false;
  const elements = root.find(j.JSXElement);
  let values;
  let valuess;
  let valuesss;
  elements.forEach(path => {
    const openEl = path.node.openingElement;
    hasChanges = true;
    for (let i = 0; i < openEl.attributes.length; i++) {
		if (openEl.attributes[i].name.name === 'accessibilityComponentType') {
        	openEl.attributes.splice(i, 1);
        }
      if (openEl.attributes[i].name.name === 'accessibilityTraits') {
        if (openEl.attributes[i].value.expression) {
          if (openEl.attributes[i].value.expression.type === 'Literal') {
            values = openEl.attributes[i].value.expression.value;
            openEl.attributes[i] = j.jsxAttribute(
              j.jsxIdentifier('accessibilityRole'),
              j.literal(values),
            );
          }
        }

        if (openEl.attributes[i].value) {
          if (
            openEl.attributes[i].value &&
            openEl.attributes[i].value.type === 'Literal'
          ) {
            valuess = openEl.attributes[i].value.value;
            openEl.attributes[i] = j.jsxAttribute(
              j.jsxIdentifier('accessibilityRole'),
              j.literal(valuess),
            );
          }
        }

        if (openEl.attributes[i].value.expression) {
          if (
            openEl.attributes[i].value.expression.type === 'ArrayExpression' &&
            openEl.attributes[i].value.expression.elements.length === 1
          ) {
            valuesss = openEl.attributes[i].value.expression.elements[0].value;
            openEl.attributes[i] = j.jsxAttribute(
              j.jsxIdentifier('accessibilityRole'),
              j.literal(valuesss),
            );
          }
        }
      }
    }
  });
  if (hasChanges) {
    return root.toSource();
  } else {
    return null;
  }
}
```
I then used this command to run the codemod:

```
./scripts/js1/node_modules/.bin/jscodeshift -c 10 --parser=flow --transform ./scripts/js1/commands/codeshift/add-accessibilityRoles/index.js /data/sandcastle/boxes/instance-ide/xplat/js/RKJSModules/Apps
hg status -n | xargs /data/sandcastle/boxes/instance-ide/tools/third-party/prettier/node_modules/.bin/prettier --single-quote --no-bracket-spacing --jsx-bracket-same-line --trailing-comma all --parser flow --write --require-pragma --no-config
hg status -n | xargs ./scripts/eslint/eslint --plugin lint --no-eslintrc --parser babel-eslint --rule "lint/sort-requires: 1" --fix
js1 build buckfiles
```

Lastly, I had to add a few manual fixes:
* Checked that instances of `accessibilityComponentType` that were deleted were indeed replaced with `accessibilityRole`
* Added props  `accessibilityRole` and `accessibilityStates` to `TouchableWithoutFeedBack` components and `TextProps` because they don't inherit properties directly from view.

Reviewed By: PeteTheHeat

Differential Revision: D8937323

fbshipit-source-id: 85bf4d596e8e7c7ace75ab0b0e68599043760840
2018-07-25 23:48:26 -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
Ziqi Chen c36e8b3307 added accessibilityIgnoresInvertColors to module.exports in ViewPropTypes
Summary:
Previously, I exposed the "accessibilityIgnoresInvertColors" API on iOS to react native views.

In this diff, I added this property to the `module.exports` in `ViewPropTypes` so that the property can be accessed by other files.

Reviewed By: PeteTheHeat

Differential Revision: D8977515

fbshipit-source-id: d0aba5eac3bc1528e18b6027f3f055e5f4a1147a
2018-07-24 18:31:59 -07:00
Ziqi Chen b5b704dc19 added accessibilityStates and accessibilityRole to ReactNativeViewAttributes
Summary:
Previously, I added accessibilityRole and accessibilityStates as View Properties.

In this diff, I added accessibilityRole and accessibilityStates to ReactNativeViewAttributes.UIView, which is used for viewconfig in some components.

The NativeMethodsMixing uses the set view config when invoking `setNativeProps`, and it's used to make those components look like an actual native component class.

Reviewed By: PeteTheHeat

Differential Revision: D8976524

fbshipit-source-id: 16a5ba7d91ee9cfb6488c2d94f7f23b9093e5b81
2018-07-24 18:31:58 -07:00
Janic Duplessis b4b594cec1 Fix `currentlyFocusedField` by Removing `this` usage in TextInputState (#19834)
Summary:
I broke `currentlyFocusedField` when adding it back in ce3b7b8204 because `this` no longer refers to the proper object because it is assigned here ce3b7b8204 (diff-b48972356bc8dca4a00747d002fc3dd5R330). This code was pretty prone to breaking so I simply removed the `this` usage and rely on a top level variable instead. Also moved everything to named functions.
Pull Request resolved: https://github.com/facebook/react-native/pull/19834

Differential Revision: D8943088

Pulled By: hramos

fbshipit-source-id: 24d1470f6117138a5978fb7e467147847a9f3658
2018-07-20 16:33:03 -07:00
Ziqi Chen 03036f79f7 Changed prop name "currentViewStates" to "accessibilityStates" in js (1/3)
Summary:
Context:
After discussing with @[1038750002: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:
Changed the prop name `currentViewStates` to `accessibilityStates` in js files

Reviewed By: PeteTheHeat

Differential Revision: D8896223

fbshipit-source-id: dfdb48dce69303a347dfccd194af2fef9beb776c
2018-07-19 14:13:00 -07:00
Mats Byrkeland be715ec705 Make AccessibilityInfo.setAccessibilityFocus cross platform (#20229)
Summary:
Currently, `AccessibilityInfo.setAccessibilityFocus` is only available on iOS. The same behaviour can be achieved on Android by dispatching the proper accessibility event. I implemented the same function for Android, to make life slightly more convenient for the developer.

Today, developers must write something like this:
```
if (Platform.OS === 'ios') {
     AccessibilityInfo.setAccessibilityFocus(reactTag)
} else {
     UIManager.sendAccessibilityEvent(reactTag, 8)
}
```

With this change, the following is enough for both Android and iOS:
```
AccessibilityInfo.setAccessibilityFocus(reactTag)
```
Pull Request resolved: https://github.com/facebook/react-native/pull/20229

Differential Revision: D8874107

Pulled By: mdvacca

fbshipit-source-id: a6ffd7bb89ce56d6d65b06419633a71dcf3d0733
2018-07-18 17:24:23 -07:00
Ziqi Chen 5acb7211bb added header and summary options for roles
Summary: Added options for summary and header on accessibilityRoles

Reviewed By: PeteTheHeat

Differential Revision: D8866086

fbshipit-source-id: 83bfca678d2308f809e8630b7158a2b4a740c13d
2018-07-16 19:17:27 -07:00