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:
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:
These types aren't robust to changes in the React component type. When we refactor requireNativeComponent these will error. This change is forwards compatible.
Changelog:
[Internal] Improve internal type in DrawerLayoutAndroid
Reviewed By: JoshuaGross
Differential Revision: D17561194
fbshipit-source-id: 470289449b4d5b3148692f1945fb720e1e3972eb
Summary:
The types we were using before weren't very strict and it had been on my list to fix this. I *think* this is the right type. With Flow's type first project having these exported types will be necessary anyways so we can just use that for the ref.
Changelog:
[Internal]
Reviewed By: JoshuaGross
Differential Revision: D16930573
fbshipit-source-id: 05c1e097794633a2cefa7384c9d81ab15a63d8af
Summary: The native change to support strings was made in D15912607 on June 21st. Migrating the JS callsites now to start passing strings instead of the constants.
Reviewed By: zackargyle, mdvacca
Differential Revision: D16703569
fbshipit-source-id: cb1d8698df55d2961cde1e2b1fbfcba086a03bb2
Summary:
`codegenNativeCommands` returns an object with functions for each command that has the previous behavior inside the React Renderer, and the new Fabric logic inside of the Fabric React Native Renderer.
Changelog:
[Internal] - Change AndroidDrawerLayoutNativeComponent to use JS codegen for commands
Reviewed By: rickhanlonii
Differential Revision: D16529887
fbshipit-source-id: 24a5307944a7f62e18482d60d26052fea3be2051
Summary:
returning type of Bubbling and Direct Event should be always void of Promise (if async). Other situations shouldn't be permitted.
Reformated all cases when it the function wasn't void.
Reviewed By: rickhanlonii
Differential Revision: D16165962
fbshipit-source-id: 7c1377c3ed4bd54a431a13e5bcda4f7ec0adf4dc
Summary:
Using Ricky's last changes I managed to subscribe for both new and old event name.
Fixed event to proper one for codegen in native code.
Reviewed By: TheSavior
Differential Revision: D16065660
fbshipit-source-id: b5d3762d673a34bbdf5a8e60ff4d51617c8adb81
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:
Per a conversation with TheSavior, in #24538, this adds snapshot tests for all components whose mocks will be addressed in that PR. Shallow and deep snapshots are included.
[General] [Added] - Snapshots
Pull Request resolved: https://github.com/facebook/react-native/pull/24554
Differential Revision: D15062197
Pulled By: cpojer
fbshipit-source-id: 70ddbaa5e6d1d2c0fd1130ab04c458d9c49d0ee8
Summary:
...referencing stale function component limitations
While preparing a short tutorial on the DrawerLayoutAndroid using the v59 RC, I came across a comment that we can update that states refs as being available only in Class components. This updates that with both class and function components.
If we'd rather delete the comment entirely and move both examples to the website, I'm fine with that too. The current docs page doesn't address the imperative API. https://facebook.github.io/react-native/docs/drawerlayoutandroid
[General] [fixed] - Update stale comment to provide both class and functional component ref example for DrawerLayoutAndroid
Pull Request resolved: https://github.com/facebook/react-native/pull/23730
Differential Revision: D14298527
Pulled By: cpojer
fbshipit-source-id: 3e9f0d6ae49588045fd9d924996fe7cff3d6a156
Summary:
Changelog:
----------
[Android] [Changed] - As mentioned in #22990, I have moved native components required by DrawerLayoutAndroid.android.js into separate files and added Flow Typing.
Question
----------
I have two questions.
It is not included in the files mentioned by #22990 [comment](https://github.com/facebook/react-native/issues/22990#issue-399165354). Perhaps we should be adding knowledge of that type to the codegen since it is quite complicated, what do you think TheSavior?
The `Props` type include `renderNavigationView: () => React.Element<any>,` and `children?: React.Node,`. Therefore I added `const React = require('React');` to the file, is it ok?
Pull Request resolved: https://github.com/facebook/react-native/pull/23036
Differential Revision: D13710035
Pulled By: cpojer
fbshipit-source-id: 671423b76c3b443d85e4b63d05d6253dbd33b29c
Summary:
This pull requests converts `DrawerLayoutAndroid` from a `createReactClass`-based component to an ES6 class component, removing its use of `NativeMethodsMixin` and `prop-types` in the process.
Unfortunately this couldn't be moved over to a full `forwardRef` to the native component, because it has the methods `openDrawer` and `closeDrawer` as part of its API, and they can't be called directly on the native component. A `createRef`-based ref to the native component can be accessed from the `nativeRef` property of a `DrawerLayoutAndroid` instance if a native ref is needed.
The Flow types for callbacks have also been filled out.
Pull Request resolved: https://github.com/facebook/react-native/pull/21980
Reviewed By: TheSavior
Differential Revision: D12901951
Pulled By: RSNara
fbshipit-source-id: d35fa5f11b1059f49b466b52abeec902db1d22f7
Summary:
Issue in focus: #22100
The only occurrence of `Object` was replaced with the appropriate flow type
A Lint error was encountered in `deepFreezeAndThrowOnMutationInDev-test.js` when running `npm run lint` and was fixed by running `yarn prettier`
Pull Request resolved: https://github.com/facebook/react-native/pull/22152
Differential Revision: D12930872
Pulled By: RSNara
fbshipit-source-id: f9706ed2e49d9ccedfa331594c886d2d3b615db5
Summary: Replaced each view manager access with a getViewManager() function call. This will later be used to lazily load view manager classes by allowing java to avoid sending the entire list of view managers to JS.
Reviewed By: QueryConnectionException
Differential Revision: D9695788
fbshipit-source-id: 949858aa2f0b0b00b68e260461ba8f1d085cf07f
Summary: This change drops the year from the copyright headers and the LICENSE file.
Reviewed By: yungsters
Differential Revision: D9727774
fbshipit-source-id: df4fc1e4390733fe774b1a160dd41b4a3d83302a
Summary: This diff moves the prop-type definitions for View out into it's own file. We will be able to do this with a bunch of the prop-type definitions and then move them out into a deprecated npm package.
Reviewed By: yungsters
Differential Revision: D9444394
fbshipit-source-id: 4fd0a78533211b598ba2da4eb5015ffcc20bb675
Summary:
This PR removes the need for having the `providesModule` tags in all the modules in the repository.
It configures Flow, Jest and Metro to get the module names from the filenames (`Libraries/Animated/src/nodes/AnimatedInterpolation.js` => `AnimatedInterpolation`)
* Checked the Flow configuration by running flow on the project root (no errors):
```
yarn flow
```
* Checked the Jest configuration by running the tests with a clean cache:
```
yarn jest --clearCache && yarn test
```
* Checked the Metro configuration by starting the server with a clean cache and requesting some bundles:
```
yarn run start --reset-cache
curl 'localhost:8081/IntegrationTests/AccessibilityManagerTest.bundle?platform=android'
curl 'localhost:8081/Libraries/Alert/Alert.bundle?platform=ios'
```
[INTERNAL] [FEATURE] [All] - Removed providesModule from all modules and configured tools.
Closes https://github.com/facebook/react-native/pull/18995
Reviewed By: mjesun
Differential Revision: D7729509
Pulled By: rubennorte
fbshipit-source-id: 892f760a05ce1fddb088ff0cd2e97e521fb8e825
Summary:
Includes React Native and its dependencies Fresco, Metro, and Yoga. Excludes samples/examples/docs.
find: ^(?:( *)|( *(?:[\*~#]|::))( )? *)?Copyright (?:\(c\) )?(\d{4})\b.+Facebook[\s\S]+?BSD[\s\S]+?(?:this source tree|the same directory)\.$
replace: $1$2$3Copyright (c) $4-present, Facebook, Inc.\n$2\n$1$2$3This source code is licensed under the MIT license found in the\n$1$2$3LICENSE file in the root directory of this source tree.
Reviewed By: TheSavior, yungsters
Differential Revision: D7007050
fbshipit-source-id: 37dd6bf0ffec0923bfc99c260bb330683f35553e
Summary:
Currently in the documentation is not clear on how to use the `openDrawer` and `closeDrawer` methods. There is no mention of the requirement to use refs in order to access the Drawer. This should make it clear on how to do the above.
Closes https://github.com/facebook/react-native/pull/13961
Differential Revision: D5479993
Pulled By: hramos
fbshipit-source-id: 4d29f695fbaf097d47f75b345b9998f61156f467
Summary:
This replaces all uses of `React.createClass` with `createReactClass` from the `create-react-class` package, attempting to match use of `var` and `const` according to local style.
Fixes#14620
Refs #14712
Closes https://github.com/facebook/react-native/pull/14729
Differential Revision: D5321810
Pulled By: hramos
fbshipit-source-id: ae7b40640b2773fd89c3fb727ec87f688bebf585
Summary: This removes `node_modules/react` from the list of directories that are used for haste module resolutions. Modules required from React are now imported with `require('react/lib/…')`.
Reviewed By: astreet
Differential Revision: D3509863
fbshipit-source-id: 32cd34e2b8496f0a6676dbe6bb1eacc18124c01e
Summary:The website now displays public methods on components. This was implemented mostly in react-docgen via #66. This adds a <Method> component that is used by the component and API doc pages to display documentation for a method.
It also adds some missing documentation and tweak some existing one to integrate with this feature. I also prefixed some component methods with an '_' so they don't show up in the doc.
**Test plan (required)**
Tested every component page locally to make sure the methods doc was displayed properly.
Tested an API page to make sure it still worked properly.
Closes https://github.com/facebook/react-native/pull/6890
Differential Revision: D3159911
Pulled By: vjeux
fb-gh-sync-id: 1e6a4640cda6794496d9844c1af6a1451c017dcc
fbshipit-source-id: 1e6a4640cda6794496d9844c1af6a1451c017dcc
Summary:Since the React 0.14 split of modules, the findNodeHandle feature is part of the
renderer and not the generic React API.
This just greps for React.findNodeHandle and replace them with ReactNative.findNodeHandle. I fixed up the imports manually.
I also found two callers each of ReactNative.createClass and React.render with the exception of downstream and examples will fix them separately.
I'll need to find more things like `var { PropTypes } = ReactNative;` separately. I think this is a good start though.
Reviewed By: vjeux
Differential Revision: D3149356
fb-gh-sync-id: 50ed60bc67270b16f561d4c641f2f19e85724d3b
fbshipit-source-id: 50ed60bc67270b16f561d4c641f2f19e85724d3b
Summary:The navigation drawer of most apps on android opens over the status bar, this adds an option to do so. It implements a similar API to the native DrawerLayout by adding a statusBarBackgroundColor to DrawerLayoutAndroid.
Without statusBarBackgroundColor:
With statusBarBackgroundColor:
This PR depends on the changes in #6195 to add the `StatusBar.HEIGHT` constant I just want to put it out there now to see if this looks good. To test without the other PR just change `StatusBar.HEIGHT` for `25`.
It is implemented by making the native status bar translucent and making its background color transparent so we can draw a view of the same height as the status bar under it as a child of the DrawerLayoutAndroid. Then we can draw a semi-transparent gray View inside the drawer view to make it
Closes https://github.com/facebook/react-native/pull/6218
Differential Revision: D3017444
Pulled By: bestander
fb-gh-sync-id: ca48a47a20a2feecae360a76f3e2c9bbe6a37700
fbshipit-source-id: ca48a47a20a2feecae360a76f3e2c9bbe6a37700
Summary:It didn't work for a few reason. First, the drawer view NEEDS to have a background color or no shadow will ever render. Second, we need to use the `setDrawerElevation` method instead of `setElevation` for DrawerLayout. Finally we need to actually pass the style value (maybe we could just pass elevation but I don't really think it can cause any issues) down to the native component as it is not the case at the moment.
I also added a default style to elevation of 16 which is the standard for material design according to https://www.google.com/design/spec/patterns/navigation-drawer.html#navigation-drawer-specs. I could also default it to 0 so it keeps the same appearance as before but I think it looks better this way.
Closes#6022
**Test plan**
Tested using the DrawerLayout in the UIExplorer app.
Before, elevation 0
<img width="420" alt="screen shot 2016-02-23 at 1 55 42 am" src="https://cloud.githubusercontent.com/assets/2677334/13244000/008afdb2-d9d1-11e5-95b8-9c345ea0ea8d.png">
After, elevation
Closes https://github.com/facebook/react-native/pull/6100
Reviewed By: bestander
Differential Revision: D3012242
Pulled By: lexs
fb-gh-sync-id: 4967d7ec920f0229d823032ba95c8a3cace329c6
shipit-source-id: 4967d7ec920f0229d823032ba95c8a3cace329c6
Summary: public
RCTUIManager is a public module with several useful methods, however, unlike most such modules, it does not have a JS wrapper that would allow it to be required directly.
Besides making it more cumbersome to use, this also makes it impossible to modify the UIManager API, or smooth over differences between platforms in the JS layer without breaking all of the call sites.
This diff adds a simple JS wrapper file for the UIManager module to make it easier to work with.
Reviewed By: tadeuzagallo
Differential Revision: D2700348
fb-gh-sync-id: dd9030eface100b1baf756da11bae355dc0f266f
Summary: @kmagiera @mkonicek - made a mistake while updating it, removed the `margin` style for some reason on the inner Text (it was 1am, ¯\_(ツ)_/¯). This also makes the example nicer looking - style the navigation with a white background, center the text in the main content view.
Closes https://github.com/facebook/react-native/pull/2682
Reviewed By: @svcscm
Differential Revision: D2454465
Pulled By: @mkonicek
fb-gh-sync-id: 2fa17366b34ae31c490d37791ad693c17ac3f128
Michael Bolin
Tom Underhill
Eli White
Logan Daniels
Michał Osadnik
James Ide
Brandon Carroll
Ryan Stelly
Heinrich Tremblay
Panagiotis Vekris
empyrical
flowkraD
nd-02110114
Andrew Chen (Eng)
Héctor Ramos
Rubén Norte
Sophie Alpert
David Vacca
Isaac Odhiambo
Seth Fitzsimmons
Brian Vaughn
David Aurelio
Tim Yung
Alessandro Nadalin
Jia Rong Lim
Janic Duplessis
Sebastian Markbage
sunnylqm
Andreas Drivenes
Justas Brazauskas
Huang Yu
Nick Lockwood
Krzysztof Magiera
Brent Vatne
alantrrs
