CODEWITHSUNDEEP
react-nativejsx
Eric Messick
Eric Messick

Reputation: 5

Conditional ImageBackground React Native / JSX

I know I'm just having a syntax issue, but here goes.

I'm building a weather app where the background image source changes based on weather conditions. My quotes and weather desc work, but having trouble setting the background image based on the same conditions.

const weatherCases = {
"clear sky": {
    title: "clear sky",
    background: "../assets/sunnyBackground.png",
    quote1: "My whole life has been sunshine. I like sunshine, in a certain way.",
}}

return ( 
    <ImageBackground source={weatherCases[weatherName].background} style={styles.forecastContainer}> 

      <View style={styles.forecastTopContainer}>
        <View>
          <Text style={styles.quoteText} >{weatherCases[weatherName]["quote" + randomQuoteNumber.toString()]}</Text>
        </View>
      </View>

      <View style={styles.forecastBottomContainer}>

        <View style={styles.forecastImageContainer}>
          <Text>IMAGE</Text>
        </View>
        <View style={styles.forecastTempContainer}>
          <Text>{city}</Text>
          <Text>{temp}°</Text>
          <Text>{weatherCases[weatherName].title}</Text>
          <Text>{hum}% Humidity</Text>
        </View>
      </View>
    </ImageBackground>

Upvotes: 0

Views: 822

Answers (3)

Azeezat Raheem
Azeezat Raheem

Reputation: 690

import LadyInGrass from '../../../assets/images/lady_in_grass.jpg';

<ImageBackground
      style={styles.imageStyle}
      source={imageSource ?? LadyInGrass}>
 </ImageBackground>

Upvotes: 0

Thakur Karthik
Thakur Karthik

Reputation: 3548

You can define a conditional variable which may be inside the json or state object and conditionally pass the source as follows.

<ImageBackground source={this.state.conditional?require('./assets/snack-icon.png'):null}>

Here is a expo link

Upvotes: 2

Max
Max

Reputation: 4749

You need to specifically require() every image resource that you will use. ImageBackground source prop expects the result of this require

const sunnyBg = require("../assets/sunnyBackground.png")

...

"clear sky": {
    title: "clear sky",
    background: sunnyBg,
    quote1: "My whole life has been sunshine. I like sunshine, in a certain way.",
}}

Upvotes: 0

Related Questions