Quantcast
Channel: Active questions tagged react-native+android - Stack Overflow
Viewing all articles
Browse latest Browse all 29432

Conditional Styling in React Native

$
0
0

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}>

Viewing all articles
Browse latest Browse all 29432

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>