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

Where is the color and why codevscolor ?

Long story short, I love paintings and I paint on weekends. We(me and my wife) have one Youtube channel. Below is a video that I did recently. If you love this please do subscribe to support us 😊❤️❤️