Skip to content

Instantly share code, notes, and snippets.

@filiptdz

filiptdz/SSRStylesWrapper.tsx

Last active February 20, 2024 23:57
Show Gist options
  • Save filiptdz/974aeeb6a52254fc13128a36cdadb226 to your computer and use it in GitHub Desktop.
Save filiptdz/974aeeb6a52254fc13128a36cdadb226 to your computer and use it in GitHub Desktop.
Download ZIP
react-native-web SSR Setup for NextJS using app router
Raw
layout.tsx
import SSRStylesWrapper from './SSRStylesWrapper';
export default function RootLayout({
children
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>
<SSRStylesWrapper>{children}</SSRStylesWrapper>
</body>
</html>
);
}
Raw
SSRStylesWrapper.tsx
'use client';
import { createElement, PropsWithChildren } from 'react';
import { useServerInsertedHTML } from 'next/navigation';
import { StyleSheet } from 'react-native';
const SSRStylesWrapper = ({ children }: PropsWithChildren<{}>) => {
useServerInsertedHTML(() => {
return createElement('style', {
dangerouslySetInnerHTML: {
// @ts-expect-error
__html: StyleSheet.getSheet().textContent
}
});
});
return children;
};
export default SSRStylesWrapper;
@filiptdz
Copy link
Author

Another option for the SSRStylesWrapper:

'use client';
import { PropsWithChildren } from 'react';
import { AppRegistry } from 'react-native'
import { useServerInsertedHTML } from 'next/navigation'
import config from '../app.json'

const SSRStylesWrapper = ({ children }: PropsWithChildren<{}>) => {
  AppRegistry.registerComponent(config.name, () => children);
  const { getStyleElement } = AppRegistry.getApplication(config.name);
  useServerInsertedHTML(() => getStyleElement());

 return children;
};

export default SSRStylesWrapper;

@felippewick
Copy link

thank you for sharing!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment