Commit Graph

19 Commits

Author SHA1 Message Date
Diego Pasquali 7b05b091fd Integrated iOS-only accessibilityLanguage prop (#33090)
Summary:
This PR fixes https://github.com/facebook/react-native/issues/30891

This PR is going to add an `accessibilityLanguage` prop to all the available components. This props is currently working only on iOS and should follow the [guidelines of the relative configuration](https://developer.apple.com/documentation/objectivec/nsobject/1615192-accessibilitylanguage).

I'm in no way an expert on native programming (especially Objective-C) so I'm open to changes / improvements 🙂

## Changelog

<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://github.com/facebook/react-native/wiki/Changelog
-->

[iOS] [Added] - Integrated the `accessibilityLanguage` prop to all the available components. The prop is available for any platform but it will work only on iOS.

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

Test Plan:
This has been tested using both the Simulator, checking for the `Language` attribute, and using a physical device with the Voice Over enabled.

<img width="1083" alt="Screenshot 2022-02-11 at 13 17 32" src="https://user-images.githubusercontent.com/5963683/153590415-65fcb4ff-8f31-4a0f-90e5-8eb1aae6aa3d.png">

Reviewed By: philIip

Differential Revision: D34523608

Pulled By: rh389

fbshipit-source-id: b5d77fc0b3d76ea8ed8f30c8385459ba98122ff6
2022-03-07 09:43:30 -08:00
Andres Suarez 8bd3edec88 Update copyright headers from Facebook to Meta
Reviewed By: aaronabramov

Differential Revision: D33367752

fbshipit-source-id: 4ce94d184485e5ee0a62cf67ad2d3ba16e285c8f
2021-12-30 15:11:21 -08:00
Tim Yung 77ecc7ede1 JS: Format with Prettier v2.4.1 [3/n]
Summary:
Changelog:
[General][Internal]

Reviewed By: zertosh

Differential Revision: D31883447

fbshipit-source-id: cbbf85e4bf935096d242336f41bf0cc5d6f92359
2021-11-02 22:14:16 -07:00
Nishan Bende d85d72d0d9 fix: TouchableNativeFeedback ripple starts on previous touch location (#31777)
Summary:
TouchableNativeFeedback's ripple starts from previous location on subsequent presses. This is similar to https://github.com/facebook/react-native/pull/31669

Fixes https://github.com/facebook/react-native/issues/28944

Issue

https://user-images.githubusercontent.com/23293248/123521731-1f375f00-d6d6-11eb-8e4c-fc5ffb322e67.mov

Fix

https://user-images.githubusercontent.com/23293248/123521735-2bbbb780-d6d6-11eb-88b2-be75342cf22a.mov

## Changelog

<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://github.com/facebook/react-native/wiki/Changelog
-->

[Android] [Fixed] - TouchableNativeFeedback ripple starts on previous touch location.

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

Test Plan: Tested TouchableNativeFeedback examples in rn-tester app. Registering coordinates before pressed command fixes the issue.

Reviewed By: lunaleaps

Differential Revision: D29496515

Pulled By: kacieb

fbshipit-source-id: 77ac626181a61eee2cd30c4d48e52d10d800f2d8
2021-07-06 17:50:35 -07:00
Kazuki Yamashiro 88f2356eed Added talkback support for TouchableNativeFeedback accessibility: disabled prop (#31224)
Summary:
Issue https://github.com/facebook/react-native/issues/30952
Add talkback support for TouchableNativeFeedback component.

## Changelog

<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://github.com/facebook/react-native/wiki/Changelog
-->

[Android] [Changed] - TouchableNativeFeedback: sync disabled prop with accessibilityState

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

Test Plan:
I have checked that talkback and disabled works properly on the actual device(Pixel4a Android11).

```jsx
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * format
 * flow strict-local
 */

import * as React from 'react';
import {
  Text,
  View,
  StyleSheet,
  TouchableNativeFeedback,
  Alert,
} from 'react-native';

export default function App() {
  const onPress = () => Alert.alert('test');

  return (
    <View style={styles.container}>
      {/*not disabled, voice:double tap to activate*/}
      <TouchableNativeFeedback onPress={onPress}>
        <View style={styles.touchable}>
          <Text style={styles.text}>talkback OK</Text>
        </View>
      </TouchableNativeFeedback>

      {/*disabled, voice:disabled*/}
      <TouchableNativeFeedback disabled={true} onPress={onPress}>
        <View style={styles.touchable}>
          <Text style={styles.text}>
            should be disabled when disabled is true
          </Text>
        </View>
      </TouchableNativeFeedback>

      {/*disabled, voice:disabled*/}
      <TouchableNativeFeedback
        accessibilityState={{disabled: true}}
        onPress={onPress}>
        <View style={styles.touchable}>
          <Text style={styles.text}>
            should be disabled when accessibilityState disabled is true
          </Text>
        </View>
      </TouchableNativeFeedback>

      {/*disabled, voice:disabled*/}
      <TouchableNativeFeedback
        disabled={true}
        accessibilityState={{}}
        onPress={onPress}>
        <View style={styles.touchable}>
          <Text style={styles.text}>
            should be disabled when disabled is true and accessibilityState is
            empty
          </Text>
        </View>
      </TouchableNativeFeedback>

      {/*disabled, voice:disabled*/}
      <TouchableNativeFeedback
        disabled={true}
        accessibilityState={{checked: true}}
        onPress={onPress}>
        <View style={styles.touchable}>
          <Text style={styles.text}>
            should keep accessibilityState when disabled is true
          </Text>
        </View>
      </TouchableNativeFeedback>

      {/*disabled, voice:disabled*/}
      <TouchableNativeFeedback
        disabled={true}
        accessibilityState={{disabled: false}}
        onPress={onPress}>
        <View style={styles.touchable}>
          <Text style={styles.text}>
            should overwrite accessibilityState with value of disabled prop
          </Text>
        </View>
      </TouchableNativeFeedback>

      {/*not disabled, voice:double tap to activate*/}
      <TouchableNativeFeedback
        disabled={false}
        accessibilityState={{disabled: true}}
        onPress={onPress}>
        <View style={styles.touchable}>
          <Text style={styles.text}>
            should overwrite accessibilityState with value of disabled prop
          </Text>
        </View>
      </TouchableNativeFeedback>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 16,
  },
  touchable: {flex: 0.5, borderColor: 'black', borderWidth: 1, marginBottom: 8},
  text: {alignSelf: 'center'},
});

```

Reviewed By: yungsters

Differential Revision: D27479271

Pulled By: kacieb

fbshipit-source-id: 43187839b58dfe8f91afdba91453fb6b98e1a604
2021-04-02 17:12:20 -07:00
Bruno Castro c4e40b81c0 feat: add displayName to touchables (#29531)
Summary:
Since TouchableHighlight and TouchableOpacity are being exported using `forwardRef`, it's messing up jest's snapshots and some matchers.
This commit 4b935ae95f fixed this for components being mocked on [setup.js](https://github.com/facebook/react-native/blob/master/jest/setup.js). However, these Touchables aren't being mocked.

It resolves https://github.com/facebook/react-native/issues/27721

## Changelog

[General] [Added] - Add displayName to TouchableHighlight and TouchableOpacity

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

Test Plan: Check the new snapshots.

Reviewed By: kacieb

Differential Revision: D27485269

Pulled By: yungsters

fbshipit-source-id: ba2082a4ae9f97ebe93ba92971d58c9195bdf26d
2021-03-31 17:36:02 -07:00
Micha Reiser 93377ff508 Remove "use strict" directive from ES Modules
Summary:
ES Modules implicitly enable strict mode. Adding the "use strict" directive is, therefore, not required.

This diff removes all "use strict" directives from ES modules.

Changelog:

[Internal]

Reviewed By: motiz88

Differential Revision: D26172715

fbshipit-source-id: 57957bcbb672c4c3e62b1db633cf425c1c9d6430
2021-02-02 11:12:56 -08:00
simek 2160377574 remove most of tvOS remnants from the code (#29407)
Summary:
Refs: [0.62 release](https://reactnative.dev/blog/#moving-apple-tv-to-react-native-tvos), https://github.com/facebook/react-native/issues/28706, https://github.com/facebook/react-native/issues/28743, https://github.com/facebook/react-native/issues/29018

This PR removes most of the tvOS remnants in the code. Most of the changes are related to the tvOS platform removal from `.podspec` files, tvOS specific conditionals removal (Obj-C + JS) or tvOS CI/testing pipeline related code.

In addition to the changes listed above I have removed the deprecated `Platform.isTVOS` method. I'm not sure how `Platform.isTV` method is correlated with Android TV devices support which is technically not deprecated in the core so I left this method untouched for now.

## Changelog

<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://github.com/facebook/react-native/wiki/Changelog
-->

* **[Internal] [Removed]** - remove most of tvOS remnants from the code:
  * `TVEventHandler`, `TVTouchable`, `RCTTVView`, `RCTTVRemoteHandler` and `RCTTVNavigationEventEmitter`
* **[Internal] [Removed]** - remove `TARGET_TV_OS` flag and all the usages
* **[iOS] [Removed]** - remove deprecated `Platform.isTVOS` method
* **[iOS] [Removed]** - remove deprecated and TV related props from View:
  * `isTVSelectable`, `hasTVPreferredFocus` and `tvParallaxProperties`
* **[iOS] [Removed]** - remove `BackHandler` utility implementation

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

Test Plan: Local tests (and iOS CI run) do not yield any errors, but I'm not sure how the CI pipeline would react to those changes. That is the reason why this PR is being posted as Draft. Some tweaks and code adjustment could be required.

Reviewed By: PeteTheHeat

Differential Revision: D22619441

Pulled By: shergin

fbshipit-source-id: 9aaf3840c5e8bd469c2cfcfa7c5b441ef71b30b6
2020-09-28 21:26:41 -07:00
Chris Dadabo 72285d808d Add accessibilityHint to TouchableNativeFeedback (#29154)
Summary:
The docs suggest that TouchableNativeFeedback [inherits `TouchableWithoutFeedback` props](https://reactnative.dev/docs/touchablewithoutfeedback#props) but `accessibilityHint` was missing.

## Changelog

[Android] [Added] - Add accessibilityHint to TouchableNativeFeedback
Pull Request resolved: https://github.com/facebook/react-native/pull/29154

Test Plan: Not sure how this should be tested, but I'm happy to implement what others may suggest

Reviewed By: kacieb

Differential Revision: D22109459

Pulled By: TheSavior

fbshipit-source-id: 573267a26414a97ba23a1a7995bff1608f9ba34f
2020-06-29 12:57:25 -07:00
Tim Yung 43c161c30a Touchable: Revert minPressDuration on Legacy Components
Summary:
When `minPressDuration` was introduced to `Pressability`, all of the legacy Touchable components inherited the new default.

This restore the former behavior for these legacy components so that only `Pressable` gets the new `minPressDuration` default value.

Changelog:
[General][Fixed] - Revert `minPressDuration` effect on legacy Touchable components

Reviewed By: fkgozali

Differential Revision: D21682764

fbshipit-source-id: b71a61843fae7f0f726155876a064fabd3ba1c64
2020-05-21 14:06:11 -07:00
Michael Bolin 0b9ea60b4f Back out "Upgrade Prettier from 1.17 to 2.0.2."
Differential Revision: D20639755

fbshipit-source-id: 5028563f9cf0527a30b4259daac50cdc03934bfd
2020-03-24 21:47:35 -07:00
Michael Bolin cf44650b3f Upgrade Prettier from 1.17 to 2.0.2.
Summary:
This gets us on the latest Prettier 2.x:
https://prettier.io/blog/2020/03/21/2.0.0.html

Notably, this adds support for TypeScript 3.8,
which introduces new syntax, such as `import type`.

Reviewed By: zertosh

Differential Revision: D20636268

fbshipit-source-id: fca5833d003804333a05ba16325bbbe0e06d6c8a
2020-03-24 20:24:47 -07:00
Nick Gerleman 161b910494 Do not explicitly include ".js" in Library imports (#28311)
Summary:
A few recent imports have explicitly added ".js" to the end of their path. This prevents Metro from resolving platform-specific JS files, e.g. "Foo.android.js" or "Foo.windows.js" instead of "Foo.js".

React Native Windows provides its own implementation of files in a few cases where stock React Native will share them between Android and iOS. We hope to reduce/eliminate these long term, but requiring explicit ".js" files currently breaks us in a couple of places where we have custom implementations.

This change is a quick regex replace of ES6 and CommonJS imports in 'Libraries/" to eliminate ".js".

## Changelog

[General] [Fixed] - Do not explicitly include ".js" in Library imports
Pull Request resolved: https://github.com/facebook/react-native/pull/28311

Test Plan: I haven't done any manual validation of this, but `flow-check` should catch any issues with this during CI.

Reviewed By: cpojer

Differential Revision: D20486466

Pulled By: TheSavior

fbshipit-source-id: 31e1ccc307967417d7d09c34c859f0b2b69eac84
2020-03-17 02:11:53 -07:00
Vojtech Novak 7f2a79f40b allow custom ripple radius on TouchableNativeFeedback (#28009)
Summary:
motivation: there are cases where one'd like to control the radius of the ripple effect that's present on TouchableNativeFeedback  - in my case, I want to make sure that both icons and text have the same ripple appearance, but that's currently not possible as far as I can tell.

Currently (afaik) the only way to set  (upper) ripple limits is by specifying width, height and border radius ( + `overflow: hidden`), and this works well for icons which can usually be bounded by a square, but not for text which can have rectangular shape.

This PR adds `rippleRadius` parameter to `SelectableBackground()`, `SelectableBackgroundBorderless()` and `Ripple()` static functions present on `TouchableNativeFeedback`. It can make the ripple smaller but also larger. The result looks like this:

added to RNTester:

![SVID_20200219_182027_1](https://user-images.githubusercontent.com/1566403/74858131-147ff380-5345-11ea-8a9e-2730b79eec38.gif)

difference from the other ripples:

![SVID_20200209_110918_1](https://user-images.githubusercontent.com/1566403/74109152-4513a080-4b81-11ea-8ec3-bb5862c57244.gif)

I'm ofc open to changing the api if needed, but I'm not sure there's much space for manoeuvring. While I was at it, I did a slight refactor of the class into several smaller, more focused methods.

It's possible that in some cases, this might help to work around this issue https://github.com/facebook/react-native/issues/6480.

## Changelog

[Android] [Added] - allow setting custom ripple radius on TouchableNativeFeedback
Pull Request resolved: https://github.com/facebook/react-native/pull/28009

Test Plan: I tested this locally using RNTester

Reviewed By: TheSavior

Differential Revision: D20004509

Pulled By: mdvacca

fbshipit-source-id: 10de1754d54c17878f36a3859705c1188f15c2a2
2020-02-20 15:29:07 -08:00
Tom Underhill dbe0d7d4b5 Add NativeColorType opaque type to normalizeColor() ahead of PlatformColor PR. (#28040)
Summary:
The [PlatformColor PR](https://github.com/facebook/react-native/pull/27908) is currently open to implement the [PlatformColor proposal](react-native-community/discussions-and-proposals#126).   When that PR was imported into Facebooks internal builds it was found that the change to the `processColor()` function to return an opaque type or `number` instead of just `number` breaks internal components.

This PR is a simplification of the PlatformColor PR only changing the return type of `processColor()` from `?number` to `?number | NativeColorType` where `NativeColorType` is just an empty but opaque type.   This will allow changes to be made to these internal components but with less risk than the larger PR.

## Changelog

[General] [Changed] - Add NativeColorType opaque type to normalizeColor() ahead of PlatformColor PR
Pull Request resolved: https://github.com/facebook/react-native/pull/28040

Test Plan: Flow checks, Jest test, iOS unit tests, iOS integration tests, and manual testing performed on RNTester for iOS and Android.

Differential Revision: D19860205

Pulled By: TheSavior

fbshipit-source-id: 799662c6621d3974158b375ccccfa136982c43b4
2020-02-19 19:33:27 -08:00
Tim Yung 9b81232ed2 Pressability: Explicitly Commit Configurations
Summary:
Refactors `Pressability` so that updates to the configuration are now explicitly committed using `configure()`.

Previously, the configuration was updated implicitly because `Pressability` accepted a series of functions whose closures capture values (e.g. `this.props`). Although these changes typically happen when component instances are "atomically" updated by React, it is not a guarantee. For example, arbitrary instance variables could be used to configure `Pressability`, and they could be muted at any time.

This change makes updates to the configuration of `Pressability` more predictable.

Changelog:
[Internal]

Reviewed By: TheSavior

Differential Revision: D18742620

fbshipit-source-id: d2e96dd1e3643289daab2177199a29f80d17b0bc
2019-12-15 22:07:47 -08:00
Eli White c24c8a039c Core files should depend on internals directly
Summary:
By depending on react-native, these files can't be flow strict until index.js is flow strict. By depending on the internals directly they can be flow strict as soon as their dependents are flow strict.

Changelog:
[Internal] Refactoring some core file imports to depend on internals directly

Reviewed By: zackargyle

Differential Revision: D18828324

fbshipit-source-id: 2a347c4e234a64edbb3e6f0ef6387ef1ce78badc
2019-12-05 13:33:58 -08:00
Tim Yung 7bcae81299 RN: Stop Exporting TouchableWithoutFeedback Props
Summary:
Changes `TouchableWithoutFeedback` so that `Props` is no longer exported as a Flow type.

Instead, other modules should use `React.ElementConfig<typeof TouchableWithoutFeedback>`.

Changelog:
[General] [Removed] - TouchableWithoutFeedback no longer exports Props. Use React.ElementConfig, instead.

Reviewed By: zackargyle, TheSavior

Differential Revision: D18718131

fbshipit-source-id: 0bd63123c49564fdab160d5fc8e7f1bf86da1fbe
2019-11-27 07:48:40 -08:00
Tim Yung 2185dd298a RN: New TouchableNativeFeedback
Summary:
Launches a new implementation of `TouchableNativeFeedback`.

It is implemented using `Pressability` and extends `React.Component`. Notably, `propTypes` no longer exist.

Furthermore, `TouchableNativeFeedback` now behaves similar to `TouchableWithoutFeedback` on iOS (instead of rendering an error message).

Changelog:
[General] [Changed] - TouchableNativeFeedback overhauled as a class without propTypes. Also, replaced iOS error renderer.

Reviewed By: TheSavior

Differential Revision: D18715857

fbshipit-source-id: aa42c7547ac94340fde0ef30641cab7eb48ea81b
2019-11-27 07:48:39 -08:00