Commit Graph

1082 Commits

Author SHA1 Message Date
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
Eli White eea4842972 Flow strictify possible files in RN core
Summary:
This was done by running the command on: https://our.intern.facebook.com/intern/wiki/Flow_Strict/

```
ag -L --ignore __snapshots__ 'flow strict$|noflow|generated|partially-generated' | 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 --json | jq -r '.errors[].message[0].path' | sort | uniq | xargs hg revert; done
```

Reviewed By: sahrens

Differential Revision: D8530207

fbshipit-source-id: c28c7ac5ed3e9b80f3d126d5f30463be8a8a744d
2018-06-20 00:47:21 -07:00
Spencer Ahrens 76eebce3c2 Fix more forwardRef displayNames
Summary:
See https://reactjs.org/docs/forwarding-refs.html#displaying-a-custom-name-in-devtools

reapply of D8342904

Reviewed By: yungsters

Differential Revision: D8465006

fbshipit-source-id: f196f39b9b1c9bbe16a845667ebbdb21953a5848
2018-06-19 14:17:19 -07:00
Jay Phelps 0883e52c74 remove deprecated behavior of touchableHandleActivePressIn/Out called for focus/blur (#19718)
Summary:
Follow up to #18470, which has not yet landed in a release so we may want to hold off merging this until it has so that people receive the deprecation warning.

***

This PR removes the previously deprecated behavior of touchableHandleActivePressIn/Out (as well as onPressIn/Out being called on TV platforms for focus/blur. Instead, users should utilize the new `onFocus` and `onBlur` for these events.

This was because on TV platforms onPressIn/Out was overloaded to trigger for not only presses but these focus events as well. The normal behavior of true presses will still defer to touchableHandleActivePressIn/Out (which defers to onPressIn/Out).

<!--
  Required.
  Help reviewers and the release process by writing your own release notes. See below for an example.
-->

[TV] [BREAKING] [Touchable] - On TV platforms `onPressIn` and `onPressOut` on Touchables will now only be triggered for press events, not for focus/blur. Instead, you can use `onFocus` and `onBlur`.

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

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

 EXAMPLES:

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

Cc/ matthargett
Closes https://github.com/facebook/react-native/pull/19718

Differential Revision: D8450514

Pulled By: hramos

fbshipit-source-id: 818e85a338a451834b54d8965602699fc9b24e87
2018-06-15 10:46:47 -07:00
Jens Panneel 75e49a0637 Feature/add decimal pad to android (#19714)
Summary:
For a current use-case we need the a keyboard with characters 0-9 and a decimal point (or comma depending on language settings)

This exists on iOS as UIKeyboardType "decimalPad" and this is what react-native maps to for both "numeric" and "decimal-pad". This also exists on Android as inputType "numberDecimal", but is currently not accessible through react-native.

This PR maps the value "decimal-pad" of the keyboardType property of TextInput to the Android inputType "numberDecimal", effectively making "decimal-pad" cross platform without breaking anything.

* https://facebook.github.io/react-native/docs/textinput.html#keyboardtype
* https://developer.apple.com/documentation/uikit/uikeyboardtype
* https://developer.android.com/reference/android/widget/TextView#attr_android:inputType

There is this bug in some Samsung keyboards where both the - sign and decimal sign disappear when the keyboardType is set to "number" and both the "signed" and "decimal" flags are set. (Like is the case when using the react-native keyboardType prop "numeric".) https://androidforums.com/threads/numeric-soft-keyboard-missing-minus-sign-in-android-8-0-samsung-a5.1272628/

For developers that need decimal numbers but not negative ones, using "decimal-pad" will provide a workaround. I reproduced this on a Samsung A5 only, but maybe other phones have this exact issue. https://github.com/facebook/react-native/issues/12988 https://github.com/facebook/react-native/issues/12977 https://github.com/facebook/react-native/issues/17473 https://github.com/facebook/react-native/issues/17474

* Added testcase consistent with existing keyboardType tests
* Also added testcase for the related, but missing number-pad

This PR follows the same approach as the recently merged PR introducing "number-pad" b638847a46

Documentation PR: https://github.com/facebook/react-native-website/pull/405

 [ANDROID] [ENHANCEMENT] [TextInput] - Added "decimal-pad" keyboard type
Closes https://github.com/facebook/react-native/pull/19714

Differential Revision: D8429185

Pulled By: mdvacca

fbshipit-source-id: 6b56da2088f2be427ebffa04c4e17c91ffb9f7d9
2018-06-14 14:01:51 -07:00
Reem Helou 95e8592dcb Revert D8342904: [StrictMode] Fix more forwardRef displayNames
Differential Revision:
D8342904

Original commit changeset: b6e53da7305d

fbshipit-source-id: abf5fa6ccb16058f20cbb569ecfc790fad017133
2018-06-11 20:46:27 -07:00
Spencer Ahrens d1336ab16e Fix more forwardRef displayNames
Reviewed By: TheSavior

Differential Revision: D8342904

fbshipit-source-id: b6e53da7305d71635528a42e80910f4a9db0455c
2018-06-11 19:22:51 -07:00
Spencer Ahrens ddf2c2ffd6 fix forwardRef displayName on Text and View
Reviewed By: TheSavior

Differential Revision: D8342852

fbshipit-source-id: 5af80edfd5de5b6d6ea6fdc24abf8931f767c812
2018-06-11 19:22:51 -07:00
Jay Phelps baa61ddc9c Trigger onFocus/onBlur instead of onPressIn/onPressOut (eventually, but for now just deprecate) (#18470)
Summary:
Currently on iOS and Android focus/blur events trigger onPressIn/onPressOut. Based on discussions with people are several companies who use react-native we're proposing instead triggering new events onFocus/onBlur. Initial discussion on Slack with some from the core team on Slack seemed positive.

Couple reasons:

* The current API behavior overloads onPressIn/onPressOut. That means on platforms like react-native-web, if focus/blur support was added (as we're hoping for), even though onPressIn/onPressOut would be useful as the name describes, you wouldn't be able to distinguish between it and browser element focus/blur events.
* The names aren't as self-documenting/intuitive as onFocus/onBlur, especially for react-dom users.

There aren't any current tests around this, but I intend to add them if we solidify the API.

There's also an option question on the transition--do we deprecate the existing API with a warning? This PR just deprecates them, though it will on any TV platform when something becomes focused regardless of whether they use the API or not. This isn't ideal. It's not clear if there are alternatives or if just right away breaking the API for TV users is the correct solution, if we can get consensus between the few parties who are using it.

***

I'm interested to hear counter points or prior discussions.

Cc/ matthargett dlowder-salesforce rozele
Closes https://github.com/facebook/react-native/pull/18470

Differential Revision: D8368109

Pulled By: hramos

fbshipit-source-id: 22587b82e091645e748b6c2d721fdff06d54837f
2018-06-11 15:31:15 -07:00
Eli White a51e8b19cc Don't pass additional args to requireNativeComponent in .android.js files
Reviewed By: sahrens

Differential Revision: D8345921

fbshipit-source-id: 187048ad4c1b361f0b99b993052bdcaf47a266db
2018-06-10 15:38:32 -07:00
Eli White f50ce0850d Passing forwardedRef to Slider
Reviewed By: sahrens

Differential Revision: D8345883

fbshipit-source-id: d2affdba14d38593541e591fe72006c76fca166f
2018-06-10 14:28:37 -07:00
Eli White 160bf731e5 Switch to Platform.isTV to pass Android Flow
Reviewed By: sahrens

Differential Revision: D8345911

fbshipit-source-id: 9af7a25127e7c35844a6c59b267a77cf8adba535
2018-06-10 13:45:57 -07:00