Navigate back to the homepage

How to use background image in react native

Infinitbility
React Native
August 6th, 2021 · 1 min read
How to use background image in react native

Hello Friends 👋,

Welcome To Infinitbility! ❤️

This article will help you to the background image in react native, here you will get examples of ImageBackground react-native component, an example of overlay in react native, add Text upper then image in react native.

Let’s start today article ImageBackground In React Native

Introduction

Well, if you come from web development there we get the style background-image attribute to full fill our requirement but in react native background-image style is not available. I.e React Native provide <ImageBackground> component.

ImageBackground usages

We are going to see an example of ImageBackground of React Native, on below example you will get answers to the following questions

How to add background image in react native How to add an overlay on the background image in react native How to add content on the background image in react native

ImageBackground.js

1import React from "react";
2import { ImageBackground, StyleSheet, Text, View } from "react-native";
3
4const image = { uri: "https://reactjs.org/logo-og.png" };
5
6const ImageBackgroundComponent = () => (
7 <View style={styles.container}>
8 <ImageBackground source={image} resizeMode="cover" style={styles.image}>
9 <Text style={styles.text}>Infinitbility</Text>
10 </ImageBackground>
11 </View>
12);
13
14const styles = StyleSheet.create({
15 container: {
16 flex: 1
17 },
18 image: {
19 flex: 1,
20 justifyContent: "start",
21 },
22 text: {
23 flex: 1,
24 color: "white",
25 fontSize: 42,
26 lineHeight: 84,
27 fontWeight: "bold",
28 textAlign: "center",
29 backgroundColor: "#000000c0"
30 }
31});
32
33export default ImageBackgroundComponent;

ImageBackground Image styles example

React Native provides imageStyle attribute to manage image styling of background image or provide the style attribute to manage the style of view.

When you want style images like border, borderRadius, resizeMode, image height and width, opacity, and tint color.

For example visit the below link. Here explain every attribute one by one.

https://reactnative.dev/docs/image-style-props

Thanks For Reading…

Join our email list and get notified about new content

No worries, I respect your privacy and I will never abuse your email.

Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

Tutorials

React Native

Categories

More articles from Infinitbility

How to use br tag in react native

How to use br tag in react native

React Native br tag example

August 6th, 2021 · 1 min read
How to use array in react native

How to use array in react native

React Native array example

August 5th, 2021 · 1 min read
© 2020–2021 Infinitbility
About
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]