Closed EvanBacon closed 4 months ago
Assume if we change this to use server
later down the line, that wouldn’t be a breaking change?
I’d love for the web version to use calc
and env
vars, which would work server side - even without hydration
I think our SafeAreaView component could (almost) be as simple as:-
const SafeAreaView = (props) => {
const style = { ...StyleSheet.flatten(props.style) }
if (props.edges.includes('top')) {
style.paddingTop = `calc(env(safe-area-top, 0px) + ${style.paddingTop ?? style.paddingVertical ?? style.padding ?? 0}px)`
}
// ...
return <View style={style}>{props.children}</View>
}
@jacobp100 "use server" defines functions that run in the server, essentially API routes. In an RSC world, the default is react-server
and you opt-out of the tree with "use client". Today's behavior is that everything in the module runs in the server and you get errors when values like __fbBatchedBridgeConfig
are accessed, as they only exist in native JS runtimes. To "solve" this, we mark code paths that use unavailable globals with "use client". Behind the scenes, this directive basically erases the contents of the file and turns it into a boundary that must be split out and fetch/eval'd on the client.
In the future, we'll want to shift more binding code to the native side and expose the globals directly so native apps can tree-shake as much JS as possible. Here's a little more about how I see that working 0kb React Native components.
@EvanBacon I was more meaning that the user might have some components behind a SAV that aren't marked as 'use client'
, and it would only not be an issue because SAV is client only, so won't render them. If we then change it so something is rendered, their code could break. I'm not sure how much of a breaking change that would be considered
Released as 4.10.4
Thanks!
Summary
Test Plan