Looking into using a heatmap with my react native application using the expo sdk- really do not wish to detach the app from expo, so i was wondering if there was a way to get heatmap.js into my application without linking library to xcode?
I've seen this, and get the approach of creating a webview to display the heatmap in but you still need to link heatmap.min.js to xcode bundle
Related
I have built my react native project using expo and expo go to run it. I now need Bluetooth functionality to scan and take data from a Bluetooth device (to create graphs). Am I able to keep using expo for this or will I have to change to react native CLI to have Bluetooth in my app? Will any expo-related code now be useless if so?
I have not tried any solutions yet and I am looking advice
I am fairly new to React Native and I am trying to implement a map that can be used in Web, Android and iOS.
The resources I have found online, are for implementing Android and iOS with react-native-maps or just in Web with react-native-web-maps. Is there an easy way to incorporate all of them in React Native?
I am also using the Expo CLI to run the server. I have not run npm run eject to create the OS-specific files as I am trying to make the code as cross-platform as possible.
I don't know if any package works straight away for all environments but you can conditionally render map component for mobile and for web.
I have used these following packages in mobile and web versions of Expo app, they work pretty similarly and are easy to use and implement:
-mobile: #react-navigation/native
-web: #react-google-maps/api
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.
So currently, I'm working on moving my React Native project outside of Expo and using regular React Native.
As I expect, it generates an ios and Android folder. However, there are about 5k+ worth of files and folders being generated here.
I know that React Native allows you to write your hybrid code in JSX which generates native code in your android and ios folder. You can also write custom native code in the android and ios folders.
My question, how do I know what exactly React Native generates in those folders and which of those files won't be clobbered if I make changes to it?
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