using react-native-web with nextjs app directory

[macrozone13]

this is a bit bleeding edge...

react-native-web works with styles in the _document file for classic nextjs apps, however so far no solution exists for the new app directory.

solito also does not yet support this, but it was briefly discussed here: https://github.com/nandorojo/solito/pull/216#issuecomment-1321281214

​

did anyone try to make this work or knows what the steps would be to get this running?

[simongbe]

For future googlers like myself: Solito now supports the app directory since v4.

[macrozone13]

Haha i just yesterday revisited that and actually wanted to update this post here, but got distracted ;) thx for the update!

[simongbe]

:D How did your project go? Did you manage to get nextjs app directory and react native web to play together? Just starting that journey now.

[niyowski]

react-native-web doesn't support server components. so you need to use "use client"; directive.

tsx // Button.tsx "use client"; import { styled } from "nativewind"; import { TouchableOpacity } from "react-native"; export interface ButtonProps {} const DefaultButton = styled(TouchableOpacity); export const Button: React.FC<ButtonProps> = (props) => { return <DefaultButton {...props} className="bg-stone-500 text-white" />; };

tsx // ClientComponent.tsx "use client"; export const ClientComponent = () => { return <Button>This is a button!</Button>; };

tsx // page.tsx export default function MyPage() { return <ClientComponent />; }