Estoy haciendo un proyecto en React Native y mi componente ImageBackgroud no quiere renderizarse. Lo extraño es que ya estoy usando ImageBackground en otro componente y funciona allí. Intenté cambiar el tamaño de la imagen, pero eso no ayudó.

Aquí está mi componente que representa el componente secundario con ImageBackground:

 const DuringStay = () => { return ( <View style={styles.container}> <FlatList data={test} numColumns={2} columnWrapperStyle={{ justifyContent: 'space-between', marginBottom: 15, }} keyExtractor={item => item.id} renderItem={({ item }) => ( <DuringStayTile item={item} /> )} /> </View> ); }; const styles = StyleSheet.create({ container: { paddingHorizontal: 20, flex: 1, }, }); export default DuringStay;

Aquí está mi componente que no quiere renderizar ImageBackground. Mis datos llegan correctamente al componente y dentro de Pressable puedo renderizar otros componentes pero ImageBackground no aparece

 const DuringStayTile = ({item}) => { const { title, uri } = item; console.log(title,uri) return ( <Pressable style={styles.container}> <ImageBackground source={uri} resizeMode="cover" style={styles.image}> <LinearGradient style={styles.textBox} colors={['transparent','rgba(0,0,0,0.6)']}> <Text> {title} </Text> </LinearGradient> </ImageBackground> </Pressable> ); }; export default DuringStayTile; const styles = StyleSheet.create({ container: { width: '48%', padding: 20, borderRadius: 10, padding:60, backgroundColor:'pink' }, title: { fontWeight: 'bold', fontSize: 16, }, image: { flex: 1, overflow:'hidden', justifyContent:'center' }, textBox:{ position:'absolute', right:0, bottom:0, width:'100%' }, });

Datos que se importan:

 export const test = [ { uri:require('../assets/f1.jpg'), title: 'Zip Line', id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba' }, { uri: require('../assets/during.jpeg'), title: 'Blue Cave', id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63', }, { uri: require('../assets/post.jpg'), title: 'Rafting', id: '58694a0f-3da1-471f-bd96-145571e29d72', } ]