Sometimes, we want to use ImageBackground to set background image for screen in React Native.

In this article, we’ll look at how to use ImageBackground to set background image for screen in React Native.

How to use ImageBackground to set background image for screen in React Native?

To use ImageBackground to set background image for screen in React Native, we can set the width and height of the background image.

For instance, we write:

import * as React from 'react';
import { ImageBackground, View, Text } from 'react-native';
import Constants from 'expo-constants';
import { Card } from 'react-native-paper';

export default function App() {
  return (
    <ImageBackground
      source={{ uri: 'https://picsum.photos/200/300' }}
      style={{ width: '100%', height: '100%' }}>
      <View>
        <Text>hello</Text>
      </View>
    </ImageBackground>
  );
}

to set the ImageBackground to 100% width and height to make the background image fill the screen.

Conclusion

To use ImageBackground to set background image for screen in React Native, we can set the width and height of the background image.