Image source quebrando a imagem

Fala Thiago, tudo bem ?

Isso deve estar acontecendo por que sua imagem, além de ter tamanhos maiores para largura e altura do que definimos no estilo, não respeita essa proporção tendo mais largura que altura. Lembre-se que definimos no estilo tamanhos para largura e altura iguais a largura da tela do dispositivo, o que faz a imagem formar um quadrado, como no instagram.

Como nossa imagem utilizada no treinamento foi cortada respeitando essa proporção altura x largura - na verdade foi usada uma imagem do instagram da Alura =) - ela automaticamente se ajusta exibindo todo seu conteúdo. Mas como sua imagem tem mais largura que altura ela acaba tendo em parte seu conteúdo omitido. Tente pensar que a largura e altura definidas no estilo na verdade não vão ser aplicadas à imagem propriamente dita, mas ao container que envolve essa imagem (o componente Image). Dessa forma quando a imagem não se adequa automaticamente podemos usar o mecanismo de resizedo próprio componente Image...

<Image source={require('./resources/img/alura.jpg')}
style={{width: width, height: width}} resizeMode="contain"/>

O código acima exemplifica a ideia. O resizeMode contain vai "conter" todo o conteúdo da imagem dentro da área delimitada para o Image. Aí vale um cuidado.. Isso pode fazer sua imagem sofrer distorções.

Outras possibilidades de resize você pode ver na documentação do componente Image.

Espero ter ajudado. Abraço!