Commit Graph

14 Commits

Author SHA1 Message Date
Vojtech Novak bd3868643d add ripple config object to Pressable (#28156)
Summary:
Motivation is to support ripple radius just like in TouchableNativeFeedback, plus borderless attribute. See https://github.com/facebook/react-native/pull/28009#issuecomment-589489520

In the current form this means user needs to pass an `android_ripple` prop which is an object of this shape:
```
export type RippleConfig = {|
  color?: ?ColorValue,
  borderless?: ?boolean,
  radius?: ?number,
|};
```
Do we want to add methods that would create such config objects - https://facebook.github.io/react-native/docs/touchablenativefeedback#methods ?

## Changelog

[Android] [Added] - support borderless and custom ripple radius on Pressable
Pull Request resolved: https://github.com/facebook/react-native/pull/28156

Test Plan:
Tested locally in RNTester. I noticed that when some content is rendered after the touchables, the ripple effect is "cut off" by the boundaries of the next view. This is not specific to Pressable, it happens to TouchableNativeFeedback too but I just didn't notice it before in https://github.com/facebook/react-native/pull/28009. As it is an issue of its own, I didn't investigate that.

![pressable](https://user-images.githubusercontent.com/1566403/75098762-785f2200-55ba-11ea-8842-e648317610e3.gif)

I changed the Touchable example slightly too (I just moved the "custom ripple radius" up to show the "cutting off" issue), so just for completeness:

![touchable](https://user-images.githubusercontent.com/1566403/75098763-81e88a00-55ba-11ea-9528-e0343d1e054b.gif)

Reviewed By: yungsters

Differential Revision: D20071021

Pulled By: TheSavior

fbshipit-source-id: cb553030934205a52dd50a2a8c8a20da6100e23f
2020-04-03 18:37:10 -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
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
Chad Smith 14fcda880c use fb images in RNTester app
Summary:
This test has been failing internally because it attempts to access external images during CI execution, which it is blocked from doing. Because Detox synchronizes with the app to make sure network requests and animations are complete before continuing, the test waits indefinitely for these images to be fetched.

This diff makes the following changes
* External images are replaced with fb-hosted images
* Timeout threshold is reduced
* Detox initialization is broken out into two steps to help debug any future instances of this occurring
* If Detox is blocked for over 20 seconds, diagnostic messages will be printed indicating why it's being blocked

Changelog: [Internal]

Reviewed By: TheSavior

Differential Revision: D19671592

fbshipit-source-id: 368c683101ed7fc68578fc7758061b31c96c241d
2020-02-03 21:18:46 -08:00
Rick Hanlon 5cd0c8a4d2 Bump detox simulator version to work with latest xcode (#27733)
Summary:
The latest xcode version removed iPhone 6s, so we need to bump to the latest simulator listed that has 3d touch.

## Changelog

[General] [Fix] - Bump e2e simulator version
Pull Request resolved: https://github.com/facebook/react-native/pull/27733

Test Plan: - `yarn build-ios-e2e && yarn test-ios-e2e `

Reviewed By: hramos, sammy-SC

Differential Revision: D19345576

Pulled By: rickhanlonii

fbshipit-source-id: 428cb83ccb899409e972551f18df580174adee91
2020-01-13 11:15:55 -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
George Zahariev 8553e1acc4 Exact-by-default codemod for react-native-github
Summary:
We are rolling out exact-by-default syntax to xplat/js.

I had to manually move around some comments to preserve proper placement.

Changelog: [Internal]

Reviewed By: jbrown215

Differential Revision: D18633611

fbshipit-source-id: 48f7468dcc55b1d00985419d035a61c6820b3abe
2019-11-21 09:42:57 -08:00
Tim Yung 66e72bb4e0 Animated: Forward Ref to Component
Summary:
Changes `createAnimatedComponent` so that a `ref` assigned to an Animated component will now be forwarded to the internal component. Previously, a ref to the internal component was accessed using the `getNode` method. The `getNode` method is now deprecated and will return the same `ref` but show a deprecation error.

Changelog:
[General] [Changed] - Refs on an Animated component are now the internal component. The `getNode` call has been deprecated.

Reviewed By: TheSavior

Differential Revision: D18290474

fbshipit-source-id: 5849809583a17624a89071db8be1282a12caedf3
2019-11-03 18:02:00 -08:00
Tim Yung 548aad4ff1 RN: Delete Apple TV Props
Summary:
With tvOS (Apple TV) now residing in a separately maintained fork, this removes the residual props from React Native. This only includes the JavaScript changes. The Objective-C changes will come later.

Specifically, the following props have been removed:

- `isTVSelectable`
- `tvParallaxProperties`
- `tvParallaxShiftDistanceX`
- `tvParallaxShiftDistanceY`
- `tvParallaxTiltAngle`
- `tvParallaxMagnification`

Note that `hasTVPreferredFocus` is still being used by Android TV, so it remains.

Changelog:
[Removed] Apple TV View Props

Reviewed By: TheSavior

Differential Revision: D18266278

fbshipit-source-id: 9d1448bf2f434a74e6eb23c70d3a37971e406768
2019-11-01 08:49:26 -07:00
Logan Daniels 91f139b941 xplat/js/react-native-github
Reviewed By: panagosg7

Differential Revision: D16657770

fbshipit-source-id: 4e260842c838a35317515044c54ccf55a083da33
2019-08-09 10:11:15 -07:00
Eli White 0a68763743 Add explicit useNativeDriver: false to callsites
Summary:
In order to cleanup the callsites that are not using Animated's native driver, we are going to make useNativeDriver a required option so people have to think about whether they want the native driver or not.

I made this change by changing [Animated.js](https://fburl.com/ritcebri) to have this animation config type:

```
export type AnimationConfig = {
  isInteraction?: boolean,
  useNativeDriver: true,
  onComplete?: ?EndCallback,
  iterations?: number,
};
```

This causes Flow to error anywhere where useNativeDriver isn't set or where it is set to false.

I then used these Flow errors to codemod the callsites.

I got the location of the Flow errors by running:
```
flow status --strip-root --json --message-width=0 | jq '.errors | [.[].extra | .[].message | .[].loc | objects | {source: .source, start: .start, end: .end}]'
```

And then ran this codemod:
```
const json = JSON.parse('JSON RESULT FROM FLOW');

const fileLookup = new Map();

json.forEach(item => {
  if (!fileLookup.has(item.source)) {
    fileLookup.set(item.source, []);
  }

  fileLookup.get(item.source).push(item);
});

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

  const filePath = file.path;
  if (!fileLookup.has(filePath)) {
    return;
  }

  const locationInfo = fileLookup.get(filePath);

  return j(file.source)
    .find(j.ObjectExpression)
    .forEach(path => {
      if (
        path.node.properties.some(
          property =>
            property != null &&
            property.key != null &&
            property.key.name === 'useNativeDriver',
        )
      ) {
        return;
      }

      const hasErrorOnLine = locationInfo.some(
        singleLocationInfo =>
          singleLocationInfo.start.line === path.node.loc.start.line &&
          Math.abs(
            singleLocationInfo.start.column - path.node.loc.start.column,
          ) <= 2,
      );
      if (!hasErrorOnLine) {
        return;
      }

      path.node.properties.push(
        j.property(
          'init',
          j.identifier('useNativeDriver'),
          j.booleanLiteral(false),
        ),
      );
    })
    .toSource();
}

export const parser = 'flow';
```

```
yarn jscodeshift --parser=flow --transform addUseNativeDriver.js RKJSModules react-native-github
```

Followed up with

```
hg status -n --change . | xargs js1 prettier
```

Reviewed By: mdvacca

Differential Revision: D16611291

fbshipit-source-id: 1157587416ec7603d1a59e1fad6a821f1f57b952
2019-08-01 16:46:30 -07:00
Tom Sanderson 7fd08e1461 add spec for PlatformConstants (#24928)
Summary:
part of #24875.

## Changelog

[General] [Added] - add TM spec for PlatformConstants
Pull Request resolved: https://github.com/facebook/react-native/pull/24928

Reviewed By: RSNara

Differential Revision: D15551340

Pulled By: fkgozali

fbshipit-source-id: 9de15ff4cfe717f963332868bd873d5147a37506
2019-05-30 14:29:42 -07:00
AndreiCalazans 3945f10561 - Update folder structure of RNTester's JS directory. (#25013)
Summary:
Changes RNTester, first attempt in the direction of improving the RNTester overall. Related ticket: #24647

Changed the `js` directory of the RNTester to have the following structure:
```
- js
    - assets
    - components
    - examples
    - types
    - utils
```
* **assets**
_Any images, gifs, and media content_

* **components**
_All shared components_

* **examples**
_Example View/Components to be rendered by the App_

 * **types**
_Shared flow types_

 * **utils**
_Shared utilities_

## Changelog

[General] [Changed] - Update folder structure of RNTester's JS directory.
Pull Request resolved: https://github.com/facebook/react-native/pull/25013

Differential Revision: D15515773

Pulled By: cpojer

fbshipit-source-id: 0e4b6386127f338dca0ffe8c237073be53a9e221
2019-05-28 08:39:18 -07:00