Expo环境使用RadioButton包报错：Invariant Violation: View config not found for name div

Hey there, let’s work through this frustrating error you’re seeing when trying to use a RadioButton package in Expo—both on snack.expo.io and your Android client. This error almost always boils down to React Native trying to render a web-specific HTML element (like <div>) that it doesn’t recognize, so let’s break down the fixes step by step:

1. Verify Your RadioButton Package is React Native-Compatible #

Most UI libraries split their components into web (React DOM) and React Native versions. If you installed a RadioButton package built for the web, it’s definitely going to use <div> tags under the hood, which React Native can’t parse.

Swap out your current package for a React Native-specific alternative. Here are some reliable options:

• @react-native-community/radio-button: The standard community-maintained RadioButton component
• react-native-paper: Material Design components including a fully functional RadioButton
• react-native-element-dropdown: Includes RadioButton components with custom styling options

To install one of these (using the community package as an example):

# Uninstall your incompatible web-focused package first
npm uninstall [your-current-radio-button-package]

# Install the React Native community RadioButton
npm install @react-native-community/radio-button

2. Scan Your Code for Stray <div> Tags #

Check both your App.js and UCI.js files for any accidental use of web HTML elements. It’s easy to copy-paste web code and forget to swap <div> for React Native’s <View> component.

Example Fix: #

// ❌ Wrong (web-only)
<div style={{ margin: 10 }}>
  <Text>Select an option</Text>
</div>

// ✅ Correct (React Native)
import { View, Text } from 'react-native';

<View style={{ margin: 10 }}>
  <Text>Select an option</Text>
</View>

Do a full search for the string div in your files to catch every instance.

3. Clear Expo Cache and Restart #

Cached old component definitions can sometimes cause this error to stick around, even after you fix the root issue.

• On snack.expo.io: Refresh the page entirely, or use the "Restart" button in the snack toolbar.
• On your Android client: Close the Expo app completely, then reopen it. You can also clear the app’s cache through your Android device’s settings (Settings > Apps > Expo > Storage > Clear Cache).
• For local Expo projects: Run this command to clear the cache and restart the dev server:

  npx expo start --clear
  

4. Confirm Your Expo Environment is Set to Native #

If you’re testing on snack.expo.io, make sure you’re not accidentally using the web environment. Look for the environment selector in the top-right corner of the snack interface—switch it to "Android" (or "iOS") instead of "Web".

Start with checking your RadioButton package compatibility—that’s the most likely cause. Then clean up any stray web elements, clear your cache, and verify your environment. You should be up and running with working RadioButtons in no time!

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