ImageBackground React Native: Guia Completo com Exemplo Prático

ImageBackground é um componente do React Native ideal para definir imagens de fundo com conteúdo sobreposto, como logos e textos. No código fornecido, ele cria uma tela centralizada com fundo de imagem, aproveitando estilos para alinhamento e redimensionamento.​

O que é ImageBackground?

ImageBackground funciona como um contêiner que exibe uma imagem de fundo e permite adicionar elementos filhos (children) sobre ela. Diferente do componente Image simples, ele herda todas as props do Image (como source e resizeMode) e suporta sobreposição de conteúdo, simulando o CSS background-image do web.

No exemplo, ele usa source={require('/assets/fundo-app.png')} para carregar uma imagem local e resizeMode: 'cover' para ajustá-la sem distorção, cobrindo toda a área disponível.​

Análise do Código Base

➡️ Link do Código base

O componente ImagemFundo monta uma tela flexível com fundo de imagem, logo e textos de contato centralizados:

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

export default function ImagemFundo() {
  return (
    <View style={estilos.caixa}>
      <ImageBackground source={require('/assets/fundo-app.png')} style={estilos.fundo}>
        <Image source={require('/assets/logo-senai.png')} style={estilos.logo} />
        <Text style={estilos.link}>suzano.sp.senai.br</Text>
        <Text style={estilos.telefone}>11 - 4743-3513</Text>
      </ImageBackground>
    </View>
  );
}

const estilos = StyleSheet.create({
  telefone: {
    fontSize: 16,
    color: 'gray',
  },
  link: {
    color: 'lightgray',
    fontSize: 20,
    textAlign: 'center',
  },
  caixa: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  logo: {
    width: 300,
    height: 100,
  },
  fundo: {
    flex: 1,
    justifyContent: 'center',  // Alinha verticalmente
    alignItems: 'center',      // Alinha horizontalmente
    resizeMode: 'cover',       // Ajusta imagem sem distorção
  },
});

Aqui, estilos.caixa ocupa a tela toda (flex: 1), enquanto estilos.fundo gerencia o ImageBackground com centralização e modo de redimensionamento.​

Principais Props e Estilos

• source: Caminho da imagem (local com require ou remota via URI). Exemplo: source={{ uri: 'https://exemplo.com/imagem.jpg' }}.​
• resizeMode: Controla o ajuste da imagem (‘cover’ preserva proporção cobrindo tudo; ‘contain’ mostra inteira; ‘stretch’ distorce).​​
• style: Aplica ao contêiner View (flex, justifyContent, alignItems para posicionar filhos).​
• imageStyle: Estiliza só a imagem interna (ex: bordas ou opacidade).​

Dicas para Uso Avançado

Adicione opacidade com imageStyle={{ opacity: 0.7 }} para textos mais legíveis sobre imagens claras. Para blur, combine com bibliotecas como @react-native-community/blur, mas teste em dispositivos reais pois emuladores variam.​​

Use em telas de login ou splash para impacto visual, sempre otimizando imagens (reduza para <1MB via ferramentas como TinyPNG)