th3rdwave / react-native-safe-area-context

A flexible way to handle safe area insets in JS. Also works on Android and Web!
MIT License
2.14k stars 197 forks source link

feat: add React Server Component support #502

Closed EvanBacon closed 4 months ago

EvanBacon commented 4 months ago

Summary

Test Plan

jacobp100 commented 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

jacobp100 commented 4 months ago

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>
}
EvanBacon commented 4 months ago

@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.

jacobp100 commented 4 months ago

@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

janicduplessis commented 4 months ago

Released as 4.10.4

Thanks!