React native Question posted in
The official React Native documentation can be found here.

Mixture of Next.js and React Native for web and mobile app

My goal is to create a website with Next.js and to create a mobile app with React Native.

But, I need all the following benefits:

  • I need All SSR benefits and features on the web app like server components, etc (essential to me)
  • I need to use NEXT.js new routing approach (App router in NEXT v13 and up (not page router))
  • I want to have maximum usage of the same code base for both web and mobile app
  • I need to use tailwind and shadcn with next and nativewind with react native
  • I need CSS and tailwind responsive design features

Now my questions is:
What is the best mixture of libs (tailwind, nativewind, dripsy, shadcn, tamagui, expo, solito, etc), frameworks (next, react-native, react-native-web, etx) to have full SSR benefits and features on the web only and also having native mobile behavior with maximum same code base?

Thank you for taking the time to read and highly appreciate your help

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Both Tamagui and React Native Web offer distinct advantages and trade-offs when it comes to SSR compatibility and sharing components between Next.js (web app) and React Native (mobile app). Let's compare them based on these criteria:

    1. SSR Compatibility

    Tamagui

    • SSR Support: Tamagui supports SSR out of the box. It is designed to work well with Next.js, enabling server-side rendering of your components.
    • Consistency: By using Tamagui, you can maintain consistent styles and components across both server-rendered web applications and client-rendered mobile applications.

    React Native Web

    • Limited SSR: React Native Web has more limitations when it comes to SSR. Many components and styles rely on client-side JavaScript, making it challenging to fully support SSR without workarounds like disabling SSR for specific components.
    • Hydration Issues: There can be inconsistencies and hydration issues when rendering React Native Web components on the server and hydrating them on the client.

    2. Shared Component for Both Next.js (Web App) and React Native (Mobile App)

    Tamagui

    • Unified Styling: Tamagui allows for a unified styling system that works seamlessly across both web and mobile. This makes it easier to maintain a single codebase for UI components.
    • React Native Compatibility: Tamagui components are designed to be compatible with both React Native and the web, facilitating the creation of shared components.

    React Native Web

    • Component Reusability: React Native Web allows you to use React Native components on the web, which is great for reusability. However, certain components may require modifications to work correctly on both platforms.
    • Ecosystem: It leverages the React Native ecosystem, making it easy to reuse a wide range of libraries and components available for React Native.

    Conclusion

    1. Tamagui:

    • Pros: Better SSR support, consistent styling system across platforms, easier to maintain a single codebase for UI components.

    • Cons: Smaller ecosystem compared to React Native Web.

    2. React Native Web:

    • Pros: Larger ecosystem, direct use of React Native components on the web, extensive library support.

    • Cons: Limited SSR support, potential hydration issues, may require workarounds for certain components.

    Recommendation

    If SSR compatibility is a priority and you want a smooth experience with server-side rendering in Next.js, Tamagui is the better choice. It provides a consistent and reliable approach for SSR while allowing you to maintain a shared component library across web and mobile.

    If you need to leverage a large ecosystem of React Native components and libraries and can work around the SSR limitations, React Native Web might be suitable, especially if your application can tolerate client-side rendering for certain components.

    Ultimately, the choice depends on your project's specific needs and priorities. If SSR and a unified styling system are crucial, go with Tamagui. If you need the flexibility and ecosystem of React Native and can manage the SSR limitations, React Native Web is a viable option.


  2. 0

    To achieve your goals, consider the following mixture of libraries and frameworks:

    Web App:

    1. Next.js (v13+) for SSR benefits and new routing approach
    2. Tailwind CSS for styling and responsive design
    3. Shadcn for additional utility classes

    Mobile App:

    1. React Native for native mobile behavior
    2. Nativewind for using Tailwind CSS with React Native
    3. React Native Web to share code between web and mobile

    Shared Codebase:

    1. Use a monorepo approach to share code between web and mobile apps
    2. Use libraries like Solito to simplify sharing code between Next.js and React Native

    This combination allows you to utilize SSR benefits on the web, native mobile behavior, and share code between both platforms while using Tailwind CSS and Shadcn for styling.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search