Ionicons broken in expo SDK 54 #351
Description
Expected behaviour
Ionicons work and render when being used correctly.
Actual Behaviour
Ionicons are rendering with [?] instead of actual icon.
Repoducing issue
import { View, Text } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
export default function Repro() {
return (
<View style={{ padding: 24 }}>
{/* Should render fine */}
<Ionicons name="ribbon" size={32} />
</View>
);
}//index.js component imports
import 'react-native-gesture-handler';
import { registerRootComponent } from 'expo';
import { Text } from 'react-native';
import App from './App';
import ErrorBoundary from 'react-native-error-boundary';
import ErrorFallbackApp from './src/app/screens/ErrorFallbackApp';
function HeadlessCheck({ isHeadless }) {
if (isHeadless) return <Text style={{ color: 'red' }}>headless</Text>;
return <App />;
}
registerRootComponent(HeadlessCheck);// loading fonts in App.js
...
import { useFonts } from 'expo-font';
...
const [fontsLoaded] = useFonts({ ... }]; // for loading custom fonts found in assets folder
...Envionment
Expo sdk 54
react-native 0.81
latest versions of expo dependencies and others as per migration guide
https://docs.expo.dev/workflow/upgrading-expo-sdk-walkthrough/
Solutions tried
- loadAsync from fonts in App.js
- manual loading Ionicons font in App.js
- adding ionicons entry into useFonts hook in App.js
- specifying ionicons or Ionicons in font family when using <Ionicons ... />
- installing 15.0.0 for @expo/vector-icons instead of latest
- restarting metro server and cache with -c option
- reinstalling
npm i @expo/vector-icons@latest - clean install pods