使用Expo开发时react-native-modal在Android端崩溃的解决方法

Hey there! Let's figure out why your react-native-modal is crashing on Android while working perfectly on iOS with Expo. I’ll walk you through the most likely issues and fixes step by step.

First: Fix the Obvious JSX Error in Your Header Component #

Looking at your code snippet, your HeaderComponent has an invalid JSX return statement—you can't render raw text directly without wrapping it in a <Text> component. iOS might tolerate this, but Android is strict about valid JSX nodes, and this is probably a direct cause of the crash.

Update your HeaderComponent to this:

import React from 'react';
import { Text } from 'react-native'; // Don't forget to import the Text component

const HeaderComponent = ({selectLanguageVisible}) => {
  return (
    <Text>Apps Glossary</Text>
  )
}
export default HeaderComponent;

1. Verify Version Compatibility Between react-native-modal and Expo #

Expo has strict environment constraints, so make sure your react-native-modal version matches your Expo SDK version:

• Check your Expo SDK version in package.json under the expo field
• Install a compatible version (for Expo SDK 49+, the latest modal version should work):

npm install react-native-modal@latest
# or with yarn
yarn add react-native-modal@latest

Older versions of the modal library often clash with newer Expo Android runtimes.

2. Adjust Android-Specific Modal Properties #

react-native-modal has several Android-exclusive settings that can cause crashes if misconfigured:

• Avoid setting useNativeDriver={true} for modal animations (Android's native driver has limited support for modal transitions)
• Explicitly define backdrop and layout properties to avoid rendering conflicts:

<Modal
  isVisible={this.state.selectLanguageVisible}
  backdropColor="#000"
  backdropOpacity={0.5}
  avoidKeyboard={true} // Prevents layout issues when the keyboard pops up
  style={{ margin: 0 }} // Fixes unexpected margin issues on Android
>
  {/* Your modal content goes here */}
</Modal>

3. Check Expo Android Configuration in app.json #

In some cases, misconfigured Android settings in your Expo project can cause global crashes that affect the modal:

• Ensure android.permissions includes basic permissions like INTERNET (even if your modal doesn't need it, Expo projects require this)
• Double-check any custom Android configs (like Google Maps API keys) to make sure there are no typos or invalid values

4. Debug to Pinpoint the Exact Issue #

If the above steps don't fix the crash, use Expo's debugging tools to get more details:

• Shake your Android device to open the developer menu
• Select "Debug JS Remotely" to connect to Chrome's dev tools
• Check the console tab for detailed error stacks—this will tell you exactly which line or component is causing the crash

Start with fixing the JSX error first—it's the simplest and most likely culprit!

内容的提问来源于stack exchange，提问作者Sras