?️ ImageBackground in React Native

? Quick Overview

ImageBackground is a built-in React Native component that allows you to display an image as a background while rendering child components on top of it. It is commonly used for hero sections, banners, profile headers, and card layouts.

? Key Concepts

• Uses ImageBackground component
• Supports nested views and text
• Responsive image scaling
• Works on Android and iOS

? Syntax / Theory

The ImageBackground component wraps content and renders it above an image source. Styling is applied using standard React Native styles.

// Basic ImageBackground syntax
<ImageBackground source={imageSource} style={styles.container}>
  <Text>Overlay Content</Text>
</ImageBackground>

? Code Example

// Complete ImageBackground component example
import { View, Text, StyleSheet, ImageBackground } from "react-native";

export default function App() {
  return (
    <ImageBackground
      source={{ uri: "https://images.unsplash.com/photo-1500530855697-b586d89ba3ee" }}
      style={styles.background}
    >
      <Text style={styles.text}>Mountain View</Text>
    </ImageBackground>
  );
}

const styles = StyleSheet.create({
  background: {
    flex: 1,
    justifyContent: "flex-end",
    padding: 20
  },
  text: {
    color: "#ffffff",
    fontSize: 24,
    fontWeight: "bold"
  }
});

? Live Output / Explanation

? Interactive Example

Simulate how React Native styles affect the ImageBackground children. Adjust the props below to see how content is positioned over the image.

? Use Cases

• Hero sections in mobile apps
• User profile headers
• Onboarding screens
• Promotional banners