React Native 5.0：如何解决“null is not object(evaluating RNGestureHandlerModule.default.direction”错误

Hey there, let’s fix that frustrating null is not object(evaluating RNGestureHandlerModule.default.direction error you’re facing! This issue almost always stems from react-native-gesture-handler not being properly linked or initialized, even when you’ve followed the official docs to install dependencies. Let’s walk through the fixes step by step:

1. Double-Check Linking (Even with Auto-Link) #

React Native 0.60+ uses auto-linking, but glitches can still happen. Let’s verify and re-link the module for each platform:

For Android #

• Open android/app/src/main/java/com/[your-app-name]/MainApplication.java
• Confirm you have this import at the top:

  import com.swmansion.gesturehandler.react.RNGestureHandlerPackage;
  

• In the getPackages() method, ensure new RNGestureHandlerPackage() is included in the package list (auto-linking should add this, but it never hurts to check!)
• Clean and rebuild your Android project:

  cd android && ./gradlew clean && cd .. && npx react-native run-android
  

For iOS #

• Navigate to your iOS folder and re-install pods (this fixes most linking issues for iOS):

  cd ios && pod install --repo-update && cd .. && npx react-native run-ios
  

• If that fails, open your project’s .xcworkspace in Xcode:
  1. Right-click the Libraries folder > Add Files to [Your Project]
  2. Select node_modules/react-native-gesture-handler/ios/RNGestureHandler.xcodeproj
  3. Go to your project’s Build Phases > Link Binary With Libraries and add libRNGestureHandler.a

2. Add the Critical Initialization Import #

This is the most common fix people miss! You need to import react-native-gesture-handler as the very first line in your root component file (usually App.js or index.js):

import 'react-native-gesture-handler';
// All other imports come AFTER this line
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
// ... rest of your app code

This ensures the gesture handler module is initialized before any other React or React Native code runs.

3. Clean Install Dependencies to Fix Version Mismatches #

Sometimes cached or mismatched packages cause issues. Let’s do a clean reinstall:

rm -rf node_modules && rm package-lock.json && npm install

After this, repeat the pod install step for iOS and clean build for Android.

4. Restart Metro with Cache Reset #

Finally, restart your Metro bundler with a cache reset to ensure no old module data is stuck:

npx react-native start --reset-cache

Then rebuild your app.

In most cases, either the missing initial import or a failed link is the root cause. If none of these steps work, let me know and we can troubleshoot further!

内容的提问来源于stack exchange，提问作者Arun.k