Commit Graph

265 Commits

Author SHA1 Message Date
ankit-tailor f1c1f8116b Feat/fontweight number value (#34598)
Summary:
This PR adds support for number values for `fontWeight` as requested in https://github.com/facebook/react-native/issues/34425.

## Changelog

<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://reactnative.dev/contributing/changelogs-in-pull-requests
-->

[General] [Added] - Added support for number values in fontWeight.

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

Test Plan:
```js
<Text style={{ fontWeight: 900, color: 'red' }}>
  Hello World
</Text>
```

Reviewed By: jacdebug

Differential Revision: D39268920

Pulled By: cipolleschi

fbshipit-source-id: 9bb711677bf173f9904b74f382659042856efd83
2022-09-12 02:12:23 -07:00
Agastya Darma Laksana b2452ab216 feat: Adding support for objectFit a partial equivalent to the resizeMode style and prop of <Image>. (#34576)
Summary:
This PR aims to add support for objectFit a partial equivalent to the resizeMode style and prop of Image.

## Changelog

[General] [Added] - Add support for objectFit style of Image.

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

Test Plan:
1. Open the RNTester app and navigate to the Image page
2. See the Object Fit section.

![Screenshot_1662112702](https://user-images.githubusercontent.com/8868908/188115315-5d5aa971-93ba-4437-a54b-c5ea69b00c08.png)

Reviewed By: rickhanlonii

Differential Revision: D39261176

Pulled By: jacdebug

fbshipit-source-id: 1eefd76b6c11ed5fc52b2c524ad78c91051077f6
2022-09-08 11:52:10 -07:00
Daksh Bhardwaj fc42d5bbb9 feat: add userSelect style equivalent to selectable (#34575)
Summary:
This adds support for the `userSelect` style attribute, mapping the already existing selectable attribute as requested on https://github.com/facebook/react-native/issues/34425. This PR also updates the TextExample.android and TestExample.ios on the RNTester in order to facilitate the manual QA of this.

## Changelog
[General] [Added] - Add support for `userSelect` style

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

Test Plan:
-  open the RNTester app and navigate to the Text page
 - Check the `Selectable Text` through the Selectable text section
<Image src="https://user-images.githubusercontent.com/22423684/188112863-65acd145-76b0-47ba-8bc6-f72298077096.png" height="600" width="300" />

Reviewed By: yungsters

Differential Revision: D39252798

Pulled By: jacdebug

fbshipit-source-id: f7fabf20ee68778d75461f511c56f94d0d756d9c
2022-09-08 03:09:11 -07:00
cyrus25 5c109b37a4 feat: Added pointerEvents style equivalent to pointerEvents prop (#34586)
Summary:
This adds `pointerEvents` style which is equivalent to `pointerEvents` prop as requested in https://github.com/facebook/react-native/issues/34425

## Changelog

<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://reactnative.dev/contributing/changelogs-in-pull-requests
-->

[General] [Added] - Added pointerEvents style equivalent to pointerEvents prop

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

Test Plan:
```
<View
   style={{
     pointerEvents: 'none'
   }}
 >
</View>
```

Reviewed By: cipolleschi

Differential Revision: D39252830

Pulled By: jacdebug

fbshipit-source-id: 94f265a6b6940a4371e7985d5de3b8143693e069
2022-09-05 05:37:35 -07:00
Kudo Chien 82ceb8c3e3 Only show warning when overwrite existing preprocessor (#34479)
Summary:
from the original design of `StyleSheet.setStyleAttributePreprocessor()` in https://github.com/facebook/react-native/issues/11138, the overwriting warning shows when the existing preprocess is be overwritten.  the behavior changes from https://github.com/facebook/react-native/commit/33b385825c72. This PR revises the logic back to original design.

## Changelog

[Internal] [Fixed] - Show warning only when overwriting existing preprocessor in `StyleSheet.setStyleAttributePreprocessor()`

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

Test Plan:
Unit Test

```
 PASS  Libraries/StyleSheet/__tests__/StyleSheet-test.js
  setStyleAttributePreprocessor
    ✓ should not show warning when set preprocessor first time (2 ms)
    ✓ should show warning when overwrite the preprocessor (1 ms)
```

Reviewed By: dmitryrykun

Differential Revision: D38940676

Pulled By: cipolleschi

fbshipit-source-id: 80cf30fff62f4a02c17f7f42b3260a6011d5fc82
2022-08-25 15:03:32 -07:00
Thuong Tran 163636db75 feat(font-feature): adding stylistics from ss01 to ss20 as new fontVariant values (#34003)
Summary:
Add new fontVariant values: stylistic-one(ss01) -> stylistic-twenty(ss20)

stylistic-three(ss01)
stylistic-two(ss02)
stylistic-three(ss03)
stylistic-four(ss04)
stylistic-five(ss05)
stylistic-six(ss06)
stylistic-seven(ss07)
stylistic-eight(ss08)
stylistic-nine(ss09)
stylistic-ten(ss10)
stylistic-eleven(ss11)
stylistic-twelve(ss12)
stylistic-thirteen(ss13)
stylistic-fourteen(ss14)
stylistic-fifteen(ss15)
stylistic-sixteen(ss16)
stylistic-seventeen(ss17)
stylistic-eighteen(ss18)
stylistic-nineteen(ss19)
stylistic-twenty(ss20)

References:
https://developer.apple.com/fonts/TrueType-Reference-Manual/RM09/AppendixF.html#Type3
https://docs.microsoft.com/en-us/typography/opentype/spec/featurelist

Example:
`<Text
      style={{
          fontVariant: ['stylistic-three', 'stylistic-five']
        }}>
      Hello World!
    </Text>`

## Changelog

[iOS] [Added] - Add new fontVariant values: stylistic-one(ss01) -> stylistic-twenty(ss20)
[Android] [Added] - Add new fontVariant values: stylistic-one(ss01) -> stylistic-twenty(ss20)

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

Test Plan: ![Screen Shot 2022-06-13 at 16 02 46](https://user-images.githubusercontent.com/62107729/173318839-69da379c-df13-4351-9dfa-4b548664e43d.png)

Reviewed By: cipolleschi

Differential Revision: D37118078

Pulled By: cortinico

fbshipit-source-id: 6a8366638f8181b5db6b2c12c48a5ad65e1e598f
2022-08-17 03:07:09 -07:00
Andrew ee33385cdd Unify platform behavior of processTransform (#33579)
Summary:
Currently both iOS and Android send over the list of transforms as an array.   But there is an if statement that causes other platforms to get a matrix.  This prevents other platforms from being able to use the fabric ViewProps class and the conversion functions as they exist in core, as those expect the transforms to be an array.

Stop special casing iOS and android. - Which will allow for example Windows to be able to share more fabric code.

## Changelog

[Internal] [Changed] - All platforms should get transform sent to native as an array of transform operations instead of a matrix

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

Test Plan:
Similar change made in react-native-windows.
https://github.com/microsoft/react-native-windows/issues/9797

Reviewed By: NickGerleman

Differential Revision: D38615676

Pulled By: cortinico

fbshipit-source-id: 8861afe6bf34bebb09dd82f7365faf007dd79cbf
2022-08-15 06:37:16 -07:00
Tim Yung b8425c8ee5 RN: Cleanup Existing ESLint Warnings
Summary:
Sometime over the past few months (and with changes such as migrating to the `hermes-eslint` parser), a bunch of lint warnings crept into the codebase.

This does a pass to clean them all up, ignore generated files, and refactor some code to be... better.

There should be no observable behavior changes as a result of this.

Changelog:
[Internal]

Reviewed By: NickGerleman

Differential Revision: D38646643

fbshipit-source-id: a7b55d1e4cd5700340cc5c21f928baf3ea1d5a58
2022-08-12 17:16:40 -07:00
Pieter Vanderwerff a333eb2ac5 Deploy suppressions ahead of 0.183.0 to xplat
Summary: Changelog: [Internal]

Reviewed By: SamChou19815

Differential Revision: D38020751

fbshipit-source-id: d32b15429605d2c42195d98de9e5455926f0022b
2022-07-21 12:31:37 -07:00
Eric Edouard 8993ffc82e Added border curve style prop ("Squircle" effect - iOS only) (#33783)
Summary:
<!-- Explain the **motivation** for making this change. What existing problem does the pull request solve? -->
NOTE: PR is based on https://github.com/facebook/react-native/pull/32017 which went stale for quite a long time but can now safely be closed

![](https://preview.redd.it/nuvl4746ys471.png?width=960&crop=smart&auto=webp&s=084a517a645364ac246b70b7fa8e0f2470cc7af3)

Since iOS 13+, it is possible to change the corner curve property on iOS in order to smoothen border radius and make it more "rounded" (also called "squircle")
Here's an [article](https://medium.com/arthurofbabylon/a-smooth-corner-radius-in-ios-54b80aa2d372) explaining in details what it is.
This property is also built in figma, but currently there is no way to implement this directly with react-native despite it being available natively on iOS.

Many open source react-native libraries were created in order to simulate this behaviour:
[react-native-super-ellipse-mask](https://github.com/everdrone/react-native-super-ellipse-mask)
[react-native-squircle-view](https://github.com/everdrone/react-native-squircle-view)
[react-native-figma-squircle](https://github.com/tienphaw/react-native-figma-squircle)

But they rely on creating an SVG shape with the smoothed corners and masking the view behind. This makes it not very performant (flickering on mounting was a common side-effect)

This PR aims at implementing the property natively.

PR for the docs update: https://github.com/facebook/react-native-website/pull/2785

## 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] - Added `borderCurve` style prop for smooth border radius (squircle effect)

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

Test Plan:
We used the RNTester app and added an example with `cornerCurve ` set to `'continuous'` (only on iOS).

As the difference is quite subtle, we also made some more tests to better illustrate the difference (these are not in the RN-tester app):

![IMG_0810](https://user-images.githubusercontent.com/19872411/133893536-26207c53-aade-4583-9eef-7a1739b6907b.PNG)

We overlapped two views with `position: absolute`, the one in the background has a red background and has `cornerRadius` set to `false`, and the one in the foreground is set to `true`. We can clearly see where the borders differs on the corners.

Reviewed By: sammy-SC

Differential Revision: D37883631

Pulled By: cipolleschi

fbshipit-source-id: 09f06de9628fa326323eba63875de30102c4a59e
2022-07-21 04:11:30 -07:00
Pieter Vanderwerff 6c563a507f Suppress missing 'this' annotations in xplat/js
Reviewed By: samwgoldman

Differential Revision: D37701888

fbshipit-source-id: 80cf21e4c942f00695c08ea8671efba0109aad32
2022-07-07 21:53:53 -07:00
Jordan Brown 6064fd0600 Presuppress xplat and upgrade to 0.178.1
Summary:
This diff upgrades xplat to 0.178.1 and pre-suppresses errors from turning on constrained writes.

To generate this diff I:
* Modified every `env_mode=constrain_writes` to `env_mode=ssa` and made a commit (this is so our upgrade script will work)
* Ran   scripts/flow/upgrade.sh 0.178.1 to upgrade all the flowconfigs to 178.1 and suppress new-env errors
* Modified arvr/js/flowconfig.ejs to use 0.178.1 and ran `scripts/gen-flowconfig/gen-flowconfig --project arvr`
* Modified xplat/js/flowconfig.ejs to use 0.178.1 and ran `scripts/gen-flowconfig/gen-flowconfig --project xplat`
* Unstacked from the commit in point 1

Reviewed By: SamChou19815

Differential Revision: D36676019

fbshipit-source-id: c3032f18ed838afc327f00de563e7f20713bdc26
2022-05-26 12:59:52 -07:00
Marshall Roch 309d705e6a Deploy 0.178.0 to xplat
Summary: Changelog: [Internal]

Reviewed By: gkz

Differential Revision: D36356453

fbshipit-source-id: e56e4694d4e0811f760a3994a889b48f2ba8cffb
2022-05-12 20:06:24 -07:00
George Zahariev 0337a2981d Add annotations to empty objects that look like indexers in Xplat
Summary:
We are working on making the empty object literal `{}` have the type `{}` - i.e. exact empty object - rather than being unsealed.
Making this change exposes a variety of errors. We can prevent these errors by annotating what we want the type of the empty object to be.

Reduces Xplat error diff to 2.3k

- Announcement: [post](https://fb.workplace.com/groups/flowlang/posts/903386663600331)
- Support group: [Flow Support](https://fb.workplace.com/groups/flow)

drop-conflicts

Format:
```
arc f
```
Sort imports
```
hg l -n | xargs js1 lint --fix --rule 'fb-tools/sort-requires'
```

Changelog: [Internal]

Reviewed By: samwgoldman

Differential Revision: D36086696

fbshipit-source-id: 90447279f2e6e38f44189b74ec0297719f7adf58
2022-05-03 19:59:28 -07:00
Moti Zilberman 370c65b943 Refactor StyleSheetTypes for (internal) extensibility
Summary: Changelog: [Internal]

Reviewed By: arushikesarwani94

Differential Revision: D34188705

fbshipit-source-id: 017285553f24144f8f7eff3a126a99be6c9b2f25
2022-02-15 08:50:55 -08:00
Moti Zilberman 83b1975b90 Extend ColorValue Flow type to include numbers
Summary:
Adds `number` to the `ColorValue` union type.

Per our docs, React Native supports specifying colours as RGBA values packed into ints: https://reactnative.dev/docs/colors#color-ints. It looks like this case was missed in D6226807 (https://github.com/facebook/react-native/commit/da047966e4c2064a48e02ff74830c99808d8194b) when we started typing the `StyleSheet` API with Flow.

Changelog: [General][Fixed] - Support numeric color values in StyleSheet's Flow types

Reviewed By: yungsters

Differential Revision: D34140748

fbshipit-source-id: 5bfe2995a473260926fa3c8b6926bb841615d393
2022-02-11 06:54:24 -08:00
Moti Zilberman 159eb0bdf4 Normalize platform colors early
Summary:
Changelog: [Internal]

Fixes `normalizeColor` to always return the normalized color. Previously, when normalization was delegated to `normalizeColorObject`, we would return the *original* color object, which is a bug.

Reviewed By: javache

Differential Revision: D34048595

fbshipit-source-id: 083cbe36be2311ea9cffe8ef61e6a986840aec71
2022-02-10 04:57:47 -08:00
Pieter De Baets d682753244 Support setting hitSlop with single value (JS) [re-land]
Summary:
JS changes to support D32138347 (https://github.com/facebook/react-native/commit/a96bdb7154b0d8c7f43977d8a583e8d2cbdcb795). This was previously reverted due to missing iOS Paper support.

Changelog: [Android][Fixed] Enable hitSlop to be set using a single number.

Original commit changeset: 91cfcc86582c

Original Phabricator Diff: D32559015 (https://github.com/facebook/react-native/commit/589b129581903a737a64e14eab3f2e29620831d5)

Reviewed By: yungsters

Differential Revision: D33453327

fbshipit-source-id: d289a0a8b8208bc9c68e6ca537632b745e8196ed
2022-01-31 04:06:22 -08:00
Pieter De Baets 78614de1cb Revert D32559015: Support setting hitSlop with single value (JS changes)
Differential Revision:
D32559015 (https://github.com/facebook/react-native/commit/589b129581903a737a64e14eab3f2e29620831d5)

Original commit changeset: c0409e6e5dd9

Original Phabricator Diff: D32559015 (https://github.com/facebook/react-native/commit/589b129581903a737a64e14eab3f2e29620831d5)

fbshipit-source-id: 91cfcc86582c4716fc531a73bd8e06dea1406abd
2022-01-05 14:06:54 -08:00
Pieter De Baets 589b129581 Support setting hitSlop with single value (JS changes)
Summary:
JS changes to support D32138347 (https://github.com/facebook/react-native/commit/a96bdb7154b0d8c7f43977d8a583e8d2cbdcb795)

Changelog: [Android][Fixed] Enable hitSlop to be set using a single number.

Reviewed By: yungsters

Differential Revision: D32559015

fbshipit-source-id: c0409e6e5dd95b35a2a4605b16cfb48104be2858
2022-01-04 10:39:43 -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
Evan Yeung 037e346197 Add LTI annotations to xplat/js
Summary:
This diff runs the codemod to add type annotations to function parameters in preparation for Flow's local type inference (LTI) project. I ran the codemod over xplat/js and reverted any files that had flow errors in them. See the list of commands run to see the regeneration of various files.

Changelog:
[Internal][Changed] - Added type annotations

Reviewed By: yungsters

Differential Revision: D32075270

fbshipit-source-id: 6a9cd85aab120b4d9e690bac142a415525dbf298
2021-11-10 15:40:15 -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
Tim Yung 65e58f26e1 RN: @react-native/normalize-color support Node.js
Summary:
Changes `react-native/normalize-color` to be useable from Node.js by making the following changes:

1. Rename `base.js` to `index.js` so importing is more convenient.
2. Move Flow definitions into a seprate library definition flow so `index.js` can be consumed directly.

I also made a few improvements to the actual implementation:

1. Avoid allocating `matchers` for non-strings.
2. Avoid allocating an object of all the color keywords. This will reduce memory usage (in exchange for slightly larger compiled bytecode).

Changelog:
[General][Changed] - react-native/normalize-color now supports Node.js

Reviewed By: lunaleaps

Differential Revision: D30595908

fbshipit-source-id: e6279e9ff815d8d1f489811187deabfdf53b8fbf
2021-09-01 01:26:56 -07:00
Tim Yung 33b385825c RN: Simplify ReactNativeStyleAttributes Type
Summary:
Simplifies the Flow type for `ReactNativeStyleAttributes`, an internal module.

Changelog:
[Internal]

Reviewed By: TheSavior

Differential Revision: D29019311

fbshipit-source-id: cf95dac4b8c2261812cc1d753255dfb905540759
2021-06-11 23:52:09 -07:00
Tim Yung 2e8c0bd7ea RN: Delete StyleSheetValidation
Summary:
Deletes `StyleSheetValidation` because it is `prop-types` in disguise.

Changelog:
[General][Removed] - `StyleSheet.create` will no longer do DEV-time validation.

Reviewed By: TheSavior

Differential Revision: D29019310

fbshipit-source-id: bfe886d8dc09a1aa8dac4a73bfd62f481e3eb9e9
2021-06-11 23:52:09 -07:00
Birkir Gudjonsson 4b9d9dda27 Accessible colors for DynamicColorIOS (#31651)
Summary:
Allow you to harvest the `UIAccessibilityContrastHigh` trait from iOS to show accessible colors when high contrast mode is enabled.

```jsx
// usage

PlatformColorIOS({
  light: '#eeeeee',
  dark: '#333333',
  highContrastLight: '#ffffff',
  highContrastDark: '#000000',
});

// {
//   "dynamic": {
//     "light": "#eeeeee",
//     "dark": "#333333",
//     "highContrastLight": "#ffffff",
//     "highContrastDark": "#000000",
//   }
// }
```

This is how apple's own dynamic system colors work under the hood (https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/color/#dynamic-system-colors)

 ---

The react native docs mention that more keys may become available in the future, which this PR is adding:

> In the future, more keys might become available for different user preferences, like high contrast.

https://reactnative.dev/docs/dynamiccolorios

## 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] - High contrast dynamic color options for dark and light mode.

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

Test Plan: Added unit tests for `normalizeColor` to pass the high contrast colors downstream to RCTConvert

Reviewed By: lunaleaps

Differential Revision: D28922536

Pulled By: p-sun

fbshipit-source-id: f81417f003c3adefac50e994e62b9be14ffa91a1
2021-06-08 11:51:23 -07:00
Tim Yung bb6cd56fae RN: Fallback for Invalid Colors in processColorArray
Summary:
If an invalid color is supplied to a native component that expects `Array<ColorValue>`, it is currently possible to produce an array that contains null or undefined elements. This is problematic because the native component may not know what to do with the null or undefined value.

This changes `processColorArray` to always return an array with valid color values. Any invalid color values will fallback to being transparent black, `0x00000000`.

Changelog:
[General][Fixed] - For native components that accept color arrays, invalid elements will now fallback to transparent with a console error.

Reviewed By: JoshuaGross

Differential Revision: D27542291

fbshipit-source-id: efa5d130644b3aee68d2b9fad6fdb61af11a2966
2021-04-02 15:07:54 -07:00
Luna Wei bac2c2c801 Update FlowFixMes to use error codes in react-native-github
Summary:
Changelog:
[Internal] - Add error codes to existing FlowFixMe's

Reviewed By: kacieb

Differential Revision: D27445689

fbshipit-source-id: 2b19692e1cb822ab6785efcc5f93ee33e7dce1e5
2021-03-31 18:21:47 -07:00
Luna Wei 321de15803 Delete unused FlowFixMes in xplat/js/react-native-github
Summary:
Changelog:
[Internal] - Remove unused FlowFixMes

Reviewed By: kacieb

Differential Revision: D27445690

fbshipit-source-id: c1fbf4495ae020b30a458c2ef4870547fd5d5c6e
2021-03-31 18:21:47 -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
Pieter Vanderwerff f2052fedc2 Land suppressions for 0.142.0 release to xplat
Summary:
This change contains the suppressions for the up coming v0.142.0 Flow release.

The new suppressions are a result the following changes:
* Disallow flowing functions or inexact objects to indexed objects to improve object soundness. This can cause errors if you are passing a function or inexact objects when an indexed object is expected.
* Flow now processes imports before checking the body of a file. In some rare cases this can expose previously skipped errors due to the processing order.

Reviewed By: mroch

Differential Revision: D25820434

fbshipit-source-id: 59cc1d852ffc8cc39f0d5112ce485fb33f05c092
2021-01-07 11:33:45 -08:00
Tim Yung 54a067e61e RN: Refactor ScrollView Style Splitting
Summary:
Rewrites `splitLayoutProps`, which is only used by `ScrollView`.

- Improve type safety by avoiding `DangerouslyImpreciseStyle`.
- Avoid allocating objects when it is not necessary.
- Avoid allocating a object enumeratig layout props by using a switch statement.

Changelog:
[Internal]

Reviewed By: JoshuaGross, kacieb

Differential Revision: D25097226

fbshipit-source-id: 2050c03b681024212c06a48b7eb05f28c14415f9
2020-11-19 15:55:23 -08:00
Tim Yung 7e7527e7db RN: Preserve Style Type in flattenStyle
Summary:
Refactors `flattenStyle` so that it preserves the style type of the argument. This lets us avoid using `DangerouslyImpreciseStyleProp` where we can.

Changelog:
[Internal]

Reviewed By: JoshuaGross, nadiia, kacieb

Differential Revision: D25097227

fbshipit-source-id: df6af6fefab25dbb62e3c81897c3cef98619a9c7
2020-11-19 15:55:23 -08:00
Panagiotis Vekris 254d455103 Add type annotations to prevent issues with planned Flow changes
Summary:
We're planning a fix in Flow (D24112595) that uncovers some existing errors that were
previously suppressed. Adding these annotations prevents them from surfacing during the
deploy of the fix.

Changelog: [Internal]

Reviewed By: dsainati1

Differential Revision: D24147994

fbshipit-source-id: fef59a9427da6db79d4824e39768dd5ad0a8d1a3
2020-10-09 15:52:21 -07:00
Tim Yung 9c9e677918 RN: Remove react-animated Legacy Package
Summary:
Removes the legacy `react-animated` package configuration and collapses the `Animated/src/` directory into `Animated/`.

Also, reconfigures all references to `Animated/src/` to just be `Animated/`.

Changelog:
[Internal]

Reviewed By: cpojer

Differential Revision: D22450848

fbshipit-source-id: 9fd4861e9f357d817d82e9fec71967a2936a3830
2020-08-25 14:15:35 -07:00
Christoph Nakazawa ab56ed7d96 Create @react-native/normalize-color package
Summary: Changelog: [Internal]

Reviewed By: TheSavior

Differential Revision: D22644750

fbshipit-source-id: f1b24c7e72819650517b7b42f93eeeed9c1e627b
2020-07-24 08:36:37 -07:00
Hein Rutjes cfa4260598 Add support for shadowColor on Android (API >= 28) (#28650)
Summary:
This PR adds support for the `shadowColor` style on Android.

This is possible as of Android P using the `setOutlineAmbientShadowColor` and `setOutlineSpotShadowColor` View methods. The actual rendered color is a multiplication of the color-alpha, shadow-effect and elevation-value.

## Changelog

`[Android] [Added] - Add support for shadowColor on API level >= 28`
Pull Request resolved: https://github.com/facebook/react-native/pull/28650

Test Plan:
- Only execute code on Android P
- Added Android `BoxShadow` tests to RNTester app

![image](https://user-images.githubusercontent.com/6184593/79457137-fe627c80-7fef-11ea-8e88-3d9423a4f264.png)

Reviewed By: mdvacca

Differential Revision: D21125479

Pulled By: shergin

fbshipit-source-id: 14dcc023977d7a9d304fabcd3c90bcf34482f137
2020-07-07 23:32:38 -07:00
Nick Gerleman e75557b48f Restore Previous Behavior for StyleSheet Validation of Null/Undefined Styles (#29171)
Summary:
https://github.com/facebook/react-native/issues/27264 changed stylesheet validation to avoid enumerating properties on the prototype of a style. It introduces a secondary behavior change, where null/undefined styles used to be tolerated but now lead to an exception. This is because `for in undefined` will noop where `for of Object.keys(undefined)` will throw.

This scenario of undefined/null styles seems to actually show up in practice and was previously well tolerated. E.g. `Button.js` has code that looks like this:

```jsx
const styles = StyleSheet.create({
  button: Platform.select({
    ios: {},
    android: {
      elevation: 4,
      // Material design blue from https://material.google.com/style/color.html#color-color-palette
      backgroundColor: '#2196F3',
      borderRadius: 2,
    },
  }),
```

For non ios/Android platforms, that creates a style object which looks like:
```js
{
  button: undefined,
  ...
}
```

This previously meant that the component would be unstyled if created, but now means out-of-tree platforms throw if the builtin Button component is required.

This change restores the previous `for in` loop but adds a `hasOwnProperty` check to avoid properties on prototypes.

## Changelog

[General] [Fixed] - Restore Previous Behavior for StyleSheet Validation of Null/Undefined Styles
Pull Request resolved: https://github.com/facebook/react-native/pull/29171

Test Plan: Validated that importing Buttons will no longer cause an exception, and that invalid properties are still caught.

Reviewed By: JoshuaGross

Differential Revision: D22118379

Pulled By: TheSavior

fbshipit-source-id: 650c64b934ccd12a3dc1b75e95debc359925ad73
2020-06-25 15:31:54 -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
Tom Underhill 411c344794 Remove ColorAndroid function as it adds no value over PlatfromColor (#28577)
Summary:
This change removes the `ColorAndroid` API.   It was added more as a validation tool than as something useful to a developer.   When making the original [PlatformColor PR](https://github.com/facebook/react-native/pull/27908) we felt it was valuable and useful to have working platform specific methods for the two platforms in core to test that the pattern worked in app code (PlatformColorExample.js in RNTester) and that the Flow validation worked, etc.    Practically `PlatformColor()` is more useful to a developer on Android than `ColorAndroid()`.    Now that the construct has served its purpose, this PR removes the `ColorAndroid` function and its related tests and other collateral.

## 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] [Removed] - Remove ColorAndroid function as it adds no value over PlatfromColor
Pull Request resolved: https://github.com/facebook/react-native/pull/28577

Test Plan: RNTester in both iOS and Android was tested.   Jest tests, Flow checks, Lint checks all pass.

Reviewed By: cpojer

Differential Revision: D20952613

Pulled By: TheSavior

fbshipit-source-id: 7d2cbaa2a347fffe59a1f3a26a210676008fdac0
2020-04-09 18:40:31 -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
Tom Underhill 602070f44b Add ES Lint rules for DynamicColorIOS()and ColorAndroid() (#28398)
Summary:
The [PlatformColor PR](https://github.com/facebook/react-native/pull/27908) added support for iOS and Android to express platform specific color values.   The primary method for an app to specify such colors is via the `PlatformColor()` method that takes string arguments.   The `PlatformColor` method returns an opaque Flow type enforcing that apps use the PlatformColor method instead of creating Objects from scratch -- doing so would make it harder to write static analysis tools around Color values in the future.   But in addition to `PlatformColor()`, iOS has a `DynamicColorIOS()` method that takes an Object.   The Flow type for this Object cannot be opaque, but we still want to enforce that app code doesn't pass variables instead of Object literals or that values in the Objects are variables.   To ensure `DynamicColorIOS()` can be statically analyzed this change adds an ESLint rule to enforce that `DynamicColorIOS()` takes an Object literal of a specific shape.   A `ColorAndroid()` was also introduced not for practical use but just to test having platform specific methods for more than one platform in the same app.   A second ESLint rule is created for `ColorAndroid` as well.

## Changelog

[General] [Changed] - Add ES Lint rules for `DynamicColorIOS()`and `ColorAndroid()`
Pull Request resolved: https://github.com/facebook/react-native/pull/28398

Test Plan: `yarn lint` passes.

Reviewed By: cpojer

Differential Revision: D20685383

Pulled By: TheSavior

fbshipit-source-id: 9bb37ccc059e74282b119577df0ced63cb9b1f53
2020-03-27 23:02:15 -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
Hans Halverson 4482e531d8 Move suppressions to primary locations in xplat/js
Reviewed By: gkz

Differential Revision: D20446329

fbshipit-source-id: 2713e7713f6b0e8d1dfd9ab8c0ccb27294177589
2020-03-16 21:28:17 -07:00
Jesse Katsumata 66e7a4c1aa Fix outdated urls (#28285)
Summary:
Fixed some url in the code that was outdated.

## Changelog

[Internal] [Fixed] - Fix outdated url in Image Example of RNTester and comment in StyleSheet Type
Pull Request resolved: https://github.com/facebook/react-native/pull/28285

Test Plan: Url can be accessed, and content displayed makes sense.

Differential Revision: D20464293

Pulled By: shergin

fbshipit-source-id: f0c97f7a95ed2a3d6c396cff6cda0bdaab7f5c35
2020-03-15 22:58:14 -07:00
Riley Dulin ce1703a84d Change stringifySafe to have limits on larger objects
Summary:
In heap snapshots, it was found that really large (20 MB) strings representing network data
were being logged as part of `Systrace.beginEvent` strings from `MessageQueue` in DEV mode.

To combat this, use `JSON.stringify` with limits to keep the depth, strings, arrays, and objects
in check.

Changelog: [Internal] Change `stringifySafe` to have max limits on string size

Reviewed By: yungsters

Differential Revision: D20016501

fbshipit-source-id: e123016557bc154e4210e0b4df44360570da8016
2020-03-02 17:28:21 -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