How can I add a background image to my react native app?

Question

I am fairly new to react native, but I have some experience. I am creating my own app for both ios and android by following along a tutorial that I had already completed and making my own modifications. As I was in the middle of creating an app, I forgot to add a background image. After struggling with this for several days, I'm desperate, so I decided to ask my question on here.

I am trying to add the background image to my App.js file. The image loads properly, but my page content ( which is inside <LifelineNavigator />) is either hidden or has disappeared for android. And for ios, the content seems to be in a small centered flexbox. Also, I am trying to remove the white background.

Any suggestions would definitely help. Thanks so much! God bless!

Here is my code:

import React, { useState } from "react";
import { StyleSheet, View, ImageBackground } from "react-native";
import * as Font from "expo-font";
import AppLoading from "expo-app-loading";
import { enableScreens } from "react-native-screens";
    
import LifelineNavigator from "./src/navigation/LifelineNavigator";

enableScreens();

const fetchFonts = () => {
   return Font.loadAsync({
      "Gotham-Medium": require("./src/assets/fonts/Gotham-Font/Gotham-Medium.otf")

const image = {
    uri: "https://i.ibb.co/8z6QbTS/Lifeline-Gradient-Background-24.png",
    };

const App = () => {
  const [fontLoaded, setFontLoaded] = useState(false);

  if (!fontLoaded) {
    return (
      <AppLoading
        startAsync={fetchFonts}
        onFinish={() => setFontLoaded(true)}
        onError={(err) => console.log(err)}
      />
    );
  }

  return (
    <View >
      <ImageBackground source={image} style={styles.image}>
        <View style={ styles.container }>
            <LifelineNavigator />
        </View>
      </ImageBackground> 
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    // backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  image: { 
    width: "100%", 
    height: "100%" ,
  }
});

export default App;

IOS Screenshot

Android Screenshot

score 0 · Answer 1 · answered Feb 08 '22 at 06:22

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

const image = { uri: "https://reactjs.org/logo-og.png" };

const App = () => (
  <View style={styles.container}>
    <ImageBackground source={image} resizeMode="cover" style={styles.image}>
      <Text style={styles.text}>Inside</Text>
    </ImageBackground>
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  image: {
    flex: 1,
    justifyContent: "center"
  },
  text: {
    color: "white",
    fontSize: 42,
    lineHeight: 84,
    fontWeight: "bold",
    textAlign: "center",
    backgroundColor: "#000000c0"
  }
});

export default App;

follow this documentation > https://reactnative.dev/docs/imagebackground it may solve your problem

How can I add a background image to my react native app?

1 Answers1