Skip to content

Commit

Permalink
apply Joe feedback on boxSizing and minWidth/minHeight
Browse files Browse the repository at this point in the history
  • Loading branch information
cipolleschi committed Jan 15, 2025
1 parent bd226f2 commit c4a3b05
Showing 1 changed file with 3 additions and 3 deletions.
6 changes: 3 additions & 3 deletions website/blog/2025-01-15-version-0.77.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ date: 2025-01-15

Today we are excited to release React Native 0.77!

This release ships several features: new styling capabilities such as support for `display: contents`, `box-sizing`, `mixBlendMode`, and `outline`-related properties to provide a more powerful layout options; Android 16KB page support to be compatible with the newer Android devices. We are also modernizing the community template by migrating it to Swift, while continuing to support and maintain compatibility with Objective-C for developers who prefer it.
This release ships several features: new styling capabilities such as support for `display: contents`, `boxSizing`, `mixBlendMode`, and `outline`-related properties to provide a more powerful layout options; Android 16KB page support to be compatible with the newer Android devices. We are also modernizing the community template by migrating it to Swift, while continuing to support and maintain compatibility with Objective-C for developers who prefer it.

<!--truncate-->

Expand Down Expand Up @@ -100,10 +100,10 @@ function Alerting({children}) {
#### Box sizing
The `box-sizing` prop defines how the element's various sizing props (`width`, `height`, `min-width`, `min-height`, etc.) are computed. If `box-sizing` is `border-box`, these sizes apply to the border box of the element. If it is `content-box` they apply to the content box of the element. The default value is `border-box`, this is different from the default value on the web. The [web documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing) is a good source of information if you wish to learn more about how this prop works.
The `boxSizing` prop defines how the element's various sizing props (`width`, `height`, `minWidth`, `minHeight`, etc.) are computed. If `boxSizing` is `border-box`, these sizes apply to the border box of the element. If it is `content-box` they apply to the content box of the element. The default value is `border-box`, this is different from the default value on the web. The [web documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/boxSizing) is a good source of information if you wish to learn more about how this prop works.
:::warning
`border-box` has been the default forever at this point, and has been the only `box-sizing` value up until we added `content-box`. Changing the default would have been a breaking change that would suddenly break several layouts. We decided to keep `border-box` as default value to ensure backward compatibility.
`border-box` has been the default forever at this point, and has been the only `boxSizing` value up until we added `content-box`. Changing the default would have been a breaking change that would suddenly break several layouts. We decided to keep `border-box` as default value to ensure backward compatibility.
:::
To understand the difference between `border-box` and `content-box`, have a look at these example, where both `View`s have `padding: 20` and `borderWidth: 10`. When using `border-box`, we consider border and padding for the sizing; when using `content-box`, we consider only the content for the sizing.
Expand Down

0 comments on commit c4a3b05

Please sign in to comment.