useWindowDimensions Error on SSG render

[bhyoo99]

Which package manager are you using? (Yarn is recommended)

yarn

Summary

import Head from "expo-router/head";
import React from "react";
import { View, Text, ScrollView, useWindowDimensions } from "react-native";

const HomeScreen = () => {
  const dimensions = useWindowDimensions();
  return (
    <>
      <ScrollView>
        <View style={{ height: dimensions.height }}>
          <Text>Home</Text>
        </View>
      </ScrollView>
    </>
  );
};

export default HomeScreen;

Then console says
Uncaught Error
Prop style did not match. Server: "height:0px" Client: "height:772px"

Minimal reproducible example

in Summary

[EvanBacon]

Expected behavior with static rendering. You can use CSS, or create a component to avoid SSR:

import { useState, useEffect } from 'react';

export function NoSSR({ children }) {
  const [ready, setReady] = useState(false);
  useEffect(() => {
    setReady(true);
  }, [])
  if (!ready) return null;

  return children;
}