CODEWITHSUNDEEP
androidiosreactjsreact-nativestyles
Bikram Thapa
Bikram Thapa

Reputation: 1339

React Native - Select multiple styles

With React.js we could select among multiple styles using classes as follows:

           <div
              className={
                `r-n-cal-day 
                ${i % 7 == 6 ? classes.weekend : ''}
                ${classes.day} ${bsMonth !== this.props.viewBsMonth ? classes.dayMuted : ''} 
                ${this.isSameDate(adDate) ? classes.today : ''} 
                ${this.isSameDate(adDate, this.state.selectedDate) ? classes.selectedDay : ''} 
                `
              }
              key={`${bsDate} ${bsMonth}`}
              onClick={() => this.onDaySelect(adDate)}>
              {calFns.toDevanagariDigits(bsDate)}
            </div>

I was trying to achieve this way of choosing the style in React-Native.

I could choose among two styles using ternary operator as follows:

        <Text style = { 
          index % 7 == 6 ? styles.weekend : styles.day_text
          }>
            {day.bsDate}
        </Text>

But to select like the one among several styles , what should we do?

if statements inside doesnot work with JSX. Can somebody suggest something ?

Thanks in advance.

Upvotes: 0

Views: 679

Answers (3)

Masuk Helal Anik
Masuk Helal Anik

Reputation: 2283

I think you can do this way

 <View style={this.some(1)}></View>

And for the style(You can customize it as you want)

 some(s) {
        if(s===1)
        return {
            flex:1,
          borderRadius: 12,
         backgroundColor:'red',
        }
        else
        return {
            flex:1,
          borderRadius: 12,
         backgroundColor:'white',
        }
      }

Upvotes: 0

Gabe Sechan
Gabe Sechan

Reputation: 93542

Do the if statement in javascript, store the result in a local variable, and use the variable in your JSX.

Upvotes: 0

Revansiddh
Revansiddh

Reputation: 3062

You can pass Array into you style like:

  <View style={[styles.powerblue,{marginLeft:10}]} />

variable styles:

const styles  = StyleSheet.create({
  powerblue:{width: 50, height: 50, backgroundColor: 'powderblue'},
  rightStyled:{marginRight:10},
});

Here it will apply style from both styles and inline stye, you can pass other stylesheet object like:

 <View style={[styles.powerblue,{marginLeft:10},styles.rightStyled]} />

But it right most properties will override left one.

e.g. if styles.powerblue have property marginRight as 0, and styles.rightStyled has have property marginRight as 10. Then marginRight 10 will gets applied as it is on right most side

Upvotes: 2

Related Questions