Why when I init a new react native project:
react-native init awesomeProject
and run it from XCode I get more the 100+ warnings:
Pretty normal, there might be some incompatibilities due to old React Native core code such as deprecated swift methods or maybe old Objective-C code remaining in the core, but are not a problem for you to develop normally. If you don't use third party libraries you might want to try expo!
Expo is an SDK prepared to work along with react native api. It offers you a full javascript built component to use with your React Native code and you can forget about managing the iOS and Android projects as they will do it for you.
If you want to give it a try:
http://www.expo.io
Related
I am trying to create an app using React Native that runs on iOS, Android, macOS and Windows. An advantage of being able to use React Native is that you can share code between platforms.
I am following the setup guides for React Native macOS and Windows, but in the guides, they guide you through creating a new app from scratch for each platform. As I want to use the same app, so I don't have to write the same code twice, I create the macOS app following the guide. Then, in this app, I use the command npx react-native-windows-init --overwrite from the Windows guide to initialise the Windows platform. But when I then go to run the macOS app using the command npx react-native run-macos, I get the error:
Cannot find module 'metro-config/src/defaults/exclusionList'
and
no bundle URL present
One thing I find strange about the setup guides is that for macOS it tells you to use React Native 0.63 and for Windows 0.66. I used 0.66 for both, maybe this is the problem. But if it is, and each platform requires different versions of React Native, how can I use the one app / codebase for both platforms? This goes against one of React Native's core premises:
Create platform-specific versions of components so a single codebase can share code across platforms.
Is it possible to create a single app for both desktop platforms like you would with iOS and Android, and if so, how?
Yes, you can. You will have to create a mono repo
Or you can use mono repo boilerplate. Here is a link to it
https://github.com/mmazzarolo/react-native-universal-monorepo
Relatively new to React Native, I’m using AirBnb’s react native maps package in my app, and all the tutorials talk about getting Google Maps (rather than Apple Maps) to work in iOS by going into my iOS folder and managing the cocoapods dependencies etc.
I don’t completely remember, but I created my app with expo init, or maybe with create-react-native-app, and I don’t have an iOS folder. From what I’ve read it looks like I can get the separate folders by ejecting my app.
Here is what my actual question is about: The question is basically “Can I use Google Maps in an iOS MapView and still code my app in React Native and run it in Expo in both Xcode simulator and Android emulator, and still have hot/live loading?”
You could abstract the question just a bit and phrase it as “Can I follow the instructions on, say, a MapView tutorial, to use native dependencies, having iOS and Android folders, and still write my app in React Native and run it in both simulators with hot/live loading?”
(Or, once I’m using the native stuff do I have to code in Swift/Java and Xcode/Android Studio?)
As noted in the expo documentation, expo already contains a google maps map view.
https://docs.expo.io/versions/latest/sdk/map-view/
if you didn't create your app with expo but just with the create-react-native-app command you can use this package maintained by the RN community:
https://github.com/react-native-community/react-native-maps
This package uses native components so you need to link it (only if you don't use expo) and then you can just use it in your screens as a normal component.
I did a lot of research now to find out the exact differences and trade-offs between a React Native project, CRNA and an Expo project.
My main guidance was this
However I still don't understand what (dis-)advantages I have using ExpoKit with native code vs. a normal React Native project with native code, apart from the fact that I can't use Expo APIs in a normal React Native project.
I know that when I start a project in Expo I can eject it either as ExpoKit project or as React Native project.
In both I can use native code. In ExpoKit I can still use the Expo APIs in a normal React Native project I can't.
So my questions:
What would be my interest to use a react native project if I can use native code and all Expo APIs in an ExpoKit project? In an ExpoKit project I can still use all Expo APIs and all React Native APIs, right?!
Could I use Expo APIs in a React Native project if I install expo with npm install --save expo?
What is the difference between React Native API and Expo API?
ExpoKit is kind of a hybrid between "pure JS" Expo apps and "vanilla" React Native. At its core it's still a React Native project, but a few things differ about the build system, developer experience, and features available.
Features
As of today, most of the APIs in Expo's SDK are not available in a vanilla React Native project, but they are available in ExpoKit. We think this might change in the future, but it'll be a lot of work.
Expo's push notification service does not currently work in ExpoKit, nor for vanilla React Native.
Build System
Both vanilla RN apps and ExpoKit apps use Xcode and Android Studio to build the native code. iOS ExpoKit apps use CocoaPods to install dependencies, which can add a little bit of complexity to managing the native build. Android ExpoKit apps have additional Gradle configuration to build multiple versions of React Native into the same binary (this is used to enable over-the-air updates of multiple SDK versions of JS), which can sometimes increase the complexity of adding other React Native libraries.
The JavaScript for an ExpoKit and React Native project is built by Metro, although in ExpoKit you need to run Metro using Expo's XDE or exp tools so that they can handle extra configuration for the project. This means you run a command like exp start rather than react-native run-android.
Due to the current design of ExpoKit (although this may change in the future), some open source React Native libraries may have compatibility issues with ExpoKit. For example, if a native library expects to be able to request a reference to React Native's OkHttp instance on Android, there may be a type mismatch when running inside ExpoKit due to the namespacing Expo uses to allow multiple versions of React Native to compile. That said, these issues tend to be pretty rare, and we're working on a few different ways for ExpoKit to be more and more compatible with libraries in the ecosystem.
This multi-version support also means that ExpoKit binaries tend to be larger than corresponding vanilla React Native binaries, although that may change in the future.
Your subquestions
Some developers prefer to manage how their JS bundles and assets are distributed themselves, or they may need a library which isn't currently compatible with ExpoKit. Binary size is another reason why you may prefer vanilla RN.
It's not currently possible to use most Expo APIs in a React Native project. Some APIs available in the Expo SDK are bundled from open source projects (such as react-native-maps) and can be used with a vanilla RN project.
I'm not sure how to parse this question -- Expo APIs are currently just React Native APIs which know how to talk to each other and make certain assumptions about the environment they're running in.
Question from comment 1: You can modify the ExpoKit build all you want, although it may make it slightly harder to upgrade to a newer SDK release depending on how heavily you edit it.
Note to anyone who stumbles across this after 2020 ... ExpoKit has been deprecated so this whole question is moot.
From Expo's documentation: "ExpoKit is deprecated and support for ExpoKit will be removed after SDK 38. We recommend ejecting to the bare workflow instead."
I am new to React Native and I know that there are two ways to develop native applications using react native
1- react native init --> need to compile the native cod
==> Result is Native Application for Android "Android SDK required" and Native Application for IOS "Xcode required"
2- create react native app --> no need to compile the native code !!
as CRNA uses Expo_SDK to access native API, but :
Is the result app is really native! or Expo Sdk is like Cordova but used by React and if result native, Expo claims that the result is native!, have they cloned both Android Sdk and Xcode for IOS or how does it work ?!
Expo apps are React Native apps which contain the Expo SDK. The SDK is a native-and-JS library which provides access to the device’s system functionality (things like the camera, contacts, local storage, and other hardware). That means you don’t need to use Xcode or Android Studio, or write any native code, and it also makes your pure-JS project very portable because it can run in any native environment containing the Expo SDK.
Expo also provides UI components to handle a variety of use-cases that almost all apps will cover but are not baked into React Native core, e.g. icons, blur views, and more.
Finally, the Expo SDK provides access to services which typically are a pain to manage but are required by almost every app. Most popular among these: Expo can manage your Assets for you, it can take care of Push Notifications for you, and it can build native binaries which are ready to deploy to the app store.
You should take a look at the Expo doc
Expo app is as native as React native. They do the following things so you don't need to setup Android / iOS SDK locally.
provide Expo App on Android/iOS
so you can build the js code and use Expo App to debug during the development.
provide build server
once you run expo build command, expo will upload the compiled js code and build Android/iOS file on their server. You can download the built file from their server.
You can eject from the Expo, setup Android / iOS SDK locally, and build the app as normal React Native app
Expo (and react-native) apps use native (android and ios) ui components to render the apps ui, like any native android or ios app would. Therefore they can be considered as native apps.
However your app logic is executed within a javascript thread an will communicate with the native threads (through the react-native bridge) to modify the native ui components. Since the bridge is completely asynchronous this should not affect the native ui performance of your application. If you want to understand the communication between js and native code it may be a good start to read this guide.
2- create react native app --> no need to compile the native code !!
With expo there is no need to compile native code, as expo already includes a "ready to use build" of react-native along with several other common react-native libraries. In an expo app this will be used together with your javascript bundle which than communicates through the react-native bridge with the already present native part.
They are basically just abusing the fact that you can inject different javascript bundles into a prebuilt react-native app. (as long as you are using only accessing a subset of the native functionality of that prebuilt app)
Note that Appcenters codepush uses the same functionality and their setup integration actually delivers a nice example how different javascript bundles can be loaded without touching the native part:
in ios AppDelegate.m this line is changed:
original react-native js-bundle loading which always resolves a static bundle
return [[NSBundle mainBundle] URLForResource:#"main" withExtension:#"jsbundle"];
js-bundle loading with codepush which can resolve to different js-bunldes
return [CodePush bundleURL];
Link to full codepush ios integration guide
I've recently started react native and following guide on tutorial there are
2 option one is create the project via "create-react-native-app myproject" and other one is "react-native init myproject".
the first one(create-react-native-app) generates app.js only whereas other one generates index.android.js and index.ios.js..
I know somehow they are doing same job but whats the real diffirence here ? which one should I pick to start and when the other one is more usefull over?
The create-react-native-app ("CRNA") CLI builds a project template based on Expo, a third-party toolkit which allows you to write cross-platform React Native applications using only JavaScript, and provides a smoother workflow for getting the app running on a real device. In addition, Expo provides access to tons of native APIs, for which you'd normally need libraries or custom native code.
Expo is great, and in an ideal world, it is what most app developers would probably prefer to use, but Expo's architecture sets an unfortunate limitation: You cannot write custom Native Modules, or integrate third-party libraries which depend on custom native code that isn't build into Expo. This means you have only access to the native functionality provided by React Native and Expo, and cannot easily extend it.
By contrast, the react-native CLI's init command creates a plain React Native app template, with native iOS and Android projects you can modify. The downside of this approach is that you'll need to set up the native iOS and Android build chains on your computer, and it's significantly more cumbersome to get started developing and deploying your app.
Luckily, Expo provides a way to detach a CRNA app from their native app shell. This will convert a CRNA project into something similar to the plain project created by react-native init, but with access to all the Expo SDK functionality.
In practice, the best approach for most beginners and new projects is to start with create-react-native-app, and evaluate whether you'll need to detach later. Expo provides a handy guide to help making that decision.