React Native's Major 2025 Updates: Mix Blend Mode, CSS Animations, SwiftUI

a lot of exciting Updates this week in the react native world first we got react native 77 well really 0.77 because we're never quite getting to 1.0 but this is a pretty cool release and I do want to go through it the second one is reanimated for another exciting release for reasons that are very close to me and I'll show you why and at the end hopefully if there's time I'll actually show you some things that aren't publicly released or documented so let's get started and just look at the release

for react native 77 we got new styling features Android's 16 kiloby page support and Swift template so this release ships several features new styling capabilities such as support for display contents box sizing mixed blend mode and outline related properties to provide more powerful layout options I'm so excited for mixed blend mode and display contents both are are really great display contents is going to be awesome for building component libraries that

maybe inject props or some other activity like it like gestures and touchables box sizing and outline don't really use them often myself but I guess outline can be beneficial when I want to set it to zero on on buttons on web but it is really great to see that these new CSS styles are coming into react native core it's something that I push for all the time in the previous version of react native we actually got things like filters although we didn't get the best ones in my opinion like saturation and blur and stuff like that but definitely going in the right direction and kind of

getting parody with the web which we've you know seen before so I'll just kind of go through these if you're not familiar with display contents uh I I'll read through this here the display contents prop allows an element to disappear from the layout structure while its children are still rendered as if they were direct Children of the parent element it can be useful for styling purposes where you wanted to apply styles to child elements without affecting the layout when building the wrapper components which must handle events or if you need to interact with

the shadow tree technically speaking display contents renders an element without generating a layout box but it preserves the layout boxes of element's children the element with display contents is effectively flattened out of the view hierarchy okay so here they show an example of what it looks like a a really useful use case on the web is generally speaking I'll put a div and I'll you know want to scope some CSS variables to its children but I don't actually want it to affect the children at all that's a pretty obvious case

because you're just it's as if it's a context provider that's actually happening on the Dom level and not on the react level so in this case they're showing me like I have this View and then a widget okay so it shows this red box and now we're going to build an alerting component which I see next and the background color is blue got it and so I see that here and it also when you do OnPoint or down it calls this alert function all right so naturally what you might be thinking here is like I might want to have this Ono or down functionality but I don't actually want it to like affect the children and this

is this is actually really relevant for me when I'm building zego if you haven't seen zego before it's a context and drop down menu component and so zego has this component which is the trigger and you know it makes sense in some ways for the trigger to apply styles to the child but in other ways not really like I just want it to be something that traps when you long press something but I don't necessarily want to like inject a layout box like in some cases I just want you to like have your

own View and this just like applies you know actions listeners things like that to it so that's where display contents is very useful so you can see here that in their example this alerts box has a background of blue but it says here if we try this again while setting display contents on The View wrapper of alerting we only see alerts when the user presses within the original bounds of the widget right okay so right now when you do display contents on this alerting component it actually no longer has a layout right so now this you you lose