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
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
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
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
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
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
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
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
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
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
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
Summary:
Introduces `Rect`, an (eventual) replacement for `EdgeInsetsProp`.
This new type is then used in `Pressability` to expand support such that `hitSlop` and `pressRectOffset` can be either a `Rect` or a numeric size.
Changelog:
[Internal]
Reviewed By: yungsters
Differential Revision: D18742616
fbshipit-source-id: 13dd360f68ab804839938fc950fa2f4b25d3ed8c
Summary:
Changes the return type of StyleSheet.create to `$ReadOnly<S>`. At runtime, it just freezes the fields in dev mode and is the identity function otherwise. This cause 423 errors due to the wrong props being passed to different styles: P124372727
I went over errors at random with Eli to get confidence in the change.
Changelog:
[General][Fixed] Fix return type of StyleSheet.create
Reviewed By: zackargyle, TheSavior
Differential Revision: D19218817
fbshipit-source-id: b7aa10700f8333372c9f0bd61bfbef371caadf97
Summary:
Some babel plugins add additional methods to `Function.prototype` (see https://github.com/MatAtBread/fast-async):
```js
Function.prototype.$asyncbind = function $asyncbind(self, catcher) {
...
```
Although undocumented, React Native allows functions to be passed to `StyleSheet.create()` for dynamic styling:
```js
const styles = StyleSheet.create({
animalItem: height => ({ height })
});
```
If there are additional custom methods on `Function.prototype`, React Native's `StyleSheetValidation.validateStyle` will loop through these properties and raise an error because those properties are not valid style keys, because it loops through _all_ properties, including inherited ones.
This PR modifies `StyleSheetValidation.validateStyle` to only loop through the style's own properties, instead of including inherited ones.
## Changelog
[General] [Fixed] - Fix stylesheet validation for functions with custom prototype methods.
Pull Request resolved: https://github.com/facebook/react-native/pull/27264
Test Plan: - Tested that non-function style properties are still validated
Differential Revision: D18694895
Pulled By: hramos
fbshipit-source-id: b36f4a62a435e7b6a689398de3bcc06d6bb14293
Summary:
The following pull-requests adds test for the `processColorArray` function. This ensures that the mapping is respected even in the `processColor` file changes. It also ensures that the mapping follows the basic expected functionality
## Changelog
[General] [Added] - Add test for the `processColorArray` to make sure it maps correctly
Pull Request resolved: https://github.com/facebook/react-native/pull/27344
Test Plan:
- Run `npm run test Libraries/StyleSheet/__tests__/processColorArray-test.js` to ensure tests pass
- Run `npm run lint` to make sure there are no styling conflicts.
<img width="454" alt="Screen Shot 2019-11-26 at 3 24 44 PM" src="https://user-images.githubusercontent.com/31664059/69680816-e8641780-1060-11ea-89ca-336c5534eb16.png">
Differential Revision: D18770069
Pulled By: hramos
fbshipit-source-id: 1a8647931818360b9912dc6fb50c339a91b9d4ea
Summary:
Originally, normalizeColor.js was in Library/Color/ however, I noticed that its tests were in a completely different directly (Library/StyleSheet/__tests__) which was confusing. The other files such as processColor.js, setNormalizedAlphaColor.js had their tests in Library/StyleSheet/__tests__ as well.
## Changelog
[Internal] [Changed] - Moved normalizeColor.js to a more appropriate directory where its tests live.
Pull Request resolved: https://github.com/facebook/react-native/pull/27372
Test Plan: I simply moved a file and changed dependencies. The code should still function as is.
Reviewed By: rickhanlonii, mdvacca
Differential Revision: D18760210
Pulled By: yungsters
fbshipit-source-id: 4c2400acabab35ccbb2533faa5c1d6487c9bf48e
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
Summary:
Without `transform` in `OUTER_PROPS`, the refresh control component would not include `transform: {scaleY: -1}` in its style and so pulling down, rather than up, on a scroll view would trigger a refresh.
Fixes https://github.com/facebook/react-native/issues/26181
## Changelog
[Android] [Fixed] - Fixed issue with refresh control not working properly on an inverted ScrollView
Pull Request resolved: https://github.com/facebook/react-native/pull/26611
Test Plan: Updated unit test in splitLayoutProps-test.js.
Differential Revision: D17661079
Pulled By: cpojer
fbshipit-source-id: 747da27b11c3ca59b7f639f393ae5ac137f5490a
Summary: Export font weight type to use in typing
Reviewed By: panagosg7
Differential Revision: D17128236
fbshipit-source-id: baf9d5e5c5fa0b8aad4cf29ea94430adfe1e8b5f
Summary:
This pull request moves `Text`'s prop types to the `DeprecatedPropTypes` folder.
This was already partly in progress - there were redundant `TextPropTypes` and `DeprecatedTextPropTypes` files so I removed one, and made sure the version with the doc strings was the one used.
## Changelog
[General] [Deprecated] - Move `Text` component's proptypes to DeprecatedPropTypes
Pull Request resolved: https://github.com/facebook/react-native/pull/26055
Test Plan: Flow checks pass for iOS and Android
Differential Revision: D16801078
Pulled By: TheSavior
fbshipit-source-id: ef19300945d48d0a4a83d728ee32cdf7d1c0f0cc
Summary:
Fixes#22752
On line 1021 you are passing base style to props:
`style: [baseStyle, this.props.style],`
Explicitly passing base style to ScrollView just overrides this line and doesn't let developers to customise style of any inheritors of ScrollView (not only FlatList) with custom RefreshControl.
So this line (1113) seems to be removed.
## Changelog
[GENERAL] [Fixed] - fix of Android's bug that doesn't let override ScrollView's Style with custom RefreshControl.
Pull Request resolved: https://github.com/facebook/react-native/pull/24411
Differential Revision: D15713061
Pulled By: cpojer
fbshipit-source-id: 461259800f867af15e53e0743a5057ea4528ae69
Summary: This diff adds support for ColorArrayValue in the flow parser
Reviewed By: cpojer
Differential Revision: D15502923
fbshipit-source-id: 6a906b6d609168378fabeb49d0080de011a34d78
Summary:
This diff initializes the codegen flow parser using a proposal for some new syntaxes in flow file to handle missing information like:
- Float vs Int32
- Bubbling Events vs Direct Events
- Default props
- Codegen options
- Specifying the component name
For a deep dive on the proposal see: https://fb.quip.com/kPYJAjCHxlgO
Note: there are still some todos to follow up with:
- Array props
- Enum props
- Object event arguments
Note also: the parser code is a little rough, I didn't want spend too much time cleaning it up before we agreed on the format
[General][Added] Add codegen flow parser
Reviewed By: cpojer
Differential Revision: D15417733
fbshipit-source-id: dd80887c0b2ac46fdc3da203214775facd204e28
Summary:
This is the next step in moving RN towards standard path-based requires. All the requires in `Libraries` have been rewritten to use relative requires with a few exceptions, namely, `vendor` and `Renderer/oss` since those need to be changed upstream. This commit uses relative requires instead of `react-native/...` so that if Facebook were to stop syncing out certain folders and therefore remove code from the react-native package, internal code at Facebook would not need to change.
See the umbrella issue at https://github.com/facebook/react-native/issues/24316 for more detail.
[General] [Changed] - Migrate "Libraries" from Haste to standard path-based requires
Pull Request resolved: https://github.com/facebook/react-native/pull/24749
Differential Revision: D15258017
Pulled By: cpojer
fbshipit-source-id: a1f480ea36c05c659b6f37c8f02f6f9216d5a323
Summary: We are working to remove additional types and eventually define everything at the top level as a public exported type of react-native. I was able to update callsites by just using ViewStyleProp in places that were expecting a prop of just one of these. It is a little bit weaker, but much simpler. If a callsite wants to only take margin, it should just take a margin prop instead of a LayoutStyle prop.
Reviewed By: rickhanlonii
Differential Revision: D13599460
fbshipit-source-id: 12c01bc58baa7f6acf33e0b8aab05dabb79c646b
Summary: This is one more step to remove `fbjs` from `react-native-github`. This changes both the internal and external code to use `invariant` from zertosh instead of the copy in fbjs.
Reviewed By: yungsters
Differential Revision: D13195941
fbshipit-source-id: 73564ca1715110e7da9c7ef56dc57374d61377e0
Summary:
This regression was caused by 199c918 - property values are initialized to true rather than a string that matches the property name now.
Pull Request resolved: https://github.com/facebook/react-native/pull/22262
Differential Revision: D13048839
Pulled By: hramos
fbshipit-source-id: 09471334c37f3930aae7e35066943f33f8e617e5
Summary:
This PR moves and renames all references of StyleSheetPropType to DeprecatedStyleSheetPropType
Related to #21342
Pull Request resolved: https://github.com/facebook/react-native/pull/21380
Differential Revision: D10098216
Pulled By: TheSavior
fbshipit-source-id: da8d927f87bd37cdabc315e0aa17b6ae208f7124
Summary:
This PR splits EdgeInsetsPropTypes into EdgeInsetsPropTypes with only flow types and DeprecatedEdgeInsetsPropTypes inside DeprecatedProptypes with only PropTypes.
Related to #21342
Pull Request resolved: https://github.com/facebook/react-native/pull/21351
Reviewed By: RSNara
Differential Revision: D10081512
Pulled By: TheSavior
fbshipit-source-id: 267a6fbb455e02dd7f2b0f3b59790e96387eaa09
Summary:
This PR split PointPropType.js into PointPropType.js with Flow definition and Libraries/DeprecatedPointPropType.js remaining with PropTypes definition.
Related to #21342
Pull Request resolved: https://github.com/facebook/react-native/pull/21355
Differential Revision: D10081399
Pulled By: TheSavior
fbshipit-source-id: 2283ff3fbda6b0f525742336f92fd6279250b874
Summary: This change drops the year from the copyright headers and the LICENSE file.
Reviewed By: yungsters
Differential Revision: D9727774
fbshipit-source-id: df4fc1e4390733fe774b1a160dd41b4a3d83302a
Nick Gerleman
Zack Argyle
Tom Underhill
George Zahariev
Michael Bolin
Hans Halverson
Jesse Katsumata
Riley Dulin
Eli White
Nat Mote
Jordan Brown
Freeman Latif
talhaazhar
Isabel B
Andres Suarez
Miguel Alatzar
Samuel Susla
Itamar Ostricher
empyrical
Logan Daniels
Min ho Kim
Пётр Потапов
Rick Hanlon
James Ide
Christoph Nakazawa
Brent Vatne
Sam Goldman
Avik Chaudhuri
Daiki Nishikawa
Thomas Carlson
Dani
Guilherme Varandas
Rafael Nunes G. da Silveira
Tim Yung
Héctor Ramos
