Hey there! I've run into this exact issue before—garbled symbols instead of icons on Android usually means the font files aren't being properly bundled or linked with your project. Let's walk through the fixes step by step:

1. Verify Auto-Linking (RN 0.60+) #

If you're using React Native 0.60 or newer, auto-linking should handle most setup automatically, but cache or build issues can break it. Try these steps first:

• Navigate to your project's android folder and run: ./gradlew clean to clear build cache
• Restart Metro with cache reset: Close your current Metro terminal, then run npx react-native start --reset-cache
• Rebuild your Android app: npx react-native run-android

2. Manual Android Configuration (If Auto-Linking Fails) #

Sometimes auto-linking doesn't kick in correctly. Manually add the font configuration to your android/app/build.gradle file:

• Open the file, and inside the android block, add this line:

  apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
  

• After adding, run ./gradlew clean again and rebuild the app with npx react-native run-android

3. Double-Check Your Icon Name #

Your code uses md-body—make sure this is a valid Ionicons icon name. Icon names can change between library versions, so you can verify by checking the Ionicons.js file in your node_modules/react-native-vector-icons directory, or cross-reference with the official Ionicons icon list for your installed version.

4. Confirm Fonts Are Bundled in the APK #

If the icons still show as garbled, check if the Ionicons font is actually being packed into your APK:

• Build a release or debug APK, then unzip it
• Look for the assets/fonts folder—you should see Ionicons.ttf there. If it's missing, your configuration step (step 2) wasn't applied correctly.

To test if your setup works, use this simple test component with a guaranteed valid icon:

import React from 'react';
import {View, StyleSheet} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';

const TestIconComponent = () => {
  return (
    <View style={styles.container}>
      <Icon name="md-heart" color="#ff0000" size={30} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default TestIconComponent;

If none of this works, check if your React Native version is compatible with the react-native-vector-icons version you installed—sometimes newer RN versions require updates to the icon library.

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