I have recently been learning Next.js for React and I like the routing system a lot more than react navigation. Now I am about to start a react native frontend and I was wondering if you can utilise Next.js's routing system in react native as well as it's other benefits. I know that you can use it with expo but I am a little confused as to how it all works and I am starting to wonder if the Next only works on the web side of things..
Does anyone have any experience with this? Any information would be much appreciated.
Thanks!
Unfortunately you can't do such thing, due to the fact that the views of react native are Equivalent to native views in Java or Objective C. When you get build version of react native , you are receiving Java or Objective C native views thank to react native's RN bridge. Meanwhile, when you get build version of your Next.js project, you are going to receive HTML, CSS, JS and these codes are not familiar to native platforms.
However, you can use your Next.js backend as your endpoints and fetch data in react native via calling this endpoints.
UPDATE Oct_2022:
there seem to be a new tool created for this purpose , called solito. I haven't used it personally but it might meet your needs.
UPDATE Jan_2023:
It looks like there are more Tools being created for Both web and native platforms , check react-native-web
You can check out Tauri. With that you can create from Next.js, React, Svelte etc. cross-platform native Apps. Currently, Windows, Mac and Linux are supported stable. Android & iOS is currently in Alpha
The magic behind Tauri is, that they provide around your Frontend library/framework a Rust layer with that you can interact with platform native APIs. They call it Commands.
You can find the guide for Next.js here.
Also, if it's not exactly answering the question - "Is it possible to use Next.js in React native?" - I hope that it's helping everyone who is searching for a solution to use Next.js as Cross-Platform Frontend Framework
I read a thread on ycombinator on this where Solito was mentioned and tried it out. In the comments I found this, which suited my needs best :
https://github.com/mlynch/nextjs-tailwind-ionic-capacitor-starter
Solito looks nice but the all in one repo was using Expo, which I did not like because it installs an extra app. I would check it out for yourself and look at the repo above too, which is using Capacitor and is aimed at having one codebase for the two apps.
Both examples worked well. For Tauri I could not find the mobile support so I didn't try it. I would be interested to read more about people's experience with running a minimum stack for cross platform development.
Note : Solito uses React Native, the repo uses Capacitor instead, which may also suite your needs because it works on both iOS and Android.
There's a lot of support now for this tech stack. Besides solito, which is already mentioned, there is also https://tamagui.dev/ which tries to solve all the issues with react-native-web and Next.js along with Solito.
While they currently recommend a monorepo (which adds a lot of complexity in my opinion), I'm playing around with a vanilla React Native + Next.js here: https://github.com/criszz77/luna
This command should get you started to play around:
npx react-native init MyAppName --template #criszz77/luna
I’ve built a small app with React Native and it looks awesome, but I was wondering - can I just export it for web (HTML/JavaScript) instead making a separate code in ReactJS for it? And if it’s possible, what are the pros and cons? BTW I used a free UI kit for the developing. Thanks!
You have two options:
Use react-native-web and share 90% the same source code, between native and webapp.
Good for non-complex projects;
If your app have native/complex navigation, then it will have issues, because this can't work on web.
Use web react and share some components.
Recommended for complex projects;
If you have a complex native app, share the components can be the best option;
bit.dev can be useful to achieve this solution.
More info:
https://blog.bitsrc.io/6-ways-to-share-and-reuse-react-components-6d80e2fd16cd
You can use Expo to build for any platform: IOS, Android, Web
For the web, you can use expo build:web
It creates a production ready static bundle in the web-build/ directory
Here is the full document for the web
salam;
We developed a PWA based on react-boilerplate. it's totally based on webpack.
now I'm supposed to implement SSR on this application. the problem is that , I can't find any suitable solution on converting current project to SSR.
I tried nextjs but integration with project is not possible. additionally its requirement for changing infrastructure is too much.
I tried some other libraries such as react-snapshot and ... but each of them has some specific issues.
any body can help me?
I have really big concern on my web project architecture which will have separate mobile and desktop web app.
I already finished to develop web version based on "create-react-app" project template and for mobile version, I want to reuse my exists web version component as much as possible.
We will serve these with separate url "www" for desktop and "m" for mobile.
I am thinking of two possible ways.
Just build another create-react-app project for mobile and share the common code.
In exists web client create-react-app project src folder, make mobile version codes like component.js component.web.js component.mobile.js. But in this case I am worrying about the size of bundle js file.
I also thought about the responsive web design, but we have totally different layout and components.
Rendering two different layout within a component by the size of viewport or url(www/m) might be another possible way but it is highly possible for me to use server-side-rendering...
What would be the good approach to solve this problem....
I would approach this as follows:-
Move all business logic to a common package and use it in both mobile and web. This would make your logic common.
Move all the common components/config/colors etc. to a common package and use them in both the apps.
Handle view part for both the apps separately.
I also thought about the responsive web design, but we have totally
different layout and components.
If you have totally different layout and components I would suggest to keep mobile and web segregated. Its not only about the bundle size, you can get around it by lazy loading, but your code complexity can increase.
You can use the same code and build mobile application using Cordova Framework
as your web code will be the one to generate application.
As well you can create for multiple platforms.
Go through official website.
https://cordova.apache.org/docs/en/latest/guide/cli/index.html
We have a stable version of a widget developed with reactjs. We would like to develop mobile version of the same. Is it better to develop with react native and share the code across the 2 apps or is it better we develop the widget natively.
Bare in mind that we do have expertise in both(react and android dev) but we do not want to invest to much time on developing the entire app again.
Are there any tools/resources available to get this done faster if we choose react-native?
Resources available online:
http://jkaufman.io/react-web-native-codesharing/
https://arielelkin.github.io/articles/why-im-not-a-react-native-developer.html
https://medium.com/#felipecsl/thoughts-on-react-native-from-an-android-engineers-perspective-ea2bea5aa078
Cheers!!!
Instagram, Tesla, AirBnB, Discord, Bloomberg all have production apps written in React Native. I'll let you decide for yourself whether it's production-ready in your opinion.
While React Native enables you a significant code reuse between iOS and Android (we are currently building an app for client which - appart from external libraries - reuses over 99% code between iOS and Android), it is not designed to share code with React webapps.
The Facebook's philosophy with React Native, instead of write once, run anywhere is rather learn once, write anywhere.
You can definitely use your designs and architecture, but you would need to rewrite most of the code. It might still be more efficient than developing two separate Java and Obj-C/Swift apps, though.
Update: In 2018 Airbnb decided to sunset React Native in their production apps. They wrote an insightful article about their experience and reasoning. It is very relevant for anyone thinking about using React Native. https://medium.com/airbnb-engineering/react-native-at-airbnb-f95aa460be1c
You cannot just use your whole code into the react-native application. First and foremost, you have to follow the react-native architecture and then develop your UI using react-native components.
You’ll certainly have to write your components separately for a mobile app and web app. But you can always reuse the business logic, API Communication layer.
Create the reusable component and share it in the Shared folder and reuse Mobile/Web anywhere.
Convert react to the react-native platform is an easy process. A step by step process how to reuse code in react native explain in the image with react native web view as an introduced bride as react-hooks
Step by step guide how to do React vs React Native reusability & what percentage of reusability that we can achieve between react and react native code will explain in the below part.
Sharable code between React & React Native:
Business Logc
Communication with API
Stores, Reducers, Actions and Services
Helpers, Constants, Storage Services
HOCs (Higher-Order Components)
Mobile / Web specific:
Dedicated code (specific code) for Mobile & Web separately
Presentational components
Navigation / routing
Styles
Setting up a shared project
Make sure you are at the project root folder
$ mkdir -p packages/components/src packages/mobile packages/web
Create react native project using react-native-cli inside 'packages/mobile`
Create react app using create-react-app inside packages/web
Create package.json at the root directory to enable Yarn Workspaces
Create a shared folder
Now create a common or shared folder where the common code of react and react native will exist.
$ mkdir -p packages/common
Create package.json file in common folder
Name the package and add main(entry file)
Configure React Web application
Add react-app-rewire-yarn-workspaces and react-app-rewired in dev dependencies in your web/package.json
Change your scripts from react-scripts to react-app-rewired
"start": "react-app-rewired start"
"build": "react-app-rewired build"
"test": "react-app-rewired test --env=jsdom"
"eject": "react-app-rewired eject"
Add config-overrides.js inside web
Configure React Native Mobile application
Configuring react-native on mono repo is a little bit tricky part. We need to understand two things before making workspaces work in our react native app.
Symlinking
No Hoist
Symlinking
symlink is a term for any file that contains a reference to another file or packages. To achieve symlinking we will use wml.
And finally
Create the reusable component and share in the Shared folder and reuse Mobile/Web anywhere.
Migrating from Web (React) to Mobile(React Native) or Mobile (React Native) to the Web (React)
Depends on the following key points
Followed Coding Guideline Standard
Modularised development
Component-based development
Segregation of sharable code
and code design for both (Web or Mobile) or not like the example Image
Here I tried for a simple explanation about how to share code between React and react-native with react-native-web. I'll add a detailed process (step by step) guide for convert react native app to web as well here in the coming days.
Migration from React to React Native
Conclusion - based on my understanding and depends on the above points, I can say that you can reuse from 20-50% of React JS code to React Native platform
From Scratch Development
Conclusion - based on my understanding and depends on the above points, I can say that you can reuse from 50-70% of React JS code to React Native platform
References website - Codingular
References website - Jkaufman
You could check out ReactXP (https://microsoft.github.io/reactxp/) which uses reactjs and react native to build cross platform apps.
Rather than bloat this answer too much, I wrote a fairly in-depth guide about this at https://dev.to/kylessg/a-sensible-approach-to-cross-platform-development-with-react-and-react-native-57pk.
To summarise though, you can get great amounts of codesharing between React and React Native but don't overreach on what you're sharing. Doing so may leave your code harder to maintain where you're trying to oversimplify valid differences between mobile and web.
For myself, this is along the lines of:
Shared:
Business logic
Communication with API
Polyfill possible shared functionality into an API (e.g. communication with analytics, local storage, network detection etc)
Stores, reducers app actions
HOCs
Web/Mobile specific:
Presentational components
Navigation / routing
Styles
It can be shared among mobile app and web app. You'll certainly have to write your components again for mobile app. But you can always reuse the business logic.
If you have used React in your web application, then the work becomes even easier. One of the major hazards in React native is State Management. Now the complexity depends upon your application. Usually it is advisable to use Redux along with React Native.
The real question arises is how much code you will be able to share. Hope this helped.
Nowadays there is a tool called react-native-web which lets you share code between web and mobile.
Read more: https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
Repo: https://github.com/necolas/react-native-web
Two popular options addressing code share across web, iOS, Android & Windows are
React Native Web - https://github.com/necolas/react-native-web
ReactXP - https://github.com/microsoft/reactxp
Below is an excellent excerpt from https://microsoft.github.io/reactxp/docs/faq.html highlighting the difference.
How does ReactXP differ from React Native for Web?
React Native for Web is an open-sourced library developed by engineers at Twitter. We started implementing ReactXP before React Native for Web was available.
The goals behind these two efforts are similar, but the approaches differ. ReactXP is a layer that sits on top of React Native and React, whereas React Native for Web is a parallel implementation of React Native — a sibling to React Native for iOS and Android.
ReactXP generally exposes only those props, style attributes, and APIs that are available across all platforms. If you write to ReactXP’s abstraction, you can have high confidence that it will run on all supported platforms in the same manner. The same can be achieved with React Native for Web/iOS/Android, but you need to be more careful about which components, props, and APIs you use.
You can certainly share the storage and the network layer b/w the web and mobile react code base.
Although, in practice you would be only able to share a part of the storage layer, because you might want to fetch data differently in case of a mobile app and a web app.
As of today the philosophy still remains as learn once write everywhere. As stated very correctly in other posts, both react and react-native being JavaScript based, with an architectural design approach you can share your business logic.
On the other hand, because of the nature of the hardwares, it is completely normal to have different presentation layers for web (mostly on your desktop/laptop browsers) and mobile (native).
The question asks for a tool that can speed up the development process. For this purpose this github repo named react-spa-jwt-authentication-boilerplate (*) can be used as an example. It shares the "business logic" between web and native versions via a folder named common-logic by keeping exact copies of *.js files. On the other hand navigation and presentation layer differs. It implements a sample authentication process which itself can also be used as a baseline for new projects.
(*) Disclimer: I am the implementer of the repo. We needed to implement the repo for the exact same need of reducing development time between mobile and web applications.
Yes we can reuse the code. And it works really well.
Here is a sample application repository
https://github.com/spoman007/reactXstarter
you can do that by turning stuff like code, hooks, props and even design-tokens into shared components:
Blg post with code examples
Tutorial video on youtube