ImageBackground component of React Native explanation with example

Introduction :

This is similar to the Image component. It also takes the same props. The only difference is that this component is used to add one background image. You can add other components on top of this background image. You need to specify the width and height of this component in style attributes.

In this post, I will show you how to use ImageBackground with an example :

Example program :

Let me show you an example :

import React from 'react';
import {
  SafeAreaView,
  StatusBar,
  StyleSheet,
  ImageBackground,
  Button,
} from 'react-native';

const App = () => {
  const imageUrl = '../images/robot.png';

  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView style={styles.container}>
        <ImageBackground source={{uri: imageUrl}} style={styles.image}>
          <Button title="Click me" color="#841584" />
        </ImageBackground>
      </SafeAreaView>
    </>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
  },
  image: {
    height: 400,
    width: 400,
  },
});

export default App;

Here, we are using one ImageBackground with a Button. The Button is placed over the image.

It will print the below output :

React Native imagebackground