Summary:
Added a null check to native.value in Switch to fix regression from RN 66 -> stuck operation in mViewCommandOperations list in Android Release on initial layout of a screen with Switch component. If approved, please incorporate this fix into an RN 66 release.
## Changelog
[Android][Fixed] - Added a null check to native.value in Switch to fix https://github.com/facebook/react-native/issues/32594
Pull Request resolved: https://github.com/facebook/react-native/pull/32602
Test Plan: To reproduce, put a log in UIViewOperationQueue in dispatchViewUpdates you can see that the RetryableMountingException is no longer thrown for a screen with the Switch component on Android Release. As a result, mViewCommandOperations no longer has a stuck operation on initial layout.
Reviewed By: charlesbdudley
Differential Revision: D34397788
Pulled By: lunaleaps
fbshipit-source-id: 1cee3516fb987942dfa50ad1f2d11c965a947f05
Summary:
Changelog:
[Internal] - Replace `useImperativeHandle` usage with new `useMergeRef` which will keep both the forwarded and internal ref handle up to date (in case the instance ever changes). That being said, this change was not motivated in fear of a stale ref but more an intention to show that `useImperativeHandle`'s use case is more about creating a selective API and `useMergeRef` is better suited for publishing ref updates.
Reviewed By: yungsters
Differential Revision: D28950632
fbshipit-source-id: 594afda02693545aab77f24566180c338b58bb8b
Summary:
Since moving Switch to a function component it is no longer possible to get the native switch ref. This adds forwardRef so it is possible again.
## Changelog
[General] [Fixed] - Fix Switch ref forwarding
Pull Request resolved: https://github.com/facebook/react-native/pull/31629
Test Plan: Tested the change in an app using react-native-gesture-handler, which tries to set a ref on Switch. Also made sure flow still passes.
Reviewed By: TheSavior
Differential Revision: D28839605
Pulled By: lunaleaps
fbshipit-source-id: 1fee86145caeabb60c0010bb9062dddca419f7ca
Summary:
Changelog:
[Internal] - Update Switch to allow injected implementations
## General understanding of the component
The main flow of Switch is pretty straightforward, basically passing the props to the respective native component which uses the platform switch views on Android / iOS
The interesting parts of Switch is the fact that it's a controlled component -- meaning that this component sees the JS value prop as the source of truth about the state of this component and any time the native value of the switch is out of sync with the JS value prop, we send a command `setNativeValue` to keep those in sync.
The problems I ran into:
* Keeping native and JS in sync
* Switch skips animation occassionally on iOS simulator
## How we keep native and JS in sync
By construction, the native value of the component should be the same as JS value. Then, we know the native value has changed whenever the callback `handleChange` has been fired.
**Before**
In the handleChange callback, we'd set an [instance variable `lastNativeValue` with the updated value](https://fburl.com/diffusion/nangxzoh) and force update. Then, in `componentDidUpdate`, we'd send the native commands if we determine that `lastNativeValue` and the `value` prop were out of sync.
**After**
For our modern implementation, we store the value of the switch as reported by `handleChange` and check it against the `props.value` of the switch. If they are out of sync then we will update the native switch via the switch command.
**Why is `native` an object?**
We need to run the `useLayoutEffect` every time `handleChange` is called independent of the value of the switch.
**Why not move the logic of dispatching commands to `handleChange`?**?
This would change behavior from old implementation where we would call `onChange` handlers and then re-render. Additionally, the logic to run the native commands were on `componentDidUpdate` which would've run when any prop changed. We can simplify this down to caring only when `props.value` updates.
## Unsolved, existing issue: Switches skip animation occasionally
* This occurs both in the modern and old versions of Switch and I've only seen this on iOS simulators. It occurs most frequently in the "events" example where two switches' values are synced and most often the first transition after we navigate to the example surface. I have not been able to reproduce this behavior on device.
* Something must be triggering a re-render in the middle of native's animation..
{F564595576}
Reviewed By: nadiia, kacieb
Differential Revision: D27381306
fbshipit-source-id: 06d13c6fe1ff181443f4b8dd27fb1ac65e071962
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
Summary:
Our Babel plugin that strips irrelevant platform-specific code does not currently know how to deal with early return statements.
This minor change to a couple call sites enables the output bundle for Android to omit code specific to iOS.
Changelog:
[Internal]
Reviewed By: ejanzer
Differential Revision: D24139922
fbshipit-source-id: 467c0c38dd45679b889a8a94d85f73fd969e5b36
Summary:
Fixes https://github.com/MLH-Fellowship/react-native/issues/60
The PR is part of an effort to update the code comments to match the current documentation on the React Native website. The project is a part of the MLH Fellowship program and involves the automatic generation of the website docs from code comments and flow types as the end result.
To learn more about the project you can visit the project wiki:
- [Project Details](https://github.com/MLH-Fellowship/0.4.x-projects/wiki/React-Native-Flowtype-API-Docs-Generator)
- [RN Docs Standards](https://github.com/MLH-Fellowship/react-native/wiki/RN-Docs-standards)
Link to the documentation(the source of truth):
- [switch.md](https://github.com/MLH-Fellowship/react-native-website/blob/master/docs/switch.md)
## Changes
* Update the title and prop description from docs.
* Remove unnecessary `*` from the code comments.
* Add Snack player example specified in the docs to the code comments as JSDoc.
* Add `type` annotation to parse supported datatype by the prop.
* Add `platform` annotation to specify platforms supported by a prop.
* Add `default` annotation to parse default value of prop.
## Changelog
[Internal]
Pull Request resolved: https://github.com/facebook/react-native/pull/29546
Test Plan:
All changes are made to the code comments and thus there is no need for testing.
Reviewed by jevakallio
Reviewed By: cpojer
Differential Revision: D22921438
Pulled By: motiz88
fbshipit-source-id: eaab1e04252c15d7d3dd18a2b162fa97a4478dd6
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:
Fabric doesn't support setNativeProps, so we are using view commands instead.
Changelog: [Internal]
Reviewed By: JoshuaGross, TheSavior
Differential Revision: D17736672
fbshipit-source-id: bb0eee9330c01751829172bbc03bfd12b1e24cad
Summary:
`accessibilityRole` communicates the purpose of a component to the user of assistive technology. It needs to have the correct value for it to be fully utilized.
Switch component has `accessibilityRole` of a `button` instead of `switch` on default. Change the component default role to `switch`.
## Changelog
[General] [Fixed] - Change default `accessibilityRole` of Switch component from `button` to `switch`
Pull Request resolved: https://github.com/facebook/react-native/pull/26899
Test Plan:
- All unit test passed
- On Switch component, it's supposed to have `switch` like element type on both platform. (`XCUIElementTypeSwitch` on iOS)
fix [https://github.com/facebook/react-native/issues/26873](https://github.com/facebook/react-native/issues/26873)
Reviewed By: yungsters
Differential Revision: D18002755
Pulled By: mdvacca
fbshipit-source-id: 60446f94b23f8355f954805fb4dc08c89d08e492
Summary:
We used to generate the documentation for the website but moved the docs to another repo.
There is some work on the docs to be able to ingest info from this repo in order to go back to generating API information. The current thinking is we will generate this JSON file and the website repo will pull it in to generate the docs.
I plan to make the script run on CI and fail if the generated file isn't updated, in a follow up PR.
Reviewed By: zackargyle
Differential Revision: D17183936
fbshipit-source-id: 99ce3fa5d7becc0ef20df5d439b175eedbe546f3
Summary:
In Windows, if you clicked on a Switch component to toggle it, you could see it "shimmy" back and forth once before settling. The native Switch ends up toggling three times every time it's invoked.
`Switch.js` prevents the native switch from toggling to the new value by explicitly setting the switch to `this.props.value` when it receives an `onChange` event. The re-setting of the value wasn't fast enough to prevent the `Switch` from starting to toggle, causing the visual shimmy.
The solution is taken from `TextInput`. `TextInput.js` stores `_lastNativeText` when it receives an `onChange` event. In `componentDidUpdate`, it puts `this.props.text` back on the native textbox if the value of `this.props.text` isn't the same as `_lastNativeText`, which is how it ensures that it is a controlled component. Porting this to the `Switch` results in only one toggle happening per invoke, removing the shimmy, while preserving the controlled component behavior.
This bug is not visible on Android or iOS, only Windows, however the code causing the bug was in `Switch.js` and it seems reasonable to avoid changing the value of the native switch excessively.
## Changelog
[General] [Fixed] - Fix excessive toggles on the Switch component
Pull Request resolved: https://github.com/facebook/react-native/pull/26496
Test Plan: Used RNTester on Android and iOS to test the Switch component and made sure that all scenarios behave as expected visually. Also ensured through the debugger that the value of the native switch is only being changed once, instead of three times.
Reviewed By: TheSavior
Differential Revision: D17468905
Pulled By: JoshuaGross
fbshipit-source-id: 92bf511510306968c3573ee4eed6df009850fd77
Summary: This diff turns on codegen for Slider and Switch
Reviewed By: TheSavior
Differential Revision: D15738544
fbshipit-source-id: a0dfb5b05fd62f28fc3865855986e49598dd5e19
Summary:
Adds a generated view config for iOS Switch
Note: this required some refactoring because the SwitchNativeComponent file included both iOS and android componets, so I broke them out into:
- AndroidSwitchNativeComponent (not generated)
- SwitchNativeComponent (generated)
The schema that we're using is for the iOS version so that's the config that's generated here
Reviewed By: cpojer
Differential Revision: D15495402
fbshipit-source-id: 07b3bc9c780cbf8f6cbf66e976e15981cefcadfa
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:
There's a bug in the OSS Switch component where the track color value is reset to the default value when the switch is toggled. It looks like the Java class resets the track color value in `setOn` (which fires in a press event): https://fburl.com/vmugfzja but these values aren't actually initialized from JS - in Switch.js we only pass through the current track color: https://fburl.com/vytekd0o.
The React component already has an API for defining both true/false track colors. However, we should also make sure not to reset these values for people using the old API of `tintColor`/`onTintColor`, so I'm changing it to only reset the value when both of those props are null.
Reviewed By: mdvacca
Differential Revision: D14035007
fbshipit-source-id: 12d968076bd47d54deedbfc15b12ff3cd77e2fd0
Summary: On Android, `Switch` does not currently read its role as a "button". This fixes that and makes it consistent with iOS.
Reviewed By: sahrens
Differential Revision: D13136253
fbshipit-source-id: 0de5d54772d204168138cb2af7815cc458f72682
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: Moving out the requireNativeComponent call into a new file. We want this long term for all of our view managers to support codegen of the native side and so we can move the viewConfigs into JS.
Reviewed By: yungsters
Differential Revision: D9191214
fbshipit-source-id: d0bddbb50bb1cf6b5a727d72faf834b007ad9440
Summary: My recent refactor of `Switch` broke `testID` from being passed down to the underlying component. This fixes that.
Reviewed By: TheSavior
Differential Revision: D9127216
fbshipit-source-id: 6d442b1cc19cf9f44cb48faac58e5abe9f36064b
Summary:
Introduces warnings to `Switch` when the deprecated props are being used.
See D9081343 for more details on the specific prop changes.
Reviewed By: blairvanderhoof
Differential Revision: D9081451
fbshipit-source-id: 7f997fc97d316038f0917d2540b982bd9cf34d03
Summary:
Revamps the Switch API with the goal of increasing the pit of success:
- Introduce `trackColor` which encourages callers configuring the color to set colors for both cases.
- Introduce `ios_backgroundColor` which allows customizing the iOS-only background fill color.
- Deprecate `tintColor` because it is not obvious that this is for the `false` case.
- Deprecate `onTintColor` because the prop is named unconventionally like a callback.
- Renamed `thumbTintColor` to `thumbColor`.
This revision also cleans up the `Switch` component in the following ways:
- More precise Flow types for native components.
- Inline iOS-specific style (so that the code gets stripped on Android).
- Minor documentaiton cleanup.
After this commit, all deprecated props will continue working.
Next, I plan to introduce warnings.
Eventually (e.g. in a couple releases), we can drop support for the deprecated props.
Reviewed By: TheSavior
Differential Revision: D9081343
fbshipit-source-id: c5eb949047dd7a0ffa72621839999d38e58cada8
Summary: Switch is a standard component and needs some extra styling of the colors to be used in IG, so I've created a reusable switch component for Instagram React Native and added server snapshot tests with UIDocs for it so it will appear in https://our.intern.facebook.com/intern/uidocs/?docset=rn_iig for more people to use.
Reviewed By: lostatseajoshua
Differential Revision: D9023261
fbshipit-source-id: dd460ca4506e2fc072ed03cca56b4a3c172123bd
Summary:
Bump Prettier to use version 1.13.4
All code changes are caused by running Prettier and should only affect files that have an `format` header.
All other changes caused by yarn.
Reviewed By: ryanmce
Differential Revision: D8251255
fbshipit-source-id: 0b4445c35f1269d72730f2000002a27c1bc35914
Summary:
As we migrate over to static typing solutions for props, we cannot rely on always having `propTypes` available at runtime.
This gets us started on that journey by removing the native prop validation that happens when we require native components.
bypass-lint
Reviewed By: TheSavior
Differential Revision: D7976854
fbshipit-source-id: f3ab579a7f0f8cfb716b0eb7fd4625f8168f3d96
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:
The relevant changes in the PR are to Libraries/StyleSheet/EdgeInsetsPropType.js; the rest are just removals of FlowIgnores.
The definition of the relevant types is [here](https://github.com/facebook/flow/blob/master/lib/react.js#L262-L271).
The long and short of it is that for whatever reason, Flow is unable to realize that `ReactPropsChainableTypeChecker` is a subtype of `ReactPropsCheckType` unless we assert it. Once we explicitly hint this to the typechecker, it realizes that `EdgeInsetsPropType` is indeed a valid React PropType, and stops complaining that it isn't.
Closes https://github.com/facebook/react-native/pull/16437
Differential Revision: D6109742
Pulled By: sahrens
fbshipit-source-id: e4e10720b68c912d0372d810409f389b65d7f4b1
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
Tim Yung
jonathanmos
fabriziobertoglio1987
Andres Suarez
Luna Wei
Janic Duplessis
Micha Reiser
Tim Yung
Aniket Kumar
Zack Argyle
Jesse Katsumata
Eli White
Samuel Susla
Oleksandr Melnykov
Matias Alvin
Ruriko Araki
Logan Daniels
Rick Hanlon
James Ide
Emily Janzer
Radek Czemerys
Héctor Ramos
Trish Saylor
Peter van der Zee
Rubén Norte
Avik Chaudhuri
Sophie Alpert
ashoat
Caleb Meredith
Seth Fitzsimmons
Brian Vaughn