I’m trying to use a remote image in a React Native ImageBackground
component, but I’m getting an error saying Unknown image format
.
I’m not sure why it’s not loading properly.
What causes this error and how can I fix it?
Link: Expo
import {
Text,
SafeAreaView,
StyleSheet,
View,
ImageBackground,
} from 'react-native';
export default function App() {
return (
<SafeAreaView style={styles.container}>
<ImageBackground
source={{
uri: 'https://dramacool.com.tr/wp-content/uploads/2025/03/Fight-for-Beauty-2025.jpg',
}}
onError={(e) => {
console.log(e.nativeEvent.error);
}}
style={{
height: 160,
borderRadius: 4,
overflow: 'hidden',
justifyContent: 'flex-end',
backgroundColor: '#000',
}}>
<View
style={{
flexDirection: 'row',
justifyContent: 'space-between',
}}>
<View style={{ width: '50%' }}>
<Text variant="bodySmall" style={{ color: '#fff' }}>
Title
</Text>
</View>
</View>
</ImageBackground>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
backgroundColor: '#ecf0f1',
padding: 8,
},
});