Problema para renderizar a imagem pomodoro.png no app Fokus

Olá, Jazon. Como vai?

Esse é um problema muito comum quando começamos a trabalhar com imagens no React Native! O comportamento padrão do componente <Image> é tentar renderizar a imagem em seu tamanho original ou esticar para ocupar o container pai, caso as dimensões não estejam explicitamente definidas. Como a imagem do Figma costuma ter uma resolução alta, ela acaba dominando a tela inteira.

Para resolver isso e fazer com que a imagem se ajuste perfeitamente ao layout do seu app Fokus, você precisa definir o tamanho do componente e controlar como a imagem se comporta dentro desse espaço.

Aqui estão os passos e as boas práticas para corrigir isso:

1. Definir largura (width) e altura (height)

No React Native, é obrigatório passar as dimensões para imagens locais (com require) se quisermos controlar seu tamanho. Você pode fazer isso direto na propriedade style:

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

export default function App() {
  return (
    <View style={styles.container}>
      <Image 
        source={require('./assets/pomodoro.png')} // Verifique o caminho correto do seu arquivo
        style={styles.pomodoroImage} 
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  pomodoroImage: {
    width: 250,  // Defina a largura ideal para a tela
    height: 250, // Defina a altura proporcional
    resizeMode: 'contain', // Propriedade crucial!
  },
});

2. Utilizar a propriedade resizeMode

Além de definir o tamanho no styles, a propriedade resizeMode dita como a imagem vai se redesenhar dentro daquela caixa de tamanho que você estipulou. No arquivo StyleSheet acima, usei o valor 'contain'. Entenda a diferença:

• contain: Redimensiona a imagem uniformemente para que ela caiba inteira dentro do tamanho definido, sem cortar nenhuma parte e mantendo a proporção original. É a mais recomendada para ícones e ilustrações como o tomate do Pomodoro.
• cover: Preenche toda a área do tamanho definido. Se a proporção da imagem for diferente da caixa, ela vai cortar as bordas. É excelente para fotos de fundo (backgrounds).
• stretch: Estica ou esmaga a imagem para preencher o tamanho exato, o que pode deixar o seu desenho distorcido.

Dica extra sobre o Figma

Se você preferir usar a imagem oficial do projeto original em vez de renomear a outra, você pode voltar ao Figma, selecionar especificamente a camada da imagem do cronômetro/pomodoro, ir até a aba Export no menu lateral direito, garantir que o formato está em PNG e clicar em Export [Nome da Imagem]. Assim você garante que terá o arquivo correto com o fundo transparente.

Ajustando a largura, altura e aplicando o resizeMode: 'contain', sua imagem vai voltar para o tamanho correto e o layout do Fokus ficará alinhado.

Espero que possa ter lhe ajudado!