AppState - Render Error: undefined is not a function

[ShaminiSaravanan]

Description

Xcode Log Details:

This method can cause UI unresponsiveness if invoked on the main thread. Instead, consider waiting for the -locationManagerDidChangeAuthorization: callback and checking authorizationStatus first.

TypeError: undefined is not a function

This error is located at:
in BackgroundLocationScreen (at SceneView.tsx:132)
in StaticContainer
in EnsureSingleNavigator (at SceneView.tsx:124)
in SceneView (at useDescriptors.tsx:217)
in RCTView (at View.js:32)
in View (at DebugContainer.native.tsx:27)
in DebugContainer (at NativeStackView.native.tsx:76)
in MaybeNestedStack (at NativeStackView.native.tsx:247)
in RNSScreen (at createAnimatedComponent.js:225)
in AnimatedComponent (at createAnimatedComponent.js:278)
in AnimatedComponentWrapper (at src/index.native.tsx:260)
in Suspender (at src/index.tsx:40)
in Suspense (at src/index.tsx:39)
in Freeze (at src/index.native.tsx:163)
in DelayedFreeze (at src/index.native.tsx:259)
in InnerScreen (at src/index.native.tsx:422)
in Screen (at NativeStackView.native.tsx:180)
in SceneView (at NativeStackView.native.tsx:299)
in Suspender (at src/index.tsx:40)
in Suspense (at src/index.tsx:39)

Code

In my project for the BackgroundLocationScreen Page, I’ve a block of code as below,

useEffect(() => {
const handleAppStateChange = (nextAppState: string) => {
if (nextAppState === 'active') {
//starts GPS Tracking
}
};
AppState.addEventListener('change', handleAppStateChange);
return () => {
AppState.removeEventListener('change', handleAppStateChange);
};
});

I’m getting error as

React Native Version

0.70.8

Output of npx react-native info

System:
OS: macOS 14.0
CPU: (8) arm64 Apple M1
Memory: 84.92 MB / 16.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 20.5.1 - /opt/homebrew/bin/node
Yarn: 1.22.19 - /opt/homebrew/bin/yarn
npm: 10.1.0 - /opt/homebrew/bin/npm
Watchman: 2023.09.04.00 - /opt/homebrew/bin/watchman
Managers:
CocoaPods: 1.13.0 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 23.0, iOS 17.0, macOS 14.0, tvOS 17.0, watchOS 10.0
Android SDK: Not Found
IDEs:
Android Studio: 2022.3 AI-223.8836.35.2231.10671973
Xcode: 15.0.1/15A507 - /usr/bin/xcodebuild
Languages:
Java: 17.0.8 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 18.1.0 => 18.1.0
react-native: 0.70.8 => 0.70.8
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

Steps to reproduce

After upgrading React Native to version from 0.68.0. to 0.70.8, all screens that utilise App State are encountering a Render Error: "undefined is not a function."

Snack, screenshot, or link to a repository

[github-actions]

⚠️

Newer Version of React Native is Available!

ℹ️

You are on a supported minor version, but it looks like there's a newer patch available - 0.70.14. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

[github-actions]

⚠️	Missing Reproducible Example
ℹ️	We could not detect a reproducible example in your issue report. Please provide either: If your bug is UI related: a Snack If your bug is build/update related: use our Reproducer Template. A reproducer needs to be in a GitHub repository under your username.

[ShaminiSaravanan]

Snack Link: https://snack.expo.dev/@shaminisaravanan/appstate-check

[DylanTet]

Hey @ShaminiSaravanan, does this help? microsoft/react-native-code-push#2385

[shubhamguptadream11]

removeEventListener API is now removed

Try this
const appStateListener = AppState.addListener('change', listenet)
appStateListener.remove()

[ShaminiSaravanan]

Many thanks to @shubhamguptadream11 and @DylanTet
When I used remove() instead of removeEventListener, I was able to fix the problem.