Background Image

Continuando o assunto de imagens, vamos ver agora como colocar uma imagem de fundo no seu aplicativo.

Inserindo imagem de fundo

Para inserir uma imagem de fundo, utilizaremos um código simples que pode ser copiado abaixo:

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.grande}>Olá</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  grande: {
    fontSize: 50
  }
});

De posse desse código, adicionaremos uma imagem de fundo que pode ser encontrada na pasta /assets/background.

Para inserir a imagem no fundo, o react native possui um componente denominado de ImageBackground que irá substituir o componente View no código. Esse componente possui a propriedade source que recebe o caminho da imagem.

Após as modificações, seu código deve ficar como se vê abaixo:

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

export default function App() {
  return (
    <ImageBackground source={require('./assets/background/bg.jpg')} style={styles.container}>
      <Text style={styles.grande}>Olá</Text>
    </ImageBackground>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  grande: {
    fontSize: 50
  }
});