Styling React Native components using multiple CSS arguments

Question

Can you help me with styling in react-native using CSS like this? border-width: 5px 5px 5px 5px

I attempted to use: borderWidth:{5,5,5,5} and borderWidth:'5px 5px 5px 5px' but it didn't work

Answer 1

Answer №1

Experiment with:

borderBottomWidth:5 borderTopWidth:5

and so forth.

Answer 2

Experiment with:

borderBottomWidth:5 borderTopWidth:5

and so forth.

Answer 3

When working with react-native, the use of border-width: 5px 5px 5px 5px is not supported. Instead, you should utilize the following properties:

 1. borderTopWidth,
 2. borderBottomWidth,
 3. borderLeftWidth,
 4. borderRightWidth

If you wish to implement a custom function similar to borderWidth, you can create your own logic like this:

function borderWidth(top,right,bottom,left){
  let styles;
  styles['borderTopWidth'] = top
  styles['borderRightWidth'] = right
  return styles
}

Then, within your Stylesheet, you can apply it like so:

container : {
    ...borderWidth(5,5,5,5)
}

Answer 4

When working with react-native, the use of border-width: 5px 5px 5px 5px is not supported. Instead, you should utilize the following properties:

 1. borderTopWidth,
 2. borderBottomWidth,
 3. borderLeftWidth,
 4. borderRightWidth

If you wish to implement a custom function similar to borderWidth, you can create your own logic like this:

function borderWidth(top,right,bottom,left){
  let styles;
  styles['borderTopWidth'] = top
  styles['borderRightWidth'] = right
  return styles
}

Then, within your Stylesheet, you can apply it like so:

container : {
    ...borderWidth(5,5,5,5)
}