Conditional Styling in React Native

Question

I have this ImageBackground tag in my React-Native App.

const{height,width} = Dimensions.get('window);
const navHeight = ExtraDimensions.get('SOFT_MENU_BAR_HEIGHT');

render(){
 return(
  <ImageBackground source={Images.bg} style={{width=width+48,height=height}}>
     //content
  </ImageBackground>
 );
}

The number 48 is the height of the default Android navigation bar (the one contains BACK button). The navHeight is to detect the height of navigation bar on the device (refer here:https://github.com/Sunhat/react-native-extra-dimensions-android).

Since there are now devices with no navigation bar, i want to make a conditional styling in the ImageBackground style to take style={styles.bg1} when there is a value of navHeight and take style={styles.bg2} when there is no navHeight value. May i know where and how should i implement the styling? thanks

My current wrong way of doing it is

<ImageBackground source={Images.bg} style={navHeight=0 ? styles.bg1 : styles.bg2}>

Answer 1

There is a syntatical error, for comparison you have to use ==.

Try this,

<ImageBackground source={Images.bg} style={ (navHeight==0) ? styles.bg1 : styles.bg2}>

Moreover, i would recommend you using Image tag and append a child component to it by using position="absolute". Because some styling props like borderRadius don't work in the case of ImageBackground tag.

I hope this helps you !