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.

Sign up for GitHub

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

Jump to bottom

Fix StrictMode warnings #22186

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

Fix StrictMode warnings #22186

brunolemos opened this issue Nov 6, 2018 · 9 comments
Assignees
@mateoguzmana
Labels
Bug Help Wanted :octocat: Issues ideal for external contributors. Resolution: PR Submitted A pull request with a fix has been provided.

Comments

@brunolemos
Copy link
Contributor

brunolemos commented Nov 6, 2018 •
edited
Loading

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
@brunolemos brunolemos mentioned this issue Nov 6, 2018
Closed
brunolemos added a commit to devhubapp/devhub that referenced this issue Nov 10, 2018
@brunolemos
Disable StrictMode again while react-native doesnt support it
b0f0fa7 
facebook/react-native#22186
@hramos hramos removed the Bug Report label Feb 6, 2019
@cpojer cpojer mentioned this issue Mar 19, 2019
Closed
@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
@Jyrno42
Make ScrollView StrictMode compatible
2550ad8 
Converts ScrollView to use constructor instead of UNSAFE_componentWillMount and componentDidUpdate
instead of UNSAFE_componentWillReceiveProps.

Related to facebook#22186
@Jyrno42 Jyrno42 mentioned this issue Mar 30, 2019
Closed
Jyrno42 added a commit to Jyrno42/react-native that referenced this issue Mar 30, 2019
@Jyrno42
WIP: Make Touchables strict mode compatible
ecbdf69 
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
@Jyrno42
Make Touchables strict mode compatible
aedfcb6 
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
@Jyrno42
Make AnimatedComponents and Touchables strict mode compatible
6b09f0e 
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 Jyrno42 mentioned this issue Mar 30, 2019
Closed
Jyrno42 added a commit to Jyrno42/react-native that referenced this issue Mar 30, 2019
@Jyrno42
Make AnimatedComponents and Touchables strict mode compatible
386dc80 
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
@Jyrno42
Make AnimatedComponents and Touchables strict mode compatible
0215319 
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
@Jyrno42
Make AnimatedComponents and Touchables strict mode compatible
4b0c955 
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 Jyrno42 mentioned this issue Apr 5, 2019
Closed
@Jyrno42
Copy link
Contributor

Jyrno42 commented Apr 5, 2019

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

@cpojer cpojer removed the Good first issue Interested in collaborating? Take a stab at fixing one of these issues. label May 9, 2019
@brunolemos brunolemos mentioned this issue Jun 29, 2019
Closed
@renchap
Copy link
Contributor

renchap commented Jul 16, 2022 •
edited
Loading

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

@mateoguzmana mateoguzmana mentioned this issue Jan 7, 2025
Open
This was referenced Jan 11, 2025
Closed
Closed
@mateoguzmana
Copy link
Contributor

I exhaustively checked all examples we have in the RNTester app by wrapping it with StrictMode and only found one component that was still non-strict mode compatible. It might be fixed in #48522, if that lands, I think we can close this issue until it gets reported again with specific cases as there seem to be none left.

@cortinico cortinico added the Resolution: PR Submitted A pull request with a fix has been provided. label Jan 13, 2025
facebook-github-bot pushed a commit that referenced this issue Jan 13, 2025
@mateoguzmana @facebook-github-bot
Fix RNTester strict mode warnings (#48620)
cc4e4c7 
Summary:
Follow up from #48619. While investigating #22186, some false positives showed up as some of the examples also have non-strict mode compatible code.

In this PR: Converting from class to functional components some `AnExApp` examples that were using `UNSAFE_` lifecycles.

## Changelog:

[INTERNAL] - Fix RNTester strict mode warnings for AnExApp examples

Pull Request resolved: #48620

Test Plan:
- Wrapped the the entry app component in `RNTesterAppShared.js` with `StrictMode` and verified that no warnings are shown anymore for the updated components.
- Checked the examples are still working as they were.

Reviewed By: rshest

Differential Revision: D68092958

Pulled By: cipolleschi

fbshipit-source-id: 0f2cea3c679f8db0f13054e2851a73dc23a4c906
facebook-github-bot pushed a commit that referenced this issue Jan 13, 2025
@mateoguzmana @facebook-github-bot
Fix RNTester strict mode warnings (#48619)
d4407d6 
Summary:
While investigating #22186, some false positives showed up as some of the examples also have non-strict mode compatible code.

In this PR:

- Converting from class to functional components some TextInput and Image examples that were using `UNSAFE_` lifecycles.
- Unifying the auto-expanding example as it was exactly the same for iOS and Android.

## Changelog:

[INTERNAL] - Fix RNTester strict mode warnings for TextInput and Image examples

Pull Request resolved: #48619

Test Plan:
- Wrapped the the entry app component in `RNTesterAppShared.js` with `StrictMode` and verified that no warnings are shown anymore for the updated components.
- Checked the examples are still working as they were.

Reviewed By: fabriziocucci

Differential Revision: D68094402

Pulled By: rshest

fbshipit-source-id: e13878cb290735095afaef3d0377fd6dab33c380
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@mateoguzmana mateoguzmana

Labels
Bug Help Wanted :octocat: Issues ideal for external contributors. Resolution: PR Submitted A pull request with a fix has been provided.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests