Skip to content

Conversation

@janicduplessis
Copy link
Contributor

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

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.

@facebook-github-bot facebook-github-bot added CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. Contributor A React Native contributor. labels May 29, 2021
@analysis-bot
Copy link

analysis-bot commented May 29, 2021

Platform Engine Arch Size (bytes) Diff
ios - universal n/a --

Base commit: 8ca18f0

@NickGerleman
Copy link
Contributor

This also breaks the integration tests in react-native-windows.

const nativeSwitchRef = React.useRef<?React.ElementRef<
typeof SwitchNativeComponent | typeof AndroidSwitchNativeComponent,
>>(null);
const _setNativeRef = setAndForwardRef({
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can this just be useImperativeHandle(nativeSwitchRef)?

Copy link
Contributor Author

@janicduplessis janicduplessis May 31, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think this would work since nativeSwitchRef is just the internal ref used by this component. We need to set the ref to both nativeSwitchRef and forwarded ref, which is what setAndForwardRef was made for if I understand correctly.

See https://github.com/facebook/react-native/blob/master/Libraries/Utilities/setAndForwardRef.js#L21

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Whoops, my api usage is wrong.

I think this


useImperativeHandle(forwardedRef, () => nativeSwitchRef, [nativeSwitchRef])

setAndForwardRef is needed if the component attaches a bunch of other methods to the ref too. But that doesn't seem to be the case here

Copy link
Contributor Author

@janicduplessis janicduplessis May 31, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Interesting, haven't seen this pattern before, but yea it would work. Seems like it is used here also

useImperativeHandle(forwardedRef, () => viewRef.current);

@facebook-github-bot
Copy link
Contributor

@lunaleaps has imported this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

@facebook-github-bot
Copy link
Contributor

@lunaleaps merged this pull request in 1538fa4.

@facebook-github-bot facebook-github-bot added the Merged This PR has been merged. label Jun 2, 2021
@janicduplessis janicduplessis deleted the switch-ref branch June 2, 2021 21:46
Setito pushed a commit to Setito/react-native that referenced this pull request Jul 17, 2021
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: facebook#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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. Contributor A React Native contributor. Merged This PR has been merged. Needs: React Native Team Attention

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants