title: Conditional Styling in React Native
body: <p>I have this ImageBackground tag in my React-Native App.</p>
  
  <pre><code>const{height,width} = Dimensions.get('window);
  const navHeight = ExtraDimensions.get('SOFT_MENU_BAR_HEIGHT');
  
  render(){
   return(
    &lt;ImageBackground source={Images.bg} style={{width=width+48,height=height}}&gt;
       //content
    &lt;/ImageBackground&gt;
   );
  }
  </code></pre>
  
  <p>The number 48 is the height of the default Android navigation bar (the one contains BACK button). The <code>navHeight</code> is to detect the height of navigation bar on the device (refer here:<a href="https://github.com/Sunhat/react-native-extra-dimensions-android" rel="nofollow noreferrer">https://github.com/Sunhat/react-native-extra-dimensions-android</a>). </p>
  
  <p>Since there are now devices with no navigation bar, i want to make a conditional styling in the ImageBackground style to take <code>style={styles.bg1}</code> when there is a value of <code>navHeight</code> and take <code>style={styles.bg2}</code> when there is no <code>navHeight</code> value.
  May i know where and how should i implement the styling? thanks</p>
  
  <p>My current wrong way of doing it is</p>
  
  <pre><code>&lt;ImageBackground source={Images.bg} style={navHeight=0 ? styles.bg1 : styles.bg2}&gt;
  </code></pre>