ImageBackground
Important: The Vega SDK supports many of the React Native version 0.72 components and APIs. You can use the supported components and APIs in the same manner as an ordinary React Native app. This page lists a specific React Native feature supported by the Vega SDK and contains React Native v72 documentation from the reactnative.dev website created by Meta and other contributors and licensed under the Attribution 4.0 International License. For more information about React Native v72, see the React Native documentation, version 0.72. For the most current feature information, see the Release Notes.
A common feature request from developers familiar with the web is background-image. To handle this use case, you can use the <ImageBackground> component, which has the same props as <Image>, and add whatever children to it you would like to layer on top of it.
You might not want to use <ImageBackground> in some cases, since the implementation is basic. Refer to <ImageBackground>'s source code for more insight, and create your own custom component when needed.
Note that you must specify some width and height style attributes.
Example
import React from 'react';
import {ImageBackground, StyleSheet, Text, View} from 'react-native';
const image = {uri: 'https://legacy.reactjs.org/logo-og.png'};
const App = () => (
<View style={styles.container}>
<ImageBackground source={image} resizeMode="cover" style={styles.image}>
<Text style={styles.text}>Inside</Text>
</ImageBackground>
</View>
);
const styles = StyleSheet.create({
container: {
flex: 1,
},
image: {
flex: 1,
justifyContent: 'center',
},
text: {
color: 'white',
fontSize: 42,
lineHeight: 84,
fontWeight: 'bold',
textAlign: 'center',
backgroundColor: '#000000c0',
},
});
export default App;
Reference
Props
Image Props
Inherits Image Props.
style
| Type |
|---|
| View Style |
Last updated: Sep 30, 2025
