CODEWITHSUNDEEP
androidiosreact-nativemobile
Joeman
Joeman

Reputation: 251

Background Image wont appear in react native

I have looked everywhere and can't figure out why my background image isn't working the path is fine and I've tried everything from wrapping it in a view, giving it a width and height. None of it works. I'm new to react native so I don't know is this a common problem. The login button shows up just fine it is purely the bg image. Here is the code:

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

function WelcomeScreen(props) {
  return (
    <View>
      <ImageBackground
        style={styles.background}
        source={require("../assets/background.jpg")}
      >
        <View style={styles.loginButton}></View>
      </ImageBackground>
    </View>
  );
}

const styles = StyleSheet.create({
  background: {
    flex: 1,
  },
  loginButton: {
    width: "100%",
    height: 70,
    backgroundColor: "#fc5c65",
  },
});

Upvotes: 1

Views: 494

Answers (2)

Alireza Hadjar
Alireza Hadjar

Reputation: 468

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

function WelcomeScreen(props) {
  return (
    <View style={styles.background}>
      <ImageBackground
        style={styles.background}
        source={require("../assets/background.jpg")}
      >
        <View style={styles.loginButton}></View>
      </ImageBackground>
    </View>
  );
}

const styles = StyleSheet.create({
  background: {
    flex: 1,
  },
  loginButton: {
    width: "100%",
    height: 70,
    backgroundColor: "#fc5c65",
  },
});

Upvotes: 0

Joeman
Joeman

Reputation: 251

Well adding a style to the view that contains the background image seemed to work. If anyone else has this issue update your code to look like this.

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

function WelcomeScreen(props) {
  return (
    <View style={styles.container}>
      <ImageBackground
        source={require("../assets/background.jpg")}
        style={styles.background}
      >
        <View style={styles.loginButton}></View>
      </ImageBackground>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: "column",
  },
  background: {
    flex: 1,
    resizeMode: "cover",
  },
  loginButton: {
    width: "100%",
    height: 70,
    backgroundColor: "#fc5c65",
  },
});

Upvotes: 1

Related Questions