fix: rsc support changes for nextjs [v4]

[Viraj-10]

Problem

Why isn't RSC working with NativeWind?

• In order to support NativeWind in Next.js, we have to change jsxImportSource from react to nativewind.
• For more references on JSX runtime, visit https://babeljs.io/docs/babel-plugin-transform-react-jsx.
• This logic comes from the NativeWind jsx-runtime.ts file, where each JSX element is passed through the wrapJsx HOC. It wraps all the React Native component types with the cssInterop wrapper, which adds context and other required logic for NativeWind to work.
• But this also effects normal div or html which is rsc supported.

Solution

• We need to separate client and server files.
• We need to add use-client for the client file, which has a Component Instance or hook and is used during jsx-runtime.

File Changes

components.ts.

• Need to add use client react native web doesn't work rsc.

api.ts.

• added use client Component Instance imported from react is classComponent which is not supported in rsc.

interopComponentsMap.ts.

• This map is used wrap-jsx. since we converted api.ts file to client file we can't import map from client file to server rsc file wrap-jsx so we have to separate this file from api.ts.

useColorScheme.ts.

• This is just a code refactor for future if somehow if are able to make api.ts rsc compatible.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
nativewind	✅ Ready (Inspect)	Visit Preview	Apr 22, 2024 9:37am