Commit Graph

203 Commits

Author SHA1 Message Date
Héctor Ramos 1151c096da Update copyright headers to yearless format
Summary: This change drops the year from the copyright headers and the LICENSE file.

Reviewed By: yungsters

Differential Revision: D9727774

fbshipit-source-id: df4fc1e4390733fe774b1a160dd41b4a3d83302a
2018-09-11 15:33:07 -07:00
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 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
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
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
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
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 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
Héctor Ramos 95554add98 Update Jest snapshots
Summary:
Jest will now exclude undefined props from snapshots (https://github.com/facebook/jest/pull/6162). Updating the snapshots should fix the current `test_javascript` failures.

Circle CI

[INTERNAL][MINOR][Snapshots] - Update snapshots
Closes https://github.com/facebook/react-native/pull/19414

Differential Revision: D8125193

Pulled By: hramos

fbshipit-source-id: db8dcfcd8afbf9d6256f83c6e922680a7872d776
2018-05-29 17:30:16 -07:00
Eli White ffda017850 Removing unnecessary FlowFixMe
Reviewed By: yungsters

Differential Revision: D7985116

fbshipit-source-id: 97a7a37b2ffe7a81669973f9dca6824a4f352a07
2018-05-14 00:24:44 -07:00
Eli White 8454a36b0b Flow type TouchableBounce
Reviewed By: yungsters

Differential Revision: D7984827

fbshipit-source-id: b0dd67b5c4d57cd9bb0339a5266a16e4565b2d54
2018-05-13 02:01:05 -07:00
Eli White 44743c07ad Flow Type TouchableOpacity
Reviewed By: yungsters

Differential Revision: D7983709

fbshipit-source-id: 0f664c831b754277e344aa53b2dbed6b4f720cd5
2018-05-12 23:25:09 -07:00
Eli White 6cfa4a360d TouchableOpacity @noflow -> @flow
Reviewed By: yungsters

Differential Revision: D7983644

fbshipit-source-id: bf4a0ba600ac51ef07ac12927eed29eeb92ffb2a
2018-05-12 23:25:09 -07:00
Eli White f0c18dc820 Flow type TouchableHighlight
Reviewed By: yungsters

Differential Revision: D7983631

fbshipit-source-id: 98b3708b26e2bf96426d5acaa5c7e2311a3a34f6
2018-05-12 23:25:09 -07:00
Eli White 6b3aad31f6 Remove unused suppressions
Reviewed By: yungsters

Differential Revision: D7983271

fbshipit-source-id: ee64e2dacbc8a1b75915b825f7bf0621a121422d
2018-05-12 23:25:08 -07:00
Eli White 0b79d1faa2 Type TouchableWithoutFeedback
Reviewed By: yungsters

Differential Revision: D7982348

fbshipit-source-id: 409ce4a5ea8c09e58c42caf9db60117253503c4c
2018-05-12 23:25:08 -07:00
Eli White f19ee28e7d Adding $FlowFixMe to invalid prop accesses
Reviewed By: yungsters

Differential Revision: D7977387

fbshipit-source-id: 442e7445be62f78bdf166a2b97ef031e39877355
2018-05-12 10:35:27 -07:00
Eli White d01ab66b47 Prettier React Native Libraries
Reviewed By: sahrens

Differential Revision: D7961488

fbshipit-source-id: 05f9b8b0b91ae77f9040a5321ccc18f7c3c1ce9a
2018-05-10 19:10:38 -07:00
Tim Yung e708010d18 RN: Switch `Text` to `React.forwardRef`
Reviewed By: sahrens

Differential Revision: D7902262

fbshipit-source-id: 218f95cde6d77f21d9362a2f2bd47c5f83d5ee15
2018-05-09 01:16:12 -07:00
Rubén Norte d5e9e55fa3 Remove @providesModule from all modules
Summary:
This PR removes the need for having the `providesModule` tags in all the modules in the repository.

It configures Flow, Jest and Metro to get the module names from the filenames (`Libraries/Animated/src/nodes/AnimatedInterpolation.js` => `AnimatedInterpolation`)

* Checked the Flow configuration by running flow on the project root (no errors):

```
yarn flow
```

* Checked the Jest configuration by running the tests with a clean cache:

```
yarn jest --clearCache && yarn test
```

* Checked the Metro configuration by starting the server with a clean cache and requesting some bundles:

```
yarn run start --reset-cache
curl 'localhost:8081/IntegrationTests/AccessibilityManagerTest.bundle?platform=android'
curl 'localhost:8081/Libraries/Alert/Alert.bundle?platform=ios'
```

[INTERNAL] [FEATURE] [All] - Removed providesModule from all modules and configured tools.
Closes https://github.com/facebook/react-native/pull/18995

Reviewed By: mjesun

Differential Revision: D7729509

Pulled By: rubennorte

fbshipit-source-id: 892f760a05ce1fddb088ff0cd2e97e521fb8e825
2018-04-25 07:37:10 -07:00
Andrew Kriger 722f88ca90 Adds Android click sound to Touchables
Summary:
Android apps play a touch sound on press, as long as you have "Touch sounds" enabled in the settings. As and Android user, when building my app using React Native, one of the first things I noticed was that there were not any touch sounds. This is missing from React Native and there have been multiple PRs to have this implemented, but no success.

This PR iterates over [#6825](https://github.com/facebook/react-native/pull/6825) and [#11136](https://github.com/facebook/react-native/pull/11136)

This PR keeps it simple by only implementing the enhancement for Android, as iOS apps typically do not use touch sounds, and follows the users' system settings for whether or not the sound is played.

I have manually tested this on multiple devices and emulators with zero problems

[ANDROID] [ENHANCEMENT] [UIManagerModule.java]- Adds Android click sound to touchables

[ANDROID] [ENHANCEMENT] [Touchable] - Adds Android click sound to touchables
Closes https://github.com/facebook/react-native/pull/17183

Differential Revision: D7560327

Pulled By: hramos

fbshipit-source-id: ce1094c437541bc677c7d64b0dba343dd9574422
2018-04-09 17:01:57 -07:00
Krzysztof Ciombor b7bb2e5745 Add support for Android TV devices
Summary:
<!--
Thank you for sending the PR! We appreciate you spending the time to work on these changes.

Help us understand your motivation by explaining why you decided to make this change.

You can learn more about contributing to React Native here: http://facebook.github.io/react-native/docs/contributing.html

Happy contributing!

-->

* To be on par with Apple TV support, this makes it possible to run React Native apps on Android TV devices (See also: https://react-native.canny.io/feature-requests/p/android-tv-support)
* These changes also make it possible to navigate through the app using D-PAD buttons that are present on some mobile devices
* Since these changes affect, among others, `ReactRootView.java` and `Touchable.js` code and are closely related to Apple TV implementation, it makes sense for them to be included in the core

 - React native apps can be launched on Android TV devices and properly render their content
 - Navigation is possible using left, right, top, bottom arrows from the remote (or D-PAD)
 - Touchable components can handle D-PAD center button press events and correctly fire their `onPress` handlers
 - Touchable components will receive `onPressIn` and `onPressOut` events and can react to focus/blur changes appropriately (just like on Apple TV)
 - `Platform` constants allow to check if the react-native app is running on TV (`Platform.isTV`)
 - `ScrollView`s behave correctly (same as native implementation) when switching to view outside bounds – that is, the container would scroll such that the newly focused element is fully visible
 - Native "clicking" sounds are played when moving between focusable elements
 - Play/Pause click event is send to `TVEventHandler`
 - Rewind and FastForward events are send to `TVEventHandler`
 - Back button behaves as a normal Android back button
 - Diagonal buttons work correctly on Android TV, e.g. if there is no button directly to the right from the focused one, but there is one to the right but a bit higher/lower it will grab focus
 - Dev menu can be accessed by long pressing fast forward button

A demo showing RNTester app running on Android TV device (Amazon Fire TV Stick) can be found here:
[![RNAndroidTVDemo](http://img.youtube.com/vi/EzIQErHhY20/0.jpg)](http://www.youtube.com/watch?v=EzIQErHhY20)

- `TextInput` will not work on Android TV devices. There's an issue with native `ReactEditText` implementation that prevents it from receiving focus. This makes it impossible to navigate to `TextInput`.
This will be fixed next, but will be included in a separate Pull Request
- ~Overlay permissions cannot be granted on Android TV devices running Android version >= 6.0
This is because the overlay permission can only be granted by firing an Intent to open settings page (`ACTION_MANAGE_OVERLAY_PERMISSION`). Since this page does not exist on TV devices the permission cannot be requested. This will make the app crash when trying to open dev menu (⌘+M) or displaying a redbox error.
Note: This does not affect devices running Android version < 6.0 (for example Amazon Fire TV Stick)~
This is now fixed by: https://github.com/facebook/react-native/pull/16596

* Launch the RNTester app on Android TV device.
  * Ensure it launches without a crash
  * Ensure basic navigation is possible
  * Ensure Touchable components can receive select events
* Ensure the changes do not break current Android and iOS mobile devices functionality.
* Ensure the changes do not break current Apple TV functionality.

[RNAndroidTVDemo video](http://img.youtube.com/vi/EzIQErHhY20/0.jpg)

* Added `ReactAndroidTVViewManager` that handles TV `KeyEvent`s and dispatches events to JS - This is the core that enables basic navigation functionality on Android TV devices
* Following the above change we copy `TVEventHandler.ios.js` into `TVEventHandler.android.js` to enable JS to pick up those native navigation events and dispatch them further to subscribed views. (Note: We do not have a native `TVNavigationEventEmitter` implementation on Android, thus this file is slightly modified, e.g. it does pass `null` to `NativeEventEmitter` constructor)
* Added `uiMode` to `AndroidInfoModule`. (**Note**: This required changing `extends BaseJavaModule` to `extends ReactContextBaseJavaModule` to be able to use `getSystemService` which requires `Context` instance!
* Added `isTV` constants to both `Platform.ios.js` (keeping the deprecated `isTVOS` as well) and `Platform.android.js`
* Changed condition check on `Touchable.js` to use the newly added `isTV` flag to properly handle TV navigation events on Android as well
* Added `LEANBACK_LAUNCHER` to `RNTester` `intent-filter` so that it is possible to launch it on Android TV devices.
* See also a PR to `react-native-website` repo with updated docs for Android TV: https://github.com/facebook/react-native-website/pull/59

 - [ ] Fix `TextInput` components handling by allowing them to be focused and making a proper navigation between them (and/or other components) possible. One thing to note here that the default behavior to immediately open software keyboard when focused on `TextInput` field will need to be adjusted on Android TV as well)
 - [x] Fix overlay permissions issue by changing the way redbox/dev menu are displayed (see: https://github.com/facebook/react-native/pull/16596)
 - [ ] Adjust placement of TV-related files (e.g. the `TVEventHandler.js` file is placed inside `AppleTV` directory which is not accurate, since it does handle Android TV events as well)

Previous discussion: https://github.com/SoftwareMansion/react-native/pull/1
<!--
Help reviewers and the release process by writing your own release notes

**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 ]   [ {File}      ]
[ IOS      ]   [ FEATURE     ]   [ {Directory} ]   |-----------|
[ ANDROID  ]   [ MINOR       ]   [ {Framework} ] - | {Message} |
[----------]   [-------------]   [-------------]   |-----------|

[CATEGORY] [TYPE] [LOCATION] - 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
-->

[ANDROID] [FEATURE] [TV] - Added support for Android TV devices
Closes https://github.com/facebook/react-native/pull/16500

Differential Revision: D6536847

Pulled By: hramos

fbshipit-source-id: 17bbb11e8583b97f195ced5fd9762f8902fb8a3d
2018-03-06 10:47:02 -08:00
Maksym Komarychev 9366ce416f Update opacity when `disabled` prop is changed
Summary:
fixes #17105

If you render

```
    <TouchableOpacity
        disabled={true}
        style={{opacity: 0.5}}
    >
        ...
    </TouchableOpacity>
```

and then

```
    <TouchableOpacity
        disabled={false}
        style={{opacity: 1}}
    >
        ...
    </TouchableOpacity>
```

The content of `TouchableOpacity` will still have opacity = 0.5 because real
opacity is controlled by animated property which should be properly updated
when `disabled` prop changes.

<!--
Thank you for sending the PR! We appreciate you spending the time to work on these changes.

Help us understand your motivation by explaining why you decided to make this change.

You can learn more about contributing to React Native here: http://facebook.github.io/react-native/docs/contributing.html

Happy contributing!

-->

Usually when a button or other UI component is built with `TouchableOpacity` you may want to change it's opacity if state of component is changed (enabled/disabled). Opacity provided in props is overridden with internally-managed animated value. Add extra check when component is updated to trigger opacity animation upon change of `disabled` flag.

You can use code from https://github.com/facebook/react-native/issues/17105.

(If this PR adds or changes functionality, please take some time to update the docs at https://github.com/facebook/react-native-website, and link to your PR here.)

[GENERAL][BUGFIX][TouchableOpacity] - trigger animation on `opacity` upon change in `disabled` prop.
<!--
Help reviewers and the release process by writing your own release notes

**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 ]   [ {File}      ]
[ IOS      ]   [ FEATURE     ]   [ {Directory} ]   |-----------|
[ ANDROID  ]   [ MINOR       ]   [ {Framework} ] - | {Message} |
[----------]   [-------------]   [-------------]   |-----------|

[CATEGORY] [TYPE] [LOCATION] - MESSAGE

 EXAMPLES:

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

Differential Revision: D7158549

Pulled By: hramos

fbshipit-source-id: 209cc433b829b129810e8a884964c8853ca3fe8f
2018-03-05 16:12:00 -08:00
Eli White 3152e93095 Converting Libraries/Components to not use var
Reviewed By: sahrens

Differential Revision: D7117137

fbshipit-source-id: a55a04928a0073a17e0709e851aa8b11678042ba
2018-03-03 15:38:18 -08:00
Julien K 6c353fd7e9 onPress animation with magnification
Summary:
Related to: #15454

Motivation: Improve tvOS feeling for TouchableHighlight

![changewithaniamtion](https://user-images.githubusercontent.com/7658664/29193477-b99b4a10-7e25-11e7-8b31-e0e4ca9d7720.gif)

- When you select the button he is focus and the underlay is show
- When you press the button, there is an animation, but after the animation, the focus is on the button and the underlay is show

Play with tvParallaxProperties on tvOS, test with and without patch just to see the actual behaviour
```
			<TouchableHighlight
						tvParallaxProperties={{
							enabled: true,
							shiftDistanceX: 0,
							shiftDistanceY: 0,
							tiltAngle: 0,
							magnification: 1.1,
                                                        pressMagnification: 1.0,
							pressDuration: 0.3,
						}}
						underlayColor="black"
						onShowUnderlay={() => (console.log("onShowUnderlay")}
						onHideUnderlay={() =>  (console.log("onHideUnderlay")}
						onPress={() =>  (console.log("onPress")}
					>
						<Image
							style={styles.image}
							source={ uri: 'https://www.facebook.com/images/fb_icon_325x325.png' }
						/>
					</TouchableHighlight>
```
Closes https://github.com/facebook/react-native/pull/15455

Differential Revision: D6887437

Pulled By: hramos

fbshipit-source-id: e18b695068bc99643ba4006fb3f39215b38a74c1
2018-02-27 13:10:02 -08:00
Spencer Ahrens 3756d41de1 Add testOnly_pressed to TouchableHighlight
Reviewed By: yungsters

Differential Revision: D7043098

fbshipit-source-id: 1df06df6820d81b37dc9a167a7931ed20df44f0f
2018-02-26 13:48:19 -08:00
Alex Kotliarskyi 7dd12a26b9 Mock static methods of TouchableNativeFeedback on iOS
Reviewed By: TheSavior

Differential Revision: D7016679

fbshipit-source-id: bd04244eaf876e3ffab4f0c64792769a9ea40abd
2018-02-21 11:21:34 -08:00
Sophie Alpert 1490ab12ef Update license headers for MIT license
Summary:
Includes React Native and its dependencies Fresco, Metro, and Yoga. Excludes samples/examples/docs.

find: ^(?:( *)|( *(?:[\*~#]|::))( )? *)?Copyright (?:\(c\) )?(\d{4})\b.+Facebook[\s\S]+?BSD[\s\S]+?(?:this source tree|the same directory)\.$
replace: $1$2$3Copyright (c) $4-present, Facebook, Inc.\n$2\n$1$2$3This source code is licensed under the MIT license found in the\n$1$2$3LICENSE file in the root directory of this source tree.

Reviewed By: TheSavior, yungsters

Differential Revision: D7007050

fbshipit-source-id: 37dd6bf0ffec0923bfc99c260bb330683f35553e
2018-02-16 18:31:53 -08:00
Brian Vaughn 6f007e8957 Ran rename-unsafe-lifecycles codemod on xplat/js
Reviewed By: trueadm

Differential Revision: D6889214

fbshipit-source-id: e815cda4b09f3650ae3b0b9a44ae6f5fcb48fe25
2018-02-08 10:58:31 -08:00
Eli White cd263a2cc7 Backed out changeset 409acf8d3356
Differential Revision: D6789941

fbshipit-source-id: 30d431727a4615208f51293d071f9334584a2269
2018-01-23 19:26:03 -08:00
Eli White 3c2bb3e90a TouchableWithoutFeedback will use child's nativeID if specified
Reviewed By: sahrens

Differential Revision: D6733834

fbshipit-source-id: 409acf8d33565aa1e6d4698fd5d2db046a6f9402
2018-01-19 13:02:41 -08:00
Spencer Ahrens 350377f57c Tweak FIGListItem layout
Reviewed By: yungsters

Differential Revision: D6586846

fbshipit-source-id: cf57c4e042868a053da2dfa959cd47c7b9241a24
2017-12-18 18:31:19 -08:00
Spencer Ahrens 5a1171ebfa Fix backgroundColor with TouchableHighlight
Reviewed By: blairvanderhoof

Differential Revision: D6575797

fbshipit-source-id: 913a5916def9719689917e83e917f44503b99a60
2017-12-14 21:20:17 -08:00
Spencer Ahrens ee8a7b4827 Some TouchableHighlight cleanup
Reviewed By: TheSavior

Differential Revision: D6494579

fbshipit-source-id: 02bbfc571e53f698cc943375800ad3bec4405495
2017-12-13 17:31:24 -08:00
Avik Chaudhuri a48da14800 @allow-large-files Flow 0.58 upgrade for xplat/js
Reviewed By: yungsters

Differential Revision: D6219339

fbshipit-source-id: f003111500ef5971b9a95f26d43cee6644c16abe
2017-11-02 10:51:14 -07:00
Miguel Jimenez Esun 834b9d4e6e Adding @email tags to most of the tests
Reviewed By: rafeca

Differential Revision: D6185623

fbshipit-source-id: 30df83288fe85516d8d5a1617a4fb8fea826ed6f
2017-11-02 06:25:03 -07:00
Brian Vaughn 43241e591d Moved `PooledClass` and improved `js1 upgrade react`
Reviewed By: gaearon

Differential Revision: D6136816

fbshipit-source-id: fca775786cf4f1717509d9bfeb0f789cc6a99e4e
2017-10-24 12:30:27 -07:00
ashoat 833b27483b Fix Flow errors at declaration of most major library components
Summary:
The relevant changes in the PR are to Libraries/StyleSheet/EdgeInsetsPropType.js; the rest are just removals of FlowIgnores.

The definition of the relevant types is [here](https://github.com/facebook/flow/blob/master/lib/react.js#L262-L271).

The long and short of it is that for whatever reason, Flow is unable to realize that `ReactPropsChainableTypeChecker` is a subtype of `ReactPropsCheckType` unless we assert it. Once we explicitly hint this to the typechecker, it realizes that `EdgeInsetsPropType` is indeed a valid React PropType, and stops complaining that it isn't.
Closes https://github.com/facebook/react-native/pull/16437

Differential Revision: D6109742

Pulled By: sahrens

fbshipit-source-id: e4e10720b68c912d0372d810409f389b65d7f4b1
2017-10-20 03:50:25 -07:00
dlowder-salesforce c1223c5530 Apple TV: TouchableOpacity and Button need hasTVPreferredFocus support
Summary:
**Motivation**

Give `TouchableOpacity` and `Button` the same TV focus support as is already present in `TouchableHighlight`.

**Test plan**

Manual testing on TV simulator and devices.
Closes https://github.com/facebook/react-native/pull/15561

Differential Revision: D5665976

Pulled By: hramos

fbshipit-source-id: 0d5c588e1c82471f23617a3df1b77abc589a7c63
2017-10-18 12:18:12 -07:00
Janic Duplessis 0cd69e8a02 Run eslint --fix
Summary:
CI is currently failing because of a lint issue, this fixes it and a bunch of other warnings that are auto-fixable.

**Test plan**
Quick manual test, cosmetic changes only.
Closes https://github.com/facebook/react-native/pull/16229

Differential Revision: D6009748

Pulled By: TheSavior

fbshipit-source-id: cabd44fed99dd90bd0b35626492719c139c89f34
2017-10-09 17:46:44 -07:00
Matej Strasek 4ddc931d15 Fixing test by updating snapshot for TouchableHighlight
Summary:
<!--
Thank you for sending the PR! We appreciate you spending the time to work on these changes.

Help us understand your motivation by explaining why you decided to make this change.

You can learn more about contributing to React Native here: http://facebook.github.io/react-native/docs/contributing.html

Happy contributing!

-->

Tests were failing due to not updated snapshot about TouchableHighlight.

Run `npm test`.
Closes https://github.com/facebook/react-native/pull/16185

Differential Revision: D6005399

Pulled By: hramos

fbshipit-source-id: eda5009b68ca121250817de448424105aec6f685
2017-10-07 16:40:43 -07:00
nicehacker f7f347329e Add example on Components
Summary:
<!--
Thank you for sending the PR! We appreciate you spending the time to work on these changes.

Help us understand your motivation by explaining why you decided to make this change.

You can learn more about contributing to React Native here: http://facebook.github.io/react-native/docs/contributing.html

Happy contributing!

-->

Adding example on components section with [react-native-web-player](https://github.com/dabbott/react-native-web-player)

- ActivityIndicator
- TouchableOpacity
- TouchableHighlight

Screenshot on http://localhost:8079/react-native/docs/activityindicator.html
![react-native-activityindicator](https://user-images.githubusercontent.com/13135332/30432801-adca0982-9988-11e7-8e70-94ad9e42ea43.png)

Screenshot on http://localhost:8079/react-native/docs/touchableopacity.html
![react-native-touchableopacity](https://user-images.githubusercontent.com/13135332/30432718-80570554-9988-11e7-9c81-15ab98327fed.png)

Screenshot on http://localhost:8079/react-native/docs/touchablehighlight.html
![react-native-touchablehighlight](https://user-images.githubusercontent.com/13135332/30432733-8290fbb8-9988-11e7-94a1-86c3166e544d.png)
Closes https://github.com/facebook/react-native/pull/15950

Differential Revision: D5881366

Pulled By: hramos

fbshipit-source-id: 2926071723defedf9ed5cb1b1128204256c71dd9
2017-09-21 17:37:07 -07:00
nicehacker fa1b533c56 Add Example for TouchableOpacity.js
Summary:
<!--
Thank you for sending the PR! We appreciate you spending the time to work on these changes.

Help us understand your motivation by explaining why you decided to make this change.

You can learn more about contributing to React Native here: http://facebook.github.io/react-native/docs/contributing.html

Happy contributing!

-->

Adding example with [react-native-web-player](https://github.com/dabbott/react-native-web-player)

Screenshot on http://localhost:8079/react-native/docs/touchableopacity.html
![react-native-touchableopacity](https://user-images.githubusercontent.com/13135332/30335218-bd32fb0e-9807-11e7-976d-5235402fdba8.png)
Closes https://github.com/facebook/react-native/pull/15911

Differential Revision: D5817180

Pulled By: TheSavior

fbshipit-source-id: 6399a53dabf8e3f0cf680aeb41d8afbaa2ce11e8
2017-09-12 20:32:07 -07:00
Jiajie Zhu 34e9468b8f color filters - use TouchableBounce and make it configurable
Differential Revision: D5773726

fbshipit-source-id: fc01860bc5958d1368d3f39e2833382a212d60d2
2017-09-06 16:38:37 -07:00
Marshall Roch 91b6b4efb9 @allow-large-files Flow v0.54.0
Reviewed By: leebyron

Differential Revision: D5773490

fbshipit-source-id: 2c54bb6326f23edbe9a969f3010f79da8189923e
2017-09-06 03:33:43 -07:00
Caleb Meredith 63f990121a Fix React Native open source
Reviewed By: hramos, TheSavior

Differential Revision: D5728356

fbshipit-source-id: fb751d67c16ba9273de93d9b6d5acd65b1555dca
2017-08-29 15:01:05 -07:00
Caleb Meredith 90eaeb019b Upgrade fbsource/xplat/js to Flow v0.53.0
Reviewed By: avikchaudhuri

Differential Revision:
D5648819
Ninja: T20988071

fbshipit-source-id: 66e5b6747c79ae66b6eb69d40ede5e982c26174f
2017-08-17 18:45:01 -07:00