ImageBackground don't show local image in react native + expo

Question

I want to set an background image to my app. When I run expo start the image dosen't show. this its my component:

import React from "react"; import { StyleSheet, Text, View, ImageBackground } from "react-native"; import { Asset } from "expo-asset"; export default function App() { return ( <View style={styles.container}> <ImageBackground source={{ uri: Asset.fromModule(require("./images/background.png")).uri, }} style={styles.image} ></ImageBackground> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: "#fff", alignItems: "center", justifyContent: "center", }, image: { flex: 1, resizeMode: "cover", justifyContent: "center", }, });

what I missed? I appreciate any help

Try using width and height in style image

Nooruddin Lakhani
– Nooruddin Lakhani

2020-11-03 14:26:26 +00:00
Commented Nov 3, 2020 at 14:26 — Nooruddin Lakhani
– Nooruddin Lakhani, Commented Nov 3, 2020 at 14:26

Muhammad Umer Qadri · Accepted Answer · 2020-11-03 14:37:11Z

4

According to the react native documentation:

"Note that you must specify some width and height style attributes."

https://reactnative.dev/docs/imagebackground

answered Nov 3, 2020 at 14:37

Muhammad Umer Qadri

2691 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Muhammad Umer Qadri Over a year ago

Just update your code for styles.image and add width & height property in addition to other style properties

Collectives™ on Stack Overflow

ImageBackground don't show local image in react native + expo

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related