What is the Image component in React Native?
Why Interviewers Ask This
Foundational questions like this help interviewers calibrate the rest of the interview. A confident, accurate answer signals that you have solid React Native basics — a prerequisite for any developer role.
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.
Pro Tip
Demonstrate both theoretical understanding and practical experience. Say what it is, then give an example of how you actually used it in a React Native codebase.