From the Expo website
Expo lets web developers build truly native apps that work across both iOS and Android by writing them once in just JavaScript.
Isn't this what React Native does? What's the difference?
When you write code in Expo you are writing React Native code. Expo has
two main pieces:
Expo CLI (expo-cli): a developer tool for creating projects, viewing logs, opening on your device, publishing, etc.
Expo client: an app on your phone that lets you open your projects
while you're working on them, without needing to go through XCode or Android Studio, and also lets other people view them too! And if you publish it through expo-cli, people can access it at any time through the Expo client on Android or on iOS if signed in to the same account it was published with. Lastly, we also make it possible to build standalone apps so people don't have to use the Expo client to open it, and you can distribute to the app store and play store if you like.
So Expo is a set of tools built on top of React Native. These tools depend on one key belief held at Expo: it's possible to build most apps without ever needing to write native code, provided that you have a comprehensive set of APIs exposed to JavaScript.
This is important because with React Native you can always drop down to native code. This is incredibly helpful sometimes but it comes at a cost: you need to send people your binaries if you want them to test them, someone on the other side of the world can't just tap a link to open it while you're working on it and you can't just publish it with one click for someone to access it similar to how you would in a browser.
With Expo, we suggest that try to avoid dropping down to native code, if you can. As I mentioned above, we think that with a comprehensive set of APIs available to JavaScript, this shouldn't be necessary for most apps. So, we aim to provide this comprehensive set of APIs, and then build all of the awesome tooling that can exist in a world where the native runtime is shared.
However, if you must find that you want to drop down to native, you can use eject and continue using the native APIs that Expo gives you while having the same level of control as you would in any native project.
Read more about ejecting
A summary of the documentation and answers from Expo employees:
React Native init:
Advantages
You can add native modules written in Java or Objective-C (probably the only but the strongest one)
Disadvantages
Needs Android Studio and Xcode to run the projects
You can't develop for iOS without having a Mac
Device has to be connected via USB to use it for testing
Fonts need to be imported manually in Xcode
If you want to share the app you need to send the whole .apk / .ipa file
Does not provide JavaScript APIs out of the box, e.g., Push-Notifications, Asset Manager, they need to be manually installed and linked with npm for example
Setting up a working project properly (including device configuration) is rather complicated and can take time
Expo
Advantages
Setting up a project is easy and can be done in minutes
You (and other people) can open the project while you're working on it
Sharing the app is easy (via a QR code or link), you don't have to send the whole .apk or .ipa file
No build necessary to run the app
Integrates some basic libraries in a standard project (Push Notifications, Asset Manager, etc.)
You can eject it to ExpoKit and integrate native code continuing using some of the Expo features, but not all of them
Expo can build .apk and .ipa files (distribution to stores possible with Expo)
Disadvantages
You can't add native modules (probably a game changer for some)
You can't use libraries that use native code in Objective-C/Java
The standard Hello World app is about 25MB big (because of the integrated libraries)
If you want to use: FaceDetector, ARKit, or Payments you need to eject it to ExpoKit
Ejecting it to ExpoKit has a trade-off of features of Expo, e.g. you cannot share via a QR code
When ejecting to ExpoKit you are limited to the react-native version that is supported by ExpoKit then
Debugging in ExpoKit (with native modules) is a lot more complicated, since it mixes two languages and different libraries (no official Expo support any more)
Sources:
Detaching Expo Apps to ExpoKit: Concepts
Difference between react-native-init and create-react-native-app #516
Ejecting to ExpoKit
The answer of Brent Vatne is fine, but I'd like to add some details.
Expo expands the API surface of React Native
React Native does not give you all the JavaScript APIs you need out of the box, but only most primitive features. React Native developers are expected to use Android Studio or Xcode to link additional native libraries.
Expo aims to enhance React Native and provide all the JavaScript APIs you need for the most common needs. It is basically a set of well-defined quality native libs already packaged for you in a single lib: ExpoKit. Sometimes these libraries are actually already existing in the React Native world, and integrated into ExpoKit.
It is also important to notice that the Expo team can't include every library out there into ExpoKit (which may create some frustration) because the Hello, World! app size would grow, as it would ship a lot of API's that wouldn't be used in most apps.
Expo provides over-the-air JavaScript updates
Like other systems (CodePush, etc.), Expo provides a system to update your app over the air. This means you upload your JavaScript bundle on a CDN and the mobile apps will automatically download and use the new JavaScript code on next startup (without requesting a publication/review from the stores).
Expo provides a CLI tool to upload/manage the JavaScript bundles on their CDN. For development you can also choose to become the CDN and host the JavaScript bundle on localhost. And Expo XDE is just a visual wrapper on the CLI.
Expo provides a generic client
The Expo client is a generic client that permits to load any app that is compatible with Expo. All the Expo apps do share the exact same native runtime (React Native + ExpoKit). The only difference is the JavaScript code that we give them. The Expo apps you publish to the app stores have your JavaScript bundle URL hardcoded in it. The Expo client is build in a specific way so that you can choose from which URL to load the JS, by scanning a QR code or providing a URL.
Note that this client can also load JavaScript bundles from localhost, and make your development experience easier: There isn't any need for Xcode or Android Studio, and it gets much faster to get your first Hello, World! app running on the phone (from hours to minutes). You can actually develop on an iPhone without a Mac and the setup takes two minutes.
Actually, as the Expo SDK can be upgraded, the Expo client includes a compatibility layer so that it is able to run the last five SDK versions.
Expo provides a build service
As all the Expo apps share the same native code, Expo is able to easily build these apps for you. They have created a cloud build service.
The major thing that differentiate two apps built by Expo is just the hardcoded URL to which the app is supposed to download the JavaScript bundle to run.
Expo does some other things for you, like providing a declarative way to setup app icons, orientations, permissions, API keys, helping you setup push notifications, provisioning profiles... many settings have to be hardcoded at build time in the app and can't be changed over the air.
Expo is to React Native what PhoneGap is to Cordova
React Native is similar Cordova. It is not the same view technology (native vs webview), but both allow you to control native features from JavaScript, and both offer a plugin system so that developers can easily add new JavaScript and native bindings.
PhoneGap is similar to Expo. They both try to enrich the raw API of the underlying platform they are built on with a predefined set of additional native plugins. PhoneGap also offers a build service and has a generic client that work as long as you use the approved plugins.
Conclusion
As you can see, Expo is a set of tools. At the end, it permits to easily develop, share and publish to the stores your mobile projects. It is quite similar to the PhoneGap experience (but a lot better and less confusing).
I will definitively recommend Expo for any new React Native greenfield project, except these two cases:
You already know you need API's that are not available in Expo and won't be anytime soon
You care a lot about your app size (Hello, World! is more than 25 MB due to the large size of ExpoKit, but after that it does not increase much as it is just JavaScript)
It is explained in the official Expo documentation
What is the difference between Expo and React Native?
Expo is kind of like Rails for React Native. Lots of things are set up for you, so it’s quicker to get started and on the right path.
With Expo, you don’t need Xcode or Android Studio. You just write JavaScript using whatever text editor you are comfortable with (Atom, vim, emacs, Sublime, VS Code, whatever you like). You can run XDE (our desktop software) on Mac, Windows, and Linux.
Here are some of the things Expo gives you out of the box that work right away:
Support for iOS and Android
You can use apps written in Expo on both iOS and Android right out of the box. You don’t need to go through a separate build process for each one. Just open any Expo app in the Expo Client app from the App Store on either iOS or Android (or in a simulator or emulator on your computer).
Push Notifications
Push notifications work right out of the box across both iOS and Android, using a single, unified API. You don’t have to set up APNS and GCM/FCM or configure ZeroPush or anything like that. We think we’ve made this as easy as it can be right now.
Facebook Login
This can take a long time to get set up properly yourself, but you should be able to get it working in 10 minutes or less on Expo.
Instant Updating
All Expo apps can be updated in seconds by just clicking Publish in XDE. You don’t have to set anything up; it just works this way. If you aren’t using Expo, you’d either use Microsoft Code Push or roll your own solution for this problem
Asset Management
Images, videos, fonts, etc. are all distributed dynamically over the Internet with Expo. This means they work with instant updating and can be changed on the fly. The asset management system built-in to Expo takes care of uploading all the assets in your repo to a CDN so they’ll load quickly for anyone.
Without Expo, the normal thing to do is to bundle your assets into your app which means you can’t change them. Or you’d have to manage putting your assets on a CDN or similar yourself.
Easier Updating To New React Native Releases
We do new releases of Expo every few weeks. You can stay on an old version of React Native if you like, or upgrade to a new one, without worrying about rebuilding your app binary. You can worry about upgrading the JavaScript on your own time.
But no native modules…
The most limiting thing about Expo is that you can’t add in your own native modules without detaching and using ExpoKit.
Expo CLI
Pros:
No need to install Android Studio or Xcode to start building.
Not a lot of configuration required.
Mobile UI to easily view on both Android and iPhone using barcode scanning. Also easier to view with online iPhone and Android simulators.
Faster setup and development.
Cons:
Native dependencies cannot be added.
Creating .apk and .ipa files is difficult.
Size of apk/ipa is huge.
React Native CLI
Pros:
Easily add native dependencies.
Creating .apk and .ipa files is much easier than with Expo
Note: React Native CLI is the framework to use to work directly with the React Native framework.
Cons:
High level of configuration required.
Basic knowledge of Android and iOS folder structure required.
As you can see, both approaches have their pros and cons; you should always decide which to use based on your needs for the project.
The answers about advantages and disadvantages of Expo and React Native CLI are complete. I want to mention another point as my personal experience.
Expo contains many modules by default in the project and it makes easier to work with it. But it has a big problem in the production phase, because the built Android and iOS versions have such a great size. For example, if you have a single page with a 'Hello, World!', the APK file size would be about 19 MB. Having a same project in React Native CLI will result in an app with the size of 6 MB.
So personally I do not recommend using Expo if you want to develop a commercial app.
I would make a note here that Expo is using an older version of React, 16.5, which would prohibit you from using the new hooks feature.
If you decide to go with Expo, be mindful to watch your version controls. Older versions of, say, react-navigation will need to be used with the 16.5 version if you are getting weird errors.
Expo is a wrapper of React Native CLI, which does things under the hood for the ease of developers. The most common problem that Expo solves is that the developer doesn't have to worry about the linking issues of the libraries that often occur in React Native CLI. Expo comes up with tons of libraries now that are extremely helpful for robust development. One of the benefits of Expo is you can develop an app for Android and iOS without having a Mac through Expo mobile application.
As it has tons of benefits, there are some cons of using Expo:
App size increases like hell. A simple Hello, World! app size is more than 30 MB
At times when you need to implement some native functionality into your app, you will need to eject from Expo and go back to React Native CLI. And you can never revert it back to Expo CLI.
I've experienced more than a year that works with Expo.
If the size of the app is not important for you, use Expo because it's easy to implement Map and Push easier than React-native, but at the end of the project, if you want to publish app in Google Play or another store, you have a challenge removing some permissions in your APK.
In React Native you can change everything, but for importing some library, such as push notification or the map, it needs some challenges too, because you have to add these libraries manually to Android and iOS projects.
A summary of the documentation and answers from Expo employees:
React Native init:
Advantages
You can add native modules written in Java or Objective-C (probably the only but the strongest one)
Disadvantages
Needs Android Studio and Xcode to run the projects
You can't develop for iOS without having a Mac
Device has to be connected via USB to use it for testing
Fonts need to be imported manually in Xcode
If you want to share the app you need to send the whole .apk / .ipa file
Does not provide JavaScript APIs out of the box, e.g., Push-Notifications, Asset Manager, they need to be manually installed and linked with npm for example
Setting up a working project properly (including device configuration) is rather complicated and can take time
Expo
Advantages
Setting up a project is easy and can be done in minutes
You (and other people) can open the project while you're working on it
Sharing the app is easy (via a QR code or link), you don't have to send the whole .apk or .ipa file
No build necessary to run the app
Integrates some basic libraries in a standard project (Push Notifications, Asset Manager, etc.)
You can eject it to ExpoKit and integrate native code continuing using some of the Expo features, but not all of them
Expo can build .apk and .ipa files (distribution to stores possible with Expo)
Disadvantages
You can't add native modules (probably a game changer for some)
You can't use libraries that use native code in Objective-C/Java
The standard Hello World app is about 25MB big (because of the integrated libraries)
If you want to use: FaceDetector, ARKit, or Payments you need to eject it to ExpoKit
Ejecting it to ExpoKit has a trade-off of features of Expo, e.g. you cannot share via a QR code
When ejecting to ExpoKit you are limited to the react-native version that is supported by ExpoKit then
Debugging in ExpoKit (with native modules) is a lot more complicated, since it mixes two languages and different libraries (no official Expo support any more)
Expo and React Native are two popular tools for building mobile apps, but they have some differences. Expo is a free and open-source platform that allows developers to quickly build apps with JavaScript and React Native. It provides a set of tools, libraries, and services that make it easier to get started with building a mobile app. React Native, on the other hand, is a framework for building mobile apps using React. React Native provides a more direct way to access native APIs and components, and allows for more customization and control over the app development process. In summary, Expo provides a faster and easier way to get started with building a mobile app, while React Native provides more control and customization.
Another difference between Expo and React Native is the deployment process. With Expo, you can publish your app directly to the app stores with just a few clicks. You can also take advantage of other services that Expo provides, such as push notifications and authentication. On the other hand, when building a React Native app, you'll need to use tools like Xcode or Android Studio to compile and package the app for deployment. Additionally, you'll have to handle the distribution process yourself, which can be time-consuming and complex.
In terms of performance, React Native generally has better performance compared to Expo as it has a direct access to native APIs and components, whereas Expo relies on its SDK. However, the performance difference may not be significant in many cases.
In conclusion, both Expo and React Native have their own pros and cons, and the choice between them depends on the specific requirements and goals of your project. If you're just starting out with mobile app development and want a fast and easy way to get started, Expo is a great option. However, if you want more control and customization, React Native might be the better choice.
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've been thinking of creating an hybrid app. I worked with ionic before, but i don't have any clue about react.
What i exactly needed is 'code once run anywhere' approach. The angular 2 is doing great in that i can write code for web app, android , apple devices and even windows.
I want to know whether i can do this in React. Can I create an app with react which runs on both web and mobile app as platform independent.
Thanks in advance!
Angular 2 and React are great frameworks/library(for react) which can run almost anywhere. In fact lets first determine what we mean with anywhere.
Angular 2 can server that app on web and if you are using a responsive format can serve mobile devices as well really fast. On devices you can serve it with ionic but the catch here is that this will be served with webviews which is actually a small placement inside the app to show html content. This rendering is rubbish if you want to serve native experience to the user. If not, then great ! Also you can have windows phones as well.
React on the other hand is easy to go in to code fast. I recommend using redux (which might take a while to get used to). Also with responsive design can serve many web devices really fast. Now on the smartphones the experience is native. Yes exactly native ! So if you plan the application correctly and split the logic right you can serve from the same app both application web + mobile. For windows phones now there is a limitation.
For desktops you can use electron as well and have it all!
I guess for me you must consider what your target is (time, devices, experience) and then decide.
Have fun!
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