What is the Image component in React Native?
Answer
The Image component displays images from local files, network URLs, or base64 data. Local images (bundled with app): import { Image } from "react-native"; <Image source={require("./assets/logo.png")} style={{ width: 100, height: 100 }} />. Metro automatically handles @2x and @3x variants (logo.png, logo@2x.png, logo@3x.png). Network images: must specify width and height (can't infer from server): <Image source={{ uri: "https://picsum.photos/200" }} style={{ width: 200, height: 200 }} />. resizeMode: how image fills the given dimensions: cover (fill, may crop), contain (fit, may letterbox), stretch (stretch to fill), repeat (tile), center (center without scaling): <Image source={...} style={{ width: 200, height: 200 }} resizeMode="cover" />. Caching: network images are cached by React Native. onLoad/onError: <Image source={{ uri }} onLoad={() => setLoading(false)} onError={() => setError(true)} onLoadStart={() => setLoading(true)} />. FastImage (react-native-fast-image): popular third-party replacement. Better caching (LRU cache), priority queuing, resizing on native side. Background images: use ImageBackground: <ImageBackground source={bg} style={{ flex: 1 }}> <Text>Overlay text</Text> </ImageBackground>. SVG: use react-native-svg — Image component doesn't natively support SVG.