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
Related
I am creating a react-native application, And the application having many module like
Login Module
Payment
Cart
Product etc.
So I want to follow Micro Frontend Architecture for each module. I have searched on internet but did not find anything. So I want to know is it possible to achieve Micro Frontend Architecture for React-Native application. If yes then How ?
You can use Re.Pack, which is Webpack toolkit for React Native. Since v3 it provides its own ModuleFederationPlugin, which allows you to set up Module Federation (MF) architecture of building micro-frontends.
Example MF app can be found here: https://github.com/callstack/repack-examples/tree/main/module-federation. It covers a basic example of 2 mini-apps loaded dynamically from a "host" app.
There are no proper solutions for RN Micro-frontend so far.
there are a few libraries that may help you to achieve this.
https://github.com/callstack/react-native-brownfield
React Native Wix
But these are not recommended
kindly go through this link so you will be more clear about your question.
https://www.reddit.com/r/reactnative/comments/jdpfrj/microservices_in_react_native/
Microfrontends are concept originating from Web apps world. Achieving the same paradigm on mobile/React Native is possible, e.g. by using Re.Pack, but requires a quite complex setup. On the other hand, using Re.Pack will give you more app superpowers, like dynamically loading bundle splits from Internet.
As a simpler alternative, I would suggest setting up a monorepo containing separate NPM packages for each of the modules. This way you can achieve code separation more natural for mobile apps paradigm.
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 want to design a cross-platform (Android, iOS, and Web) plugin-able software that means everyone can easily develop a plugin for it and users can pick plugins from the marketplace and install it. Every plugin can:
Share data in the back-end side with the core application
Have a custom UI in Apps and Web that ideally using a standard UI-kit for consistency (for example Shopify polaris)
In the back-end, there are many best practices in software design like OAuth. but in the frontend, the problem is not straightforward:
Is there any cross-platform UI-kit for react and react-native? for example, using Expo v33+ or ReactNativeWeb we can build the code for android/ios and web but I can't find any cross-platform UI-kit. (NativeBase, Elements or similar cross-platform UI-kits are only for Android and iOS)
In the Frontend, how plugins can share UI using react and react-native (or ideally a cross-platform UI kit) somehow that render in the core dynamically (without needing any update, for example, the plugin provide an endpoint and return a react/native component and the core will render it)
1 - As far as I know there are few of them, like React Universal UI
2 - With the above UI Kit, the distinction on how components are built (imports remain the same) is done at runtime in the boilerplate:
Web (React)
$ ruui dev
IOS (React Native)
$ react-native run-ios
Android (React Native)
$ react-native run-android
If you want you component to be imported at runtime, well, this is possible for sure in web env (you can do it also with react-create-app, with dev server turned on and no prod static build).
For Android and IOS you'll need an additional build and subscribe your app for the review before going up again to the store (AppStore and Google Play)
I'm at the starting phase of a project that is going to use React Native and React to spit out a build for iOS, Android and web that has a consistent feel. My question is: what's the best way to do this? Should I build the app in React Native and then work on porting a web build? It seems like ReactXP kind of does this, but also includes Windows stuff that we just don't need. Or is it just easier to completely separate the native from the web.
Thank you in advance for the advice!
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