0Pricing
React Native Academy · Aula

Exibindo imagens de fontes locais e remotas

Carregue imagens da pasta de recursos e de URLs remotas usando o componente Image, defina resizeMode e exiba marcadores de carregamento.

Exibindo imagens de fontes locais e remotas é uma aula grátis de React Native Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de React Native Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de React Native Academy inclui 4 aulas no total.

Partes desta aula ainda não foram traduzidas e aparecem em inglês.

The Image Component Introduction

The Image component shows photos, icons, and art. Just remember to give it a width and height — without a size it renders as an invisible empty box.

import { Image, View, StyleSheet } from 'react-native';

export default function SimpleImage() {
  return (
    <View style={{ padding: 16 }}>
      <Image
        source={{ uri: 'https://picsum.photos/200/200' }}
        style={styles.image}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  image: {
    width: 200,
    height: 200,
  },
});

Loading Local Images with require()

Show an image from your assets with require() and a fixed path. It gets bundled into your app at build time, so it loads instantly and works offline.

import { Image, StyleSheet } from 'react-native';

export default function LocalImage() {
  return (
    <Image
      source={require('./assets/icon.png')}
      style={styles.logo}
    />
  );
}

const styles = StyleSheet.create({
  logo: {
    width: 100,
    height: 100,
  },
});

// You can also provide @2x and @3x variants:
// assets/icon.png
// assets/icon@2x.png  ← used on 2× screens
// assets/icon@3x.png  ← used on 3× screens

Loading Remote Images from URLs

For an online image, pass a uri object to source. React Native fetches and caches it, but you still set a size, since it cannot know the dimensions yet.

import { Image, StyleSheet } from 'react-native';

export default function RemoteImage() {
  const imageUri = 'https://picsum.photos/seed/react-native/300/200';

  return (
    <Image
      source={{ uri: imageUri }}
      style={styles.photo}
    />
  );
}

const styles = StyleSheet.create({
  photo: {
    width: '100%',   // fill container width
    height: 200,     // fixed height
    borderRadius: 12,
  },
});

resizeMode: Fitting Images in Containers

The resizeMode prop fits an image to its box: "cover" fills and crops, while "contain" shows the whole thing. Use cover for photos, contain for logos.

import { Image, View, Text, StyleSheet } from 'react-native';

export default function ResizeModes() {
  const uri = 'https://picsum.photos/400/300';
  const box = { width: 150, height: 100, borderWidth: 1, borderColor: '#ccc' };

  return (
    <View style={{ flexDirection: 'row', gap: 8, padding: 16 }}>
      <View>
        <Image source={{ uri }} style={[box, { resizeMode: 'cover' }]} />
        <Text>cover</Text>
      </View>
      <View>
        <Image source={{ uri }} style={[box, { resizeMode: 'contain' }]} />
        <Text>contain</Text>
      </View>
    </View>
  );
}

Loading Placeholders and defaultSource

Online images take a moment, so show a placeholder while you wait. Track a loading state and swap in a spinner until the image loads.

import { Image, View, ActivityIndicator, StyleSheet } from 'react-native';
import { useState } from 'react';

export default function ImageWithLoader() {
  const [loading, setLoading] = useState(true);

  return (
    <View style={styles.container}>
      {loading && (
        <ActivityIndicator
          style={StyleSheet.absoluteFill}
          size='large'
          color='#999'
        />
      )}
      <Image
        source={{ uri: 'https://picsum.photos/300/200' }}
        style={styles.image}
        onLoad={() => setLoading(false)}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { width: 300, height: 200, backgroundColor: '#f0f0f0', borderRadius: 12 },
  image: { width: 300, height: 200, borderRadius: 12 },
});

onLoad, onError, and onLoadStart

Image gives you callbacks: onLoadStart, onLoad, and onError. Use onError to show a fallback when a URL is wrong or the network drops.

import { Image, Text, View, StyleSheet } from 'react-native';
import { useState } from 'react';

export default function RobustImage({ uri, fallback }) {
  const [failed, setFailed] = useState(false);

  if (failed) {
    return (
      <View style={styles.fallback}>
        <Text style={{ color: '#999' }}>Image unavailable</Text>
      </View>
    );
  }

  return (
    <Image
      source={{ uri: failed ? null : uri }}
      defaultSource={fallback}
      style={styles.img}
      onError={(e) => {
        console.warn('Image failed:', e.nativeEvent.error);
        setFailed(true);
      }}
    />
  );
}

const styles = StyleSheet.create({
  img: { width: 200, height: 200, borderRadius: 8 },
  fallback: { width: 200, height: 200, backgroundColor: '#eee', alignItems: 'center', justifyContent: 'center', borderRadius: 8 },
});

