Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix StrictMode warnings #22186

Open
brunolemos opened this issue Nov 6, 2018 · 8 comments
Open

Fix StrictMode warnings #22186

brunolemos opened this issue Nov 6, 2018 · 8 comments
Labels
Bug Help Wanted :octocat: Issues ideal for external contributors.

Comments

@brunolemos
Copy link
Contributor

brunolemos commented Nov 6, 2018

Description

When wrapping the app with <StrictMode>, there are warnings coming from internal react native components. They need to be updated to stop using the legacy context api and unsafe methods like UNSAFE_componentWillReceiveProps.

Also, I believe this is a prerequisite for Concurrent Mode support.

Environment

Environment

React Native Environment Info:
System:
OS: macOS 10.14
CPU: x64 Intel(R) Core(TM) i5-6267U CPU @ 2.90GHz
Memory: 33.30 MB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 8.11.4 - /usr/local/bin/node
Yarn: 1.10.1 - ~/.yarn/bin/yarn
npm: 6.4.1 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
Android SDK:
Build Tools: 23.0.1, 23.0.3, 24.0.3, 25.0.0, 25.0.1, 25.0.2, 25.0.3, 26.0.0, 26.0.1, 26.0.2, 26.0.3, 27.0.0, 27.0.1, 27.0.2, 27.0.3, 28.0.0, 28.0.2, 28.0.3
API Levels: 19, 22, 23, 24, 25, 26, 27, 28
IDEs:
Android Studio: 3.2 AI-181.5540.7.32.5014246
Xcode: 10.1/10B61 - /usr/bin/xcodebuild
npmGlobalPackages:
react-native-cli: 2.0.1

@hramos hramos removed the Bug Report label Feb 6, 2019
@kelset kelset added Good first issue Interested in collaborating? Take a stab at fixing one of these issues. Help Wanted :octocat: Issues ideal for external contributors. labels Mar 29, 2019
@Jyrno42
Copy link
Contributor

Jyrno42 commented Mar 29, 2019

Will be working on this over the weekend.

Jyrno42 added a commit to Jyrno42/react-native that referenced this issue Mar 30, 2019
Converts ScrollView to use constructor instead of UNSAFE_componentWillMount and componentDidUpdate
instead of UNSAFE_componentWillReceiveProps.

Related to facebook#22186
Jyrno42 added a commit to Jyrno42/react-native that referenced this issue Mar 30, 2019
Convert all Touchables to be class based and remove UNSAFE props. Also renamed
Touchable.Mixin.withoutDefaultFocusAndBlur to Touchable.MixinWithoutDefaultFocusAndBlur
to improve flow automatic typings.

Note: TouchableNativeFeedback uses ReactNative.findNodeHandle which triggers a
warning in strict mode during a tap. I could not figure out how to remove it yet.

Related to facebook#22186
Jyrno42 added a commit to Jyrno42/react-native that referenced this issue Mar 30, 2019
Convert all Touchables to be class based and remove UNSAFE props. Also renamed
Touchable.Mixin.withoutDefaultFocusAndBlur to Touchable.MixinWithoutDefaultFocusAndBlur
to improve flow automatic typings.

Note: TouchableNativeFeedback uses ReactNative.findNodeHandle which triggers a
warning in strict mode during a tap. I could not figure out how to remove the need for
that call.

Related to facebook#22186
Jyrno42 added a commit to Jyrno42/react-native that referenced this issue Mar 30, 2019
Convert all Touchables to be class based and remove UNSAFE props. Also renamed
Touchable.Mixin.withoutDefaultFocusAndBlur to Touchable.MixinWithoutDefaultFocusAndBlur
to improve flow automatic typings.

Note: TouchableNativeFeedback uses ReactNative.findNodeHandle which triggers a
warning in strict mode during a tap. I could not figure out how to remove the need for
that call.

Related to facebook#22186
Jyrno42 added a commit to Jyrno42/react-native that referenced this issue Mar 30, 2019
Convert all Touchables to be class based and remove UNSAFE props. Also renamed
Touchable.Mixin.withoutDefaultFocusAndBlur to Touchable.MixinWithoutDefaultFocusAndBlur
to improve flow automatic typings.

Note: TouchableNativeFeedback uses ReactNative.findNodeHandle which triggers a
warning in strict mode during a tap. I could not figure out how to remove the need for
that call.

Related to facebook#22186
Jyrno42 added a commit to Jyrno42/react-native that referenced this issue Mar 30, 2019
Convert all Touchables to be class based and remove UNSAFE props. Also renamed
Touchable.Mixin.withoutDefaultFocusAndBlur to Touchable.MixinWithoutDefaultFocusAndBlur
to improve flow automatic typings.

Note: TouchableNativeFeedback uses ReactNative.findNodeHandle which triggers a
warning in strict mode during a tap. I could not figure out how to remove the need for
that call.

Related to facebook#22186
Jyrno42 added a commit to Jyrno42/react-native that referenced this issue Mar 30, 2019
Convert all Touchables to be class based and remove UNSAFE props. Also renamed
Touchable.Mixin.withoutDefaultFocusAndBlur to Touchable.MixinWithoutDefaultFocusAndBlur
to improve flow automatic typings.

Note: TouchableNativeFeedback uses ReactNative.findNodeHandle which triggers a
warning in strict mode during a tap. I could not figure out how to remove the need for
that call.

Related to facebook#22186
@Jyrno42
Copy link
Contributor

Jyrno42 commented Mar 30, 2019

Opened two PRs for ScrollView and AnimatedComponents/Touchables:

@ConnorSBrady
Copy link

@Jyrno42 I see this is marked as help wanted. A few friends and I, Computer Science students, would love to help with this issue. Please let us know!

@Jyrno42
Copy link
Contributor

Jyrno42 commented Apr 5, 2019

@ConnorSBrady Feel free to grab the ScrollView/VirtualizedList - I am currently only working on createAnimatedComponent.

@renchap
Copy link
Contributor

renchap commented Jul 16, 2022

This is still valid, at least those 2 internal components are using unsafe callbacks:

  • AnimatedComponent
  • ScrollViewStickyHeader

It looks like ScrollViewStickyHeader was converted to a function component at some point, but this has been reverted and I am not sure why.

@obasille
Copy link

Found another one:

findHostInstance_DEPRECATED was passed an instance of TouchableNativeFeedback

Indeeded findHostInstance_DEPRECATED is imported and used in TouchableNativeFeedback.js

@sammy-SC
Copy link
Contributor

sammy-SC commented Nov 3, 2022

AnimatedComponent and ScrollViewStickyHeader are now StrictMode compatible.

AnimatedComponent resolved by 5e863fc
ScrollViewStickyHeader resolved by 925e81a

@AdityaVandan
Copy link

@sammy-SC I am still getting warnings while using animated component in my react-native app while in StrictMode
react-native: 0.70.7
react: 18.1.0
Simulator Screenshot - Rippling iPhone 14 - 2023-07-05 at 20 00 16

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Bug Help Wanted :octocat: Issues ideal for external contributors.
Projects
None yet
Development

No branches or pull requests