How to combine multiple inline style objects and inline css in react-native?

Question

it has 3 style objects TimelineGreenColor, TimelineLeftBorder, TimelineLeftLine to be used in view div

  const stylesB = StyleSheet.create( {
     TimelineGreenColor:
     {
       backgroundColor: "green",
     },
     TimelineLeftBorder:
     {
       position: 'absolute',
       width: 4,
       backgroundColor: "green",
       height: '100%',
       left: 4,
       top: 15,
     },
     TimelineLeftCircle:
     {
       position: 'absolute',
       width: 12,
       height: 12,
       backgroundColor: "green",
       top: 12,
       borderRadius: 50,
       left: 0,
       /*boxShadow: "0px 0px 10px -2px black",*/
     },
     TimelineLeftLine:
     {
       position: 'absolute',
       width: 15,
       height: 3,
       backgroundColor: "green",
       top: 16,
       left: 5,
   }

   <View style={how to write styles in react-native ??????????}></View>

Varunkumar Gande · Accepted Answer · 2019-10-18 10:54:28Z

9

type 1: if you have one inline style

<View style = {{marginLeft: 7,paddingRight: "9%"}}></View>

type 2: if you have one style from styles object

<View style = {styles.TimelineLeftBorder}></View>

type 3: if you have two or more styles from styles object

<View style = {[styles.TimelineLeftBorder,styles.TimelineGreenColor]}></View>

type 4: if you have two or more styles from styles object and you want to give normal inline css also

<View style = {[styles.TimelineLeftBorder,styles.TimelineGreenColor,{marginLeft: 7}]}></View>

answered Oct 18, 2019 at 10:54

Varunkumar Gande

5996 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

avani kothari · Accepted Answer · 2019-10-18 11:33:44Z

1

simply pass all the styles object in array in style prop.

<View style={[stylesB.TimelineGreenColor,styleB.TimelineLeftBorder,styleB.TimelineLeftCircle,styleB.TimelineLeftLine]}/>

Remember that style prop accepts array of style objects in case of multiple styles and a object of style object in case of single style.

answered Oct 18, 2019 at 11:33

avani kothari

7376 silver badges17 bronze badges

Collectives™ on Stack Overflow

How to combine multiple inline style objects and inline css in react-native?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related