expo-image for Better Performance

For lots of images, try expo-image — a drop-in replacement with better caching, blurhash placeholders, and far less stutter in long lists.

import { Image } from 'expo-image';

// Install: npx expo install expo-image

export default function ExpoImageExample() {
  return (
    <Image
      source='https://picsum.photos/300/200'
      placeholder='LGF5]+Yk^6#M@-5c,1J5@[or[Q6.'
      contentFit='cover'
      transition={300}
      style={{ width: 300, height: 200, borderRadius: 12 }}
    />
  );
}
// placeholder is a blurhash string — generates a blurry
// color-correct placeholder before the real image loads.

Circular Images and Avatar Patterns

Round avatar? Wrap an Image in a square View, set borderRadius to half its width, and add overflow: hidden to clip it into a perfect circle.

import { Image, View, StyleSheet } from 'react-native';

export default function Avatar({ uri, size = 60 }) {
  const radius = size / 2;
  return (
    <View style={[
      styles.container,
      { width: size, height: size, borderRadius: radius }
    ]}>
      <Image
        source={{ uri }}
        style={{ width: size, height: size }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    overflow: 'hidden',
    backgroundColor: '#e0e0e0', // placeholder while loading
  },
});

Providing Headers for Protected Images

Some images need a login token. Pass headers in the source object and React Native sends them with the request. Never hardcode secrets — read them at runtime.

import { Image } from 'react-native';

export default function ProtectedImage({ token }) {
  return (
    <Image
      source={{
        uri: 'https://api.myapp.com/user/avatar',
        headers: {
          Authorization: 'Bearer ' + token,
          'Cache-Control': 'no-cache',
        },
        // Optional: cache policy
        cache: 'reload',
      }}
      style={{ width: 80, height: 80, borderRadius: 40 }}
    />
  );
}

ImageBackground for Overlaid Content

Want content on top of a photo? ImageBackground works like a View with an image behind it. Give it a size and place children right over the picture.

import { ImageBackground, View, Text, StyleSheet } from 'react-native';

export default function HeroSection() {
  return (
    <ImageBackground
      source={{ uri: 'https://picsum.photos/400/300' }}
      style={styles.hero}
      imageStyle={{ borderRadius: 16 }}
    >
      {/* Content rendered on top of the image */}
      <View style={styles.overlay}>
        <Text style={styles.title}>Discover React Native</Text>
        <Text style={styles.subtitle}>Build mobile apps today</Text>
      </View>
    </ImageBackground>
  );
}

const styles = StyleSheet.create({
  hero: { width: '100%', height: 220, justifyContent: 'flex-end' },
  overlay: { backgroundColor: 'rgba(0,0,0,0.45)', padding: 16, borderBottomLeftRadius: 16, borderBottomRightRadius: 16 },
  title: { color: '#fff', fontSize: 22, fontWeight: 'bold' },
  subtitle: { color: '#ddd', fontSize: 14 },
});

Image Caching and Performance Tips

For smooth scrolling lists, keep image URLs stable, lean on expo-image caching, and prefetch key images before they appear. Goodbye, flicker.

import { Image } from 'react-native';
import { useEffect } from 'react';

// Pre-fetch images before they're needed
function usePrefetchImages(urls) {
  useEffect(() => {
    urls.forEach(url => {
      Image.prefetch(url).catch(() => {
        // ignore prefetch errors
      });
    });
  }, [urls]);
}

// Usage:
const imageUrls = [
  'https://example.com/photo1.jpg',
  'https://example.com/photo2.jpg',
];
usePrefetchImages(imageUrls);

Quick Check

Quick check! See how the Image pieces clicked. 📸

Lesson Recap

Well done! require() loads local images, a uri object loads remote ones, and resizeMode: "cover" fills a box. Next up: building a profile card.

Perguntas Frequentes

A aula “Exibindo imagens de fontes locais e remotas” é grátis?

Sim — o texto completo de “Exibindo imagens de fontes locais e remotas” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de React Native Academy, atualize para CoddyKit PRO. O curso de React Native Academy inclui 4 aulas no total.

O que vou aprender em “Exibindo imagens de fontes locais e remotas”?

Carregue imagens da pasta de recursos e de URLs remotas usando o componente Image, defina resizeMode e exiba marcadores de carregamento. Você pratica React Native Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar React Native Academy?

Nenhuma experiência prévia é necessária. React Native Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.

Quanto tempo leva a aula “Exibindo imagens de fontes locais e remotas”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de React Native Academy?

Sim. Cada aula de React Native Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. O componente View como contêiner
  2. Exibindo texto e estilizando fontes
  3. Exibindo imagens de fontes locais e remotas
  4. Compondo um cartão de perfil simples
← Voltar para React Native Academy