Does it exist an equivalent of box-sizing: border-box in flexbox for React Native?

Question

I would like the size of my boxes not to be changed by margin and padding.

Hmmm... what I've seen there's working box-sizing by default. See example at: https://rnplay.org/apps/GF43cw — Samuli Hakoniemi, Jul 21 '16 at 12:09

score 37 · Accepted Answer · answered Dec 25 '17 at 21:48

37

React Native styles all views as if box-sizing: border-box is set. See this code: https://github.com/facebook/react-native/blob/5aa1fb3ff326a429e33a443576da866f2a63c20c/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewBackgroundDrawable.java#L632

answered Dec 25 '17 at 21:48

Rashi Abramson

1,127
8
16

4

Although, this behaves very weird, like an `absolute` child with `width: "100%", height: "100%"` will appear after the `padding` values – Biskrem Muhammad May 11 '21 at 12:25

score 4 · Answer 2 · answered Jul 30 '20 at 08:29

4

As mentioned in another answer, In React Native, everything is treated as if as if box-sizing: border-box is set. A workaround to simulate css content-box is to wrap your component in a container View, and add your border and padding to that View.

answered Jul 30 '20 at 08:29

ut9081

787
6
11

Chukwuemeka Maduekwe · Answer 3 · 2020-08-24T18:45:32.723

react native don't have an option for

 boxSixing: "border-box"

what you can do in your styling is this

<View style={ {
    flex: 1,
    alignContent: "center",
    justifyContent: "center",
}}>
    <View style={ {
        flex: 1,
        width: "95%" // or width of the box - intended margin
    }}>
        ***chi;dren goes here***
    <View/>
<View/>

Any component that goes into that view will be at the center With a margin of 5% or whats is specified, which solves the issue for now till react-native provides a better solution

score -1 · Answer 4 · answered Jun 17 '19 at 07:25

-1

Let O (for outer) = (top, left, bottom, right) be the rectangle that represents the size * and position of a view V. Since the box-sizing of all React Native views is border-box, any * border of V will render inside O.

answered Jun 17 '19 at 07:25

Naved Khan

1,699
16
13

This text is copied from the link that Rashi posted above, but doesn't give any context that this quote is taken from the repo's source code. It may be better as a comment on the previous answer rather than a new one. – Eosis Jun 19 '22 at 08:28

score -13 · Answer 5 · answered Jul 22 '16 at 10:09

-13

you can use resizeMode: 'cover' or 'stretch' or 'contain'

answered Jul 22 '16 at 10:09

Kazuki Kimoto

63
1
3
10

1

What do the different options do? What does cover, vs, stretch, vs contain do? Do you have a link to the docs to show what these options mean? – Rashi Abramson Dec 20 '17 at 17:06
1

Isn't that only for **images**? – Giraldi May 21 '18 at 03:47

Does it exist an equivalent of box-sizing: border-box in flexbox for React Native?

5 Answers5

Linked