Commit Graph

1093 Commits

Author SHA1 Message Date
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
Ziqi Chen 3cfa7ae698 Added in Prop for CurrentViewState
Summary:
Added in a prop for CurrentViewState that is used to set the state of the current view for both accessibility and regular view settings..

Ex:
AccessibilityRole = "button"
CurrentViewState = ['selected']

This will trigger talk back/voiceover to announce both the role and the state.

Unlike Accessibility Role, Accessibility States can take on more than one form, and are passed in an array.
Ex: AccessibilityState = ['selected', 'disabled']

Currently, two options are available: selected and disabled

Reviewed By: PeteTheHeat

Differential Revision: D8837848

fbshipit-source-id: ca30c950a2aa713813be8577ea4fa9ba9bfc698a
2018-07-16 19:17:27 -07:00
Ziqi Chen 10b603fdd3 added image button as option for accessibility role
Summary:
Because we're now separating accessibilityTraits into accessibilityRole and accessibilityState, we're going to only allow one role to be set, and allow one preset combinations of roles that make sense.

This diff adds image button as a role.

Reviewed By: PeteTheHeat

Differential Revision: D8846958

fbshipit-source-id: dad3783654b20abeb29767cdad7450d1896058c2
2018-07-16 18:48:15 -07:00
Ziqi Chen d0b86ecb4f added in the three roles: search, adjustable, link that require localization
Summary:
Added in props for three more roles:
link, search, and adjustable

Reviewed By: blavalla

Differential Revision: D8788186

fbshipit-source-id: acd1d667a43bea753964d128bd4525ece90d06b3
2018-07-12 23:47:12 -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 5aa040dfb7 added property accessibility IgnoresInvertColors to proptypes
Summary: Added property accessibilityIgnoresInvertColors to ViewPropTypes.

Reviewed By: PeteTheHeat

Differential Revision: D8735443

fbshipit-source-id: ac526779b7f92ceab074de75a2bf61752e7e90c6
2018-07-09 11:02:50 -07:00
Gabe Levi eac34e3021 Flow v0.76.0
Summary: No new errors in this version. Just removed a bunch of unused suppressions

Reviewed By: TheSavior

Differential Revision: D8754160

fbshipit-source-id: 2f02240b6d65edecba5d9ed603c7703462547a7f
2018-07-09 08:17:51 -07:00
Wen-Chien Chen b99609e9d2 Fix ScrollView logspew
Summary: There was an inverted expression leading to logspew. Fix this.

Reviewed By: TheSavior

Differential Revision: D8758023

fbshipit-source-id: 7a83c68db6c95f2b5db6dcc7d7780fc66321b49e
2018-07-08 00:32:30 -07:00
Spencer Ahrens 5b6ff01764 Remove ScrollView.propTypes
Summary:
We're unifying on flow types, and propTypes require non-trivial resources to initialize in aggregate.

Some open source code might depend on extracting ScrollView.propTypes which will now fail. To fix, simplly remove these dependencies and use flow or typescript for verifying correct prop usage instead.

Reviewed By: TheSavior

Differential Revision: D8726371

fbshipit-source-id: 19e9540794db97a9e356615b544759a0753fd68c
2018-07-05 15:18:04 -07:00
Spencer Ahrens f40de0e467 Fix some ScrollView lint
Summary: $title

Reviewed By: TheSavior

Differential Revision: D8721334

fbshipit-source-id: 1aad238da9b8efdef6e2f3f1f2effd213fa9c3aa
2018-07-05 15:18:03 -07:00
Spencer Ahrens 2424ef5654 Move ScrollView prop comments from propTypes to flow types
Summary: Next step: make propTypes `__DEV__` only.

Reviewed By: TheSavior

Differential Revision: D8721300

fbshipit-source-id: 066b495836a87ea92d370728911e7b7ba6566c53
2018-07-05 15:18:03 -07:00
Peter van der Zee 5bf3476133 Upgrade Prettier to 1.13.6 on fbsource
Reviewed By: zertosh

Differential Revision: D8638504

fbshipit-source-id: c6991b2e884e14868ddc1d9047a78191219d673f
2018-06-27 03:32:42 -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