R
Rishtaara
React Native Fundamentals
Lesson 17 of 20Article12 min

Images, Icons & Assets

Bundle static images with require() — Metro includes them in the build. Remote images use uri but need explicit width/height. Use vector icons (@expo/vector-icons or react-native-vector-icons) for crisp icons at any size.

Working with media

Bundle static images with require() — Metro includes them in the build. Remote images use uri but need explicit width/height. Use vector icons (@expo/vector-icons or react-native-vector-icons) for crisp icons at any size.

Local and remote images
// Local — width/height optional (Metro knows dimensions)
<Image source={require("./assets/logo.png")} />

// Remote — always set dimensions
<Image
  source={{ uri: "https://example.com/photo.jpg" }}
  style={{ width: 300, height: 200 }}
  resizeMode="cover"
/>

// Vector icon
import { Ionicons } from "@expo/vector-icons";
<Ionicons name="home" size={24} color="#06b6d4" />