ImageBackground

The most fundamental component for building a UI.
<View h="$96" w="$96">
<ImageBackground
source={{ uri: "https://legacy.reactjs.org/logo-og.png" }}
style={{ flex: 1, justifyContent: "center" }}
>
<Text
color="$white"
fontSize={42}
lineHeight={84}
fontWeight="$bold"
textAlign="center"
backgroundColor="#000000c0"
>
Inside
</Text>
</ImageBackground>
</View>

Note: You can refer here to learn about default styling of StatusBar component

Import

To use this component in your project, include the following import statement in your file.
import {ImageBackground } from '@gluestack-ui/themed';

Anatomy

The structure provided below can help you identify and understand a badge component's various parts.
export default () => <ImageBackground></ImageBackground>

Props

gluestack-uiImageBackground component is created usingImageBackground component from react-native. It extends all the props supported by React Native ImageBackground, utility props and the props mentioned below.

ImageBackground

Name
Value
Default
children
any
-
Edit this page on GitHub