Граф коммитов

1640 Коммитов

Автор SHA1 Сообщение Дата
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
Tim Yung 8ac467c51b Pressable: Add Support for Inspector Overlay
Summary:
Adds support for the debug overlay (enabled via the Inspector) that the legacy touchable components supported.

Changelog:
[General][Added] - Added Inspector overlay support for Pressable

Reviewed By: TheSavior

Differential Revision: D21614412

fbshipit-source-id: b884e04f8dba1bfd35e61de25d33d6d47bc34b03
2020-05-18 10:24:17 -07:00
Eli White 66103277d2 Pressable: Rename pressRectOffset to pressRetentionOffset to be consistent with other touchables
Summary:
Text and the other Touchables have this prop called pressRetentionOffset. Pressable should be consistent with that.

Changelog:
[Breaking][General]: Pressable: Rename pressRectOffset to pressRetentionOffset to be consistent with other touchables

Reviewed By: yungsters

Differential Revision: D21552255

fbshipit-source-id: 31e64bad9e48ac98e4934dd2f4c0a7f526de5cb6
2020-05-13 12:59:48 -07:00
Manvir Singh d54113d8c4 implemented showSoftInputOnFocus for iOS (#28834)
Summary:
`showSoftInputOnFocus` was added in https://github.com/facebook/react-native/issues/25028, but it was only added for Android. There was a lot of discussion on the original issue being addressed (https://github.com/facebook/react-native/issues/14045), that there is a need for this on iOS as well. The issue with iOS was brought up again on https://github.com/facebook/react-native/issues/27243.

On a related note, when searching this repo's issues for `showSoftInputOnFocus`, it appears that there are several closed issues that claim that the Android implementation doesn't work (https://github.com/facebook/react-native/issues/25685, https://github.com/facebook/react-native/issues/25687, https://github.com/facebook/react-native/issues/26643). So perhaps the Android implementation needs to be looked at as well (I myself have not gotten around to confirming whether it works or not)

## Changelog

[iOS] [Added] - Add showSoftInputOnFocus to TextInput
Pull Request resolved: https://github.com/facebook/react-native/pull/28834

Test Plan:
You'd use this just like you would in the Android implementation:
```jsx
<TextInput showSoftInputOnFocus={false} />
```

## GIFs
### Before change
![May-04-2020 20-52-49](https://user-images.githubusercontent.com/4932784/81034028-9d89cf80-8e4a-11ea-906c-64f62504f80c.gif)

### After change
![May-04-2020 20-54-27](https://user-images.githubusercontent.com/4932784/81034035-a11d5680-8e4a-11ea-918e-119a1c9e2a19.gif)

Differential Revision: D21418763

Pulled By: shergin

fbshipit-source-id: 561e72fc2cf16b30446132f6b96b8aa2b4a92daf
2020-05-11 09:01:33 -07:00
Tim Yung a1ac2518a3 TextInput: Default `blurOnSubmit` in JS
Summary:
Consolidates the logic for the default value of `blurOnSubmit` on `TextInput` in the JavaScript component.

This only materially impacts Fabric.

Changelog:
[Internal]

Reviewed By: mdvacca

Differential Revision: D21491482

fbshipit-source-id: 16d8aba32e7d0321a4583e87e03405ea587e35d4
2020-05-09 17:24:19 -07:00
João Vieira 16ea9ba813 Support excluding multiple platforms.
Summary:
Currently the schema only allows to exclude a single platform (iOS OR Android). There are cases where we need to exclude multiple. This change converts the previous `excludePlatform` string property into an `excludePlatforms` array.

Changelog:
[Internal][Changed] - Added support to exclude multiple platforms in Codegen.

Reviewed By: sammy-SC

Differential Revision: D21426950

fbshipit-source-id: eff36ffa207109274794b4b300bf6313f8286161
2020-05-07 09:43:52 -07:00
Tim Yung d14b89bd8a RN: Workaround Fabric + Virtual Text Press Bug
Summary:
Workaround for a bug with Fabric when pressing on virtual text.

Changelog:
[Internal]

(Note: this ignores all push blocking failures!)

Reviewed By: JoshuaGross

Differential Revision: D21432793

fbshipit-source-id: fe20eeadd5365707fb71edae7a76d374e26b4c86
2020-05-06 14:23:05 -07:00
Mats Byrkjeland de7f69a58e Fix type of exported Touchables: ComponentType -> AbstractComponent (#28737)
Summary:
Fixes https://github.com/facebook/react-native/issues/28726

When importing TouchableOpacity, it is treated as any by Flow. Replacing ComponentType with AbstractComponent works.

The [Flow documentation](https://flow.org/en/docs/react/types/#toc-react-componenttype) says the following about ComponentType:
> Note: In 0.89.0+, React.ComponentType is an alias for React.AbstractComponent<Config, any>, which represents a component with config type Config and any instance type.

So I'm thinking that since the instance type is treated as any with ComponentType, Flow treats TouchableOpacity as any as well.

## 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
-->

[General] [Fixed] - Fix Touchable{Opacity,Bounce,Highlight} being exported as `any` (Flow)
Pull Request resolved: https://github.com/facebook/react-native/pull/28737

Test Plan: I have done the same changes to react-native in my project's node_modules and seen that the components TouchableOpacity went from any to AbstractComponent with some props. Now I have a bunch of errors because I'm sending in wrong props to some touchables, which is good!

Reviewed By: cpojer

Differential Revision: D21362601

Pulled By: TheSavior

fbshipit-source-id: 5b98cc79eaef034eccdb7f47242f9f44be2ef2b8
2020-05-05 12:44:50 -07:00
Joshua Gross ed29ba13f9 Support `contentOffset` property in Android's ScrollView and HorizontalScrollView
Summary:
For a very long time, iOS has supported the `contentOffset` property but Android has not:

https://github.com/facebook/react-native/issues/6849

This property can be used, primarily, to autoscroll the ScrollView to a starting position when it is first rendered, to avoid "jumps" that occur by asynchronously scrolling to a start position.

Changelog: [Android][Changed] ScrollView now supports `contentOffset`

Reviewed By: mdvacca

Differential Revision: D21198236

fbshipit-source-id: 2b0773569ba42120cb1fcf0f3847ca98af2285e7
2020-04-23 15:39:45 -07:00
Christoph Nakazawa f248ba1c8b Upgrade to Jest 25
Summary:
This diff upgrades Jest to the latest version which fixes a bunch of issues with snapshots (therefore allowing me to enable the Pressable-test again). Note that this also affects Metro and various other tooling as they all depend on packages like `jest-worker`, `jest-haste-map` etc.

Breaking changes: https://github.com/facebook/jest/blob/master/CHANGELOG.md

This diff increases node_modules by 3 MiB, primarily because it causes more duplicates of `source-map` (0.8 MiB for each copy) and packages like `chalk` 3.x (vs 2.x). The base install was 15 MiB bigger and I reduced it to this size by playing around with various manual yarn.lock optimizations. However, D21085929 reduces node_modules by 11 MiB and the Babel upgrade reduced node_modules by 13 MiB. I will subsequently work on reducing the size through other packages as well and I'm working with the Jest folks to get rid of superfluous TypeScript stuff for Jest 26.

Other changes in this diff:
* Fixed Pressable-test
* Blackhole node-notifier: It's large and we don't need it, and also the license may be problematic, see: https://github.com/facebook/jest/pull/8918
* Updated jest-junit (not a Jest package) but blackholed it internally because it is only used for open source CI.
* Updated some API calls we use from Jest to account for breaking changes
* Made two absolutely egrigious changes to existing product code tests to make them still pass as our match of async/await, fake timers and then/promise using `setImmediate` is tripping up `regenerator` with `Generator is already run` errors in Jest 25. These tests should probably be rewritten.
* Locked everything to the same `resolve` version that we were already using, otherwise it was somehow pulling in 1.16 even though nothing internally uses it.

Changelog: [General] Update Jest

Reviewed By: rickhanlonii

Differential Revision: D21064825

fbshipit-source-id: d0011a51355089456718edd84ea0af21fd923a58
2020-04-20 01:27:35 -07:00
Zack Argyle 0a67133124 Make ColorValue public in StyleSheet.js
Summary:
This diff makes the ColorValue export "official" by exporting it from StyleSheet in order to encourage its use in product code.

Changelog: Moved ColorValue export from StyleSheetTypes to StyleSheet

Reviewed By: TheSavior

Differential Revision: D21076969

fbshipit-source-id: 972ef5a1b13bd9f6b7691a279a73168e7ce9d9ab
2020-04-17 13:03:47 -07:00
Christoph Nakazawa 75a6178279 Update Babel to 7.8.x/7.9.x
Reviewed By: motiz88

Differential Revision: D20697095

fbshipit-source-id: ef35d02da0916109ce528d3026f7ca0956911dda
2020-04-15 01:30:45 -07:00
Samuel Susla b861782562 Remove setMostRecentEventCount from TextInput view commands
Summary:
Changelog: [Internal]

We don't use view command `setMostRecentEventCount`, let's get rid of it.

Reviewed By: JoshuaGross

Differential Revision: D21016600

fbshipit-source-id: 6491c063e9d6a89252300cb47c010b248e473f4b
2020-04-14 15:27:59 -07:00
Samuel Susla 9c54bf4199 Remove redundant input from TextInput
Summary:
`const ReactNative` is assigned to but never used. Let's get rid of it.

Changelog: [Internal]

Reviewed By: JoshuaGross

Differential Revision: D21016502

fbshipit-source-id: afcb0cfc501adf07e0c4d4452a831160e1cda088
2020-04-14 10:59:43 -07:00
Vojtech Novak 44ec762e41 fix: ripple should be applied even when borderless == false (#28526)
Summary:
With current master, when you render `<Pressable android_ripple={{borderless: false}}>`, there is no ripple effect at all.

I think the expected behavior is to have ripple with default color and radius, just not borderless.

This was how it was done (by me) in https://github.com/facebook/react-native/pull/28156/files but in the import process, the implementation was changed: bd3868643d so either this PR is a fix or you can just close it (but I'd be curious why).

## 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] - ripple should be applied even when borderless == false
Pull Request resolved: https://github.com/facebook/react-native/pull/28526

Test Plan:
`<Pressable android_ripple={{borderless: false}}>` on master

![SVID_20200404_123614_1](https://user-images.githubusercontent.com/1566403/78424971-6b315a80-7671-11ea-8be4-5fea428bc556.gif)

`<Pressable android_ripple={{borderless: false}}>` in this PR

![SVID_20200404_122754_1](https://user-images.githubusercontent.com/1566403/78424986-8bf9b000-7671-11ea-9804-37cd58dbb61e.gif)

Differential Revision: D20952026

Pulled By: TheSavior

fbshipit-source-id: df2b95fc6f20d7e958e91805b1a928c4f85904f1
2020-04-09 15:40:47 -07:00
Lauren Tan dff17effe5 Move CheckBox JS files to FB Internal
Summary:
Move CheckBox JS files to FB internal

## Changelog:
[General] [Removed] This diff removes the CheckBox export from React Native. Internally, we are requiring CheckBox directly now and externally people will have to use the community maintained module.

Reviewed By: cpojer

Differential Revision: D20910775

fbshipit-source-id: 809e135dc3f68911ac0a004e6eafa8488f0d5327
2020-04-09 15:35:02 -07:00
George Zahariev cd347a7e0e Upgrade Prettier in Xplat to version 1.19.1
Summary:
Upgrades Prettier in Xplat to 1.19.1
Ignores upgrading packages on already on versions greater than 1.19.1

Changelog: [Internal]

allow-large-files
bypass-lint

(Note: this ignores all push blocking failures!)

Reviewed By: gkz, cpojer

Differential Revision: D20879147

fbshipit-source-id: 0deee7ac941e91e1c3c3a1e7d3d3ed20de1d657d
2020-04-09 11:01:58 -07:00
Samuel Susla c7f259526b Migrate setNativeProps to commands in iOS text input
Summary: Changelog: Move from setNativeProps to ViewCommands.

Reviewed By: JoshuaGross

Differential Revision: D20843018

fbshipit-source-id: 9be9d2bbee01f2e15279e3c3ae785c1a5b163765
2020-04-09 03:44:56 -07:00
Samuel Susla 00c4d950cf Implement event count for TextInput
Summary:
Changelog: [Internal]

Implementation of event count for Fabric's Text input.

Reviewed By: JoshuaGross

Differential Revision: D20800185

fbshipit-source-id: 988692cb2fc786649821cccb06e629b40b9b0479
2020-04-09 03:44:55 -07:00
Xiaoyu Yin a37e45a57e Back out "Fixed scrollview inset when RN view is embedded in another view"
Summary:
Original commit changeset: fbd72739fb71

Changelog: Back out "[react-native][PR] Fixed scrollview inset when RN view is embedded in another view"

Reviewed By: TheSavior

Differential Revision: D20878607

fbshipit-source-id: 0d77b9fb08c637f7894c399a219a242e472b0700
2020-04-06 15:54:10 -07:00
jiggag caa7829aac Modify warning message (#28514)
Summary:
Modify deprecation warning message for `AccessibilityInfo.fetch`

- https://reactnative.dev/docs/accessibilityinfo#isscreenreaderenabled
- 523ab83338

## Changelog

[Internal] [Changed] - Modify deprecation warning message for `AccessibilityInfo.fetch`
Pull Request resolved: https://github.com/facebook/react-native/pull/28514

Test Plan: Try using `AccessibilityInfo.fetch` and check log

Reviewed By: cpojer

Differential Revision: D20850223

Pulled By: TheSavior

fbshipit-source-id: e21bb20b7a02d9f2ed6e27e2bfecbac0aebf9e09
2020-04-04 01:09:55 -07:00
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
Kacie Bawiec 3246f68952 Remove console warnings for innerViewNode/Ref
Summary:
Remove these warnings until the methods in ScrollResponder have been moved into ScrollView, so that unactionable warnings aren't firing.

Changelog:
[General][Removed] Remove console warnings for innerViewNode/Ref in ScrollView

Reviewed By: TheSavior

Differential Revision: D20850624

fbshipit-source-id: ce90988e204c3cc3b93536842ec3caa12cf6994e
2020-04-03 17:52:08 -07:00
Daniel Cohen Gindi fb2900e185 Fixed scrollview inset when RN view is embedded in another view (#27607)
Summary:
I'm using RNN, which embeds RN view inside native view controllers.

On iOS 13, a modal view controller is "floating" and is offset from the top of the screen.

This causes the calculation of inset in `KeyboardAvoidingView` incorrect as it mixes local view controller coordinate space, with keyboard's screen coordinate space.

## Changelog

[iOS] [Fixed] - Fixed `KeyboardAvoidingView` inset in embedded views (i.e modal view controllers on iOS 13)
Pull Request resolved: https://github.com/facebook/react-native/pull/27607

Test Plan:
1. Tested before and after in a simple view controller (should stay the same)
2. Tested before and after in a modal view controller (should be offset before, and fixed after)
3. Repeated no. 2 with each device rotation (upsideDown, landscapeLeft, landscapeRight)

Reviewed By: cpojer

Differential Revision: D20812231

Pulled By: TheSavior

fbshipit-source-id: fbd72739fb7152655028730e284ad26ff4a5da73
2020-04-03 16:09:37 -07:00
Kacie Bawiec b119a00c45 Remove console warnings from ScrollView methods
Summary:
The newly added console warnings in D19304480 are adding a lot of warning noise due to missed infra callsites. Those callsites need to be updated before these warnings can be added.

Changelog:
[Removed] Remove console warnings from ScrollView methods

Reviewed By: rickhanlonii

Differential Revision: D20700917

fbshipit-source-id: cb618ee3a291d26e1942e4f91bbc02dee41fb78b
2020-03-27 15:28:48 -07:00
Kacie Bawiec d2f314af75 Make ScrollView use ForwardRef
Summary:
Have ScrollView use forwardRef so that the host component methods like `measure` and `measureLayout` are available without having to call `getNativeScrollRef`. Instead, you can use `<ScrollView ref={myRef} />` and directly call all methods of ScrollView and host components on `myRef`.

Previous usage:
```
const myRef = React.createRef<React.ElementRef<typeof ScrollView>>();
<ScrollView ref={myRef} />

const innerViewRef = myRef.current.getNativeScrollRef();

innerViewRef.measure();
```
New usage:
```
const myRef = React.createRef<React.ElementRef<typeof View>>();
<ScrollView ref={myRef} />

// now, myRef.current can be used directly as the ref
myRef.current.measure();
myRef.current.measureLayout();

// Additionally, myRef still has access to ScrollView methods
myRef.current.scrollTo(...);
```

Changes:

* Added deprecation warnings to ScrollView methods `getNativeScrollRef`, `getScrollableNode`, and `getScrollResponder`
* Added the forwardRef call to create `ForwardedScrollView` - this takes in `ref` and passes it into the class ScrollView as `scrollViewRef`.
* Forwarded the ref to the native scroll view using `setAndForwardRef`.
* Added statics onto `ForwardedScrollView` so that `ScrollView.Context` can still be accessed.
* Added type `ScrollViewImperativeMethods`, which lists the public methods of ScrollView.
* Converted all public methods of ScrollView to arrow functions. This is because they need to be bound to the forwarded ref.
* Bound all public methods of ScrollView to the forwarded ref in the `setAndForwardRef` call.
* Flow typed the final output (ForwardedScrollView) as an abstract component that takes in the props of the `ScrollView` class, and has all methods of both the inner host component (`measure`, `measureLayout`, etc) and the public methods (`scrollTo`, etc).

Changes to mockScrollView:
* Changed mockScrollView to be able to mock the function component instead of a class component
* Updated necessary tests

Changelog:
[General] [Changed] - Make ScrollView use forwardRef

Reviewed By: TheSavior

Differential Revision: D19304480

fbshipit-source-id: 6c359897526d9d5ac6bc6ab6d5f9d82bfc0d8af4
2020-03-26 16:53:46 -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
Janic Duplessis cf02bd9b76 Fix Animated Value initialized with undefined in ScrollView (#28349)
Summary:
When passing an object to contentOffset that doesn't have `y` prop set it causes the following error:

```
 Error: AnimatedValue: Attempting to set value to undefined

This error is located at:
    in ScrollView (at src/index.js:638)
...
```

This happens since a runtime check was added to the `AnimatedValue` constructor. (a3aaa471ec)

According to flow types the object passed to contentOffset should always contain both x and y props but since it worked before when y is undefined I think its fine to patch the runtime behaviour defensively, especially since the code change is simple.

## Changelog

[General] [Fixed] - Fix Animated Value initialized with undefined in ScrollView
Pull Request resolved: https://github.com/facebook/react-native/pull/28349

Test Plan: Tested that the crash no longer reproduces when passing an empty object to contentOffset.

Reviewed By: cpojer

Differential Revision: D20601664

Pulled By: hramos

fbshipit-source-id: b098a2dd1e702f995a9a92fa6e4e9a204187dac4
2020-03-24 04:07:40 -07:00
Eddie Dugan 22eb711c84 RN picker - implement background color
Summary:
add support to the android implementation of the Picker component for setting the background color.

Changelog: [Android] [Added] - Support item background color in Dialog Picker

Differential Revision: D20566131

fbshipit-source-id: d693b40803fa1051ec955c5728994c820fecd9e9
2020-03-23 08:37:16 -07:00
Jesse Katsumata 5e472b314b chore(switch): migrate to es6 import/export (#28333)
Summary:
Migrate Switch component to use ES6 import/exports

motivation: trying to slowly migrate each files to use es6 import/exports to make this discussion happen
https://github.com/react-native-community/discussions-and-proposals/issues/201#issuecomment-588454552

## Changelog

[General] [Changed] - Use es6 import/export syntax for Switch component
Pull Request resolved: https://github.com/facebook/react-native/pull/28333

Test Plan: Test on RNTester

Reviewed By: TheSavior

Differential Revision: D20493110

Pulled By: hramos

fbshipit-source-id: 25279ec41955b0dbda1abab6e45b93ca1c28fa32
2020-03-17 18:35:22 -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
Joshua Gross f3a53fd338 TextInput: keep less stateful data on the View
Summary:
Allow JS to keep track of mostRecentEventCount and pass it into each event or prop update. We really don't want to separately keep track of that data.

In non-Fabric, the ShadowNode will keep track of the mostRecentEventCount associated to prop updates. In Fabric, that happens on the C++ ShadowNode.

Changelog: [Internal] Simplification to TextInput native state

Reviewed By: mdvacca

Differential Revision: D20374573

fbshipit-source-id: 385fba6ec69a071c78832a686b397699a6c55d67
2020-03-11 12:32:40 -07:00
Logan Daniels b85cb0cf7a Back out "Moving towards UIWindowScene support"
Summary:
Original commit changeset: ae2a4478e2e7

Changelog: [Internal]

Reviewed By: hramos

Differential Revision: D20289851

fbshipit-source-id: 1167ce8f5135411b80630b523c91c10e2b7eece1
2020-03-05 15:58:44 -08:00
radex b58e176af0 Moving towards UIWindowScene support (#28058)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/28058

I'm taking the first step towards supporting iOS 13 UIScene APIs and modernizing React Native not to assume an app only has a single window. See discussion here: https://github.com/facebook/react-native/issues/25181#issuecomment-505612941

The approach I'm taking is to take advantage of `RootTagContext` and passing it to NativeModules so that they can identify correctly which window they refer to. Here I'm just laying groundwork.

- [x] `Alert` and `ActionSheetIOS` take an optional `rootTag` argument that will cause them to appear on the correct window
- [x] `StatusBar` methods also have `rootTag` argument added, but it's not fully hooked up on the native side — this turns out to require some more work, see: https://github.com/facebook/react-native/issues/25181#issuecomment-506690818
- [x] `setNetworkActivityIndicatorVisible` is deprecated in iOS 13
- [x] `RCTPerfMonitor`, `RCTProfile` no longer assume `UIApplicationDelegate` has a `window` property (no longer the best practice) — they now just render on the key window

Next steps: Add VC-based status bar management (if I get the OK on https://github.com/facebook/react-native/issues/25181#issuecomment-506690818 ), add multiple window demo to RNTester, deprecate Dimensions in favor of a layout context, consider adding hook-based APIs for native modules such as Alert that automatically know which rootTag to pass

## Changelog

[Internal] [Changed] - Modernize Modal to use RootTagContext
[iOS] [Changed] - `Alert`, `ActionSheetIOS`, `StatusBar` methods now take an optional `surface` argument (for future iPadOS 13 support)
[iOS] [Changed] - RCTPresentedViewController now takes a nullable `window` arg
[Internal] [Changed] - Do not assume `UIApplicationDelegate` has a `window` property
Pull Request resolved: https://github.com/facebook/react-native/pull/25425

Test Plan:
- Open RNTester and:
- go to Modal and check if it still works
- Alert → see if works
- ACtionSheetIOS → see if it works
- StatusBar → see if it works
- Share → see if it works

Reviewed By: PeteTheHeat

Differential Revision: D16957751

Pulled By: hramos

fbshipit-source-id: ae2a4478e2e7f8d2be3022c9c4861561ec244a26
2020-03-04 14:25:12 -08:00
Vojtech Novak 884c86ae02 change onRefresh flow typing (#28167)
Summary:
I propose this change because we (and a lot of other people, I'd guess) pass an `async` function as a parameter to `onRefresh`. Because the `async` function returns a `promise`, flow is reporting an error. I think the type checking here can be relaxed either all the way to `any` (because RN does not care here what we return) or to `void | Promise<void>` to account for async functions.

looking at fb7b2d3533 (diff-a9c5687ae65236ba3e7f34bfdcdec81d) seems like the second is preferred

## Changelog

[General] [changed] - relax RefreshControl's onRefresh flow typing
Pull Request resolved: https://github.com/facebook/react-native/pull/28167

Test Plan: * flow passes

Reviewed By: hramos

Differential Revision: D20196529

Pulled By: TheSavior

fbshipit-source-id: bb5a314bcfb5fb9c8ab71eccb449f1322aeebacb
2020-03-03 16:00:52 -08:00
Tom Underhill f4de45800f PlatformColor implementations for iOS and Android (#27908)
Summary:
This Pull Request implements the PlatformColor proposal discussed at https://github.com/react-native-community/discussions-and-proposals/issues/126.   The changes include implementations for iOS and Android as well as a PlatformColorExample page in RNTester.

Every native platform has the concept of system defined colors. Instead of specifying a concrete color value the app developer can choose a system color that varies in appearance depending on a system theme settings such Light or Dark mode, accessibility settings such as a High Contrast mode, and even its context within the app such as the traits of a containing view or window.

The proposal is to add true platform color support to react-native by extending the Flow type `ColorValue` with platform specific color type information for each platform and to provide a convenience function, `PlatformColor()`, for instantiating platform specific ColorValue objects.

`PlatformColor(name [, name ...])` where `name` is a system color name on a given platform.  If `name` does not resolve to a color for any reason, the next `name` in the argument list will be resolved and so on.   If none of the names resolve, a RedBox error occurs.  This allows a latest platform color to be used, but if running on an older platform it will fallback to a previous version.
 The function returns a `ColorValue`.

On iOS the values of `name` is one of the iOS [UI Element](https://developer.apple.com/documentation/uikit/uicolor/ui_element_colors) or [Standard Color](https://developer.apple.com/documentation/uikit/uicolor/standard_colors) names such as `labelColor` or `systemFillColor`.

On Android the `name` values are the same [app resource](https://developer.android.com/guide/topics/resources/providing-resources) path strings that can be expressed in XML:
XML Resource:
`@ [<package_name>:]<resource_type>/<resource_name>`
Style reference from current theme:
`?[<package_name>:][<resource_type>/]<resource_name>`
For example:
- `?android:colorError`
- `?android:attr/colorError`
- `?attr/colorPrimary`
- `?colorPrimaryDark`
- `android:color/holo_purple`
- `color/catalyst_redbox_background`

On iOS another type of system dynamic color can be created using the `IOSDynamicColor({dark: <color>, light:<color>})` method.   The arguments are a tuple containing custom colors for light and dark themes. Such dynamic colors are useful for branding colors or other app specific colors that still respond automatically to system setting changes.

Example: `<View style={{ backgroundColor: IOSDynamicColor({light: 'black', dark: 'white'}) }}/>`

Other platforms could create platform specific functions similar to `IOSDynamicColor` per the needs of those platforms.   For example, macOS has a similar dynamic color type that could be implemented via a `MacDynamicColor`.   On Windows custom brushes that tint or otherwise modify a system brush could be created using a platform specific method.

## Changelog

[General] [Added] - Added PlatformColor implementations for iOS and Android
Pull Request resolved: https://github.com/facebook/react-native/pull/27908

Test Plan:
The changes have been tested using the RNTester test app for iOS and Android.   On iOS a set of XCTestCase's were added to the Unit Tests.

<img width="924" alt="PlatformColor-ios-android" src="https://user-images.githubusercontent.com/30053638/73472497-ff183a80-433f-11ea-90d8-2b04338bbe79.png">

In addition `PlatformColor` support has been added to other out-of-tree platforms such as macOS and Windows has been implemented using these changes:

react-native for macOS branch: https://github.com/microsoft/react-native/compare/master...tom-un:tomun/platformcolors

react-native for Windows branch: https://github.com/microsoft/react-native-windows/compare/master...tom-un:tomun/platformcolors

iOS
|Light|Dark|
|{F229354502}|{F229354515}|

Android
|Light|Dark|
|{F230114392}|{F230114490}|

{F230122700}

Reviewed By: hramos

Differential Revision: D19837753

Pulled By: TheSavior

fbshipit-source-id: 82ca70d40802f3b24591bfd4b94b61f3c38ba829
2020-03-02 15:12:09 -08:00
Janic Duplessis 0569d4c431 Remove JS autoFocus implementation (#27923)
Summary:
Follow up to https://github.com/facebook/react-native/issues/27803 and https://github.com/facebook/react-native/issues/27924. We no longer need to call focus on mount from JS as both iOS and Android implements it natively now.

## Changelog

[General] [Fixed] - Remove JS autoFocus implementation
Pull Request resolved: https://github.com/facebook/react-native/pull/27923

Test Plan: Test that focus works in RN Tester with this, https://github.com/facebook/react-native/issues/27803 and https://github.com/facebook/react-native/issues/27924

Differential Revision: D19956373

Pulled By: TheSavior

fbshipit-source-id: 5d99ead55011663b3edaf499ac7616765a24cb50
2020-03-02 11:34:36 -08:00
Hans Halverson a3d9e91203 Move suppression to primary locations in xplat/js
Summary:
We will soon be enforcing that flow suppressions will only apply when on an error's primary location ([post](https://fb.workplace.com/groups/179614562644215/permalink/559286354677032/)). This diff uses the codemod created in D20008770 to move all suppression comments to their primary locations in the  `xplat/js` flow root, and deletes suppression comments that are not on any primary locations.

This diff was generated with:
```
~/fbsource/fbcode/flow/packages/flow-dev-tools/bin/tool suppression-primary-locations --json-file ~/www/errors.json  ~/fbsource/xplat/js
hg st -n | xargs grep -l -P '@(partially-)?generated' | xargs hg revert
hg st -n | xargs grep -l 'format' | xargs prettier --write
```

Changelog: [Internal]

bypass-lint

Reviewed By: dsainati1

Differential Revision: D20122544

fbshipit-source-id: d94e409aadb18bb399a1ddbf9f3f2494fe4fb54c
2020-02-27 12:14:57 -08:00
Joshua Gross ed5f9eeb2a TextInput: use commands instead of setNativeProps on Android
Summary:
Use codegen'd ViewCommands added in previous diff as a replacement for setNativeProps.

Changelog: [Internal]

Reviewed By: mdvacca

Differential Revision: D18619298

fbshipit-source-id: 08069e828e92ac3cca9813bbcdca99d99fb50883
2020-02-24 16:19:36 -08:00
Joshua Gross 7f80b1c8c7 TextInput: Fix controlled TextInput selection in Paper
Summary:
The migration from classy to functional component partially broke controlled TextInput selections. This fixes it.

The nuance is that even though we have "event counters" sent from native, "onChange" and "onChangeSelection" are separate events;
so even if you receive new text and a new native event counter, your selection may be out-of-date. Incrementing the event counter
when sending selection events breaks text updates; and adding another native event counter seems like overkill. Instead, in JS, we statefully
keep track of (1) the native event counter, (2) whether or not the selection has been updated for that event counter.

Changelog: [internal]

Reviewed By: mdvacca

Differential Revision: D18867152

fbshipit-source-id: c569ecd03ce0042d6feb5fa8af4c756588607a09
2020-02-24 16:19:35 -08:00
Kacie Bawiec aebeb3b0a9 Add Snapshot Rendering Test to ScrollView
Summary:
As title.

Changelog: [Added] Add snapshot rendering test to ScrollView

Reviewed By: zackargyle, TheSavior

Differential Revision: D20037673

fbshipit-source-id: 4270bc63a6065789f072893756468b67deae169d
2020-02-24 14:48:40 -08:00
Rachel Nabors c0d8c1db90 Updating the URLs to point at new domain name reactnative.dev
Summary:
We recently updated React Native's docs site to have its own domain reactnative.dev and needed to update the URLs in the source code

CHANGELOG:
[INTERNAL]

Reviewed By: hramos

Differential Revision: D20072842

fbshipit-source-id: 1970d9214c872a6e7abf697d99f8f5360b3b308e
2020-02-24 13:09:11 -08:00
Eli White 3212f7dfe8 Release Pressable!
Summary:
*Pressable* is a component which is intended to replace the Touchable* components such as *TouchableWithoutFeedback* and *TouchableOpacity*. The motivation is to make it easier to create custom visual touch feedback so that React Native apps are not easily identified by the “signature opacity fade” touch feedback.

We see this component as eventually deprecating all of the existing Touchable components.

Changelog:
[Added][General] New <Pressable> Component to make it easier to create touchable elements

Reviewed By: yungsters

Differential Revision: D19674480

fbshipit-source-id: 765d657f023caea459f02da25376e4d5a2efff8b
2020-02-20 19:27:20 -08: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
Eli White da9364fa3e Switch iOS focus/blur calls to use new commands
Summary:
Make iOS use Commands instead of UIManager.{focus,blur}. This makes these apis compatible with Fabric and paper at the same time.

Changelog:
[Internal] Switch iOS focus/blur calls to use new commands

Reviewed By: mdvacca

Differential Revision: D19458995

fbshipit-source-id: 8c4aacd41941f54a887aeec1a17d9ce0b6878ab1
2020-02-19 15:29:00 -08:00
Eli White 147055466a Switch Android focus/blur calls to use new commands
Summary:
This makes Android dispatch focus/blur through the Fabric view manager when running in Fabric.

Changelog:
[Internal] Switch Android focus/blur calls to use new commands

Reviewed By: JoshuaGross, mdvacca

Differential Revision: D19458362

fbshipit-source-id: 23e1d989ec55bc8abff4279e259f4b6c953ac0a3
2020-02-19 15:29:00 -08:00
Eli White 6286270e4c Migrate TextInputState to take a ref instead of a reactTag
Summary:
Changelog:
[General][Breaking] Multiple deprecations and breaking changes to TextInputState. Use native component refs instead of react tags

Reviewed By: JoshuaGross

Differential Revision: D19458214

fbshipit-source-id: f67649657fa44b6c707a0ac91f07d2ceb433bc70
2020-02-19 15:28:59 -08:00
Eloy Durán a43fd60e18 Fix backgroundColor typing. (#28105)
Summary:
TextInput’s `InputAccessoryView` was using a [deprecated] prop-type as a Flow type, which TheSavior asked me to fix [here](6ba4b28a22 (r37343692)).

## Changelog

[iOS] [Fixed] - Fixes the `InputAccessoryView.backgroundColor` prop’s typing to use `ColorValue`.
Pull Request resolved: https://github.com/facebook/react-native/pull/28105

Test Plan:
Passes:

```bash
yarn flow-check-ios
```

Differential Revision: D19956401

Pulled By: TheSavior

fbshipit-source-id: 0c16f292b0143e83235a23712a0a7a11b8317f4e
2020-02-18 13:53:45 -08:00