I'm working with React Native and Square Point of Sale. I'm using Web API for Android.
Also I have installed Square Point of Sale.
This is my code:
componentDidMount() {
let url ="intent:#Intent;action=com.squareup.pos.action.CHARGE;package=com.squareup;S.browser_fallback_url=https://my.website.com/index.html;S.com.squareup.pos.WEB_CALLBACK_URI=https://my.website.com/index.html;S.com.squareup.pos.CLIENT_ID=sq0ids-yOurCLieNtId;S.com.squareup.pos.API_VERSION=v2.0;i.com.squareup.pos.TOTAL_AMOUNT=100;S.com.squareup.pos.CURRENCY_CODE=USD;S.com.squareup.pos.TENDER_TYPES=com.squareup.pos.TENDER_CARD,com.squareup.pos.TENDER_CARD_ON_FILE,com.squareup.pos.TENDER_CASH,com.squareup.pos.TENDER_OTHER;end";
Linking.openURL(url).catch(err => console.error("An error occurred", err));
}
This is my error message:
Could not open URL 'intent:#Intent; ... end': No Activity found to handle Intent { act=android.intent.action.VIEW dat=intent: flg=0x10000000 }
What I'm doing wrong?
I tried building using the web API but found that the flow wasn't great. The user doesn't always make it back to the app; sometimes they get stuck on the website.
I built react-native-square-pos to make things easier for the next developer. It uses Native Modules to communicate with the Android / iOS Square PoS APIs.. so you don't have to write Java or Objective-C.
The intent:#Intent that you're using there isn't really going to work from within React Native, since that is used for going from a web browser on an Android device into the Square POS app.
The Android Web API intent is intended to do a hand-off from your browser to the Square POS application, not from application to application.
It sounds like what you'd be wanting to do is use the Square Point of Sale SDK for Android with your React Native application. You'll want to take a look at https://facebook.github.io/react-native/docs/native-modules-android.html about how to link a native module with your React Native application.
Related
I've come across kinda difficult issue for me.
In project where I work currently we have web application written in react + javascript. It's usable on desktop and tablets. On tablets it also uses functionalities like a hardware camera to take pictures and here comes the issue. Now what we have on tablets is web application in react + js and it's put inside a webview two applications - one for Android and one for iOS. That causes a problem because we need two applications that do the same thing, also it requires knowledge of Java and Swift (which is kinda problematic, since all of us are pure frontend developers). So we decided to rewrite that native application to something similar to our frontend that also will have one codebase that will run on both Android and iOS.
Before everything, I'm totally newbie in mobile development.
Right now I've made a small proof of concept in Ionic with React in it (that POC was also checking if we can use the same libraries for scanning documents, which was successful). It was made with a help of that tutorial: https://ionicframework.com/docs/react/your-first-app
I could scan documents and display some data from it and everything worked. Next task was to display our web application inside that Ionic one and there some issue occured.
I've used both Capacitor Browser (https://capacitorjs.com/docs/apis/browser)
const openCapacitorSite = async () => {
const url = 'url to app';
await Browser.open({ url });
};
And Ionic In-App browser (https://ionicframework.com/docs/native/in-app-browser)
const openWebview = async () => {
InAppBrowser.create('url to app');
};
Both opened desired url, it didn't look as good as in our current solution on Android and iOS but it's not that big deal since I can style it somehow. Bigger concern is communication between web app and native app. Currently we have something called web-bridge. Web app is required to be run inside a host client application that supports Web Bridges and it should bind an object to window.bridge. Now it uses two API's.
Native Application API
The native application should bind an object to current script context's window.bridge that implements the following interface. This can be done in any language that has a mechanism to bind an object to the browser's script context and has a this bridge capability.
interface Bridge
{
//JSObject eventData ends up being JSON. this is the JxBrowser implementation requirement.
//JSFunction is a function that can be executed on the current javascript context.
public void callHandler(String eventName, JSObject eventData, JSFunction callback);
//This should be used to subscribe a function to an event being called. Each time "eventName" is called via callHandler, this callback should also be called.
public void registerHandler(String eventName, JSFunction callback);
}
Javascript API
sendData - Send data to the host application. This ends up calling callHandler on the Native application's Bridge implementation registerHandler - Register a callback to be called each time a specific event is raised. This ends up calling registerHandler on the Native application's Bridge implementation
The host application expects a consistent format of data. For each command, type is mandatory, other fields vary based on the type of command. For example, the log command is as follows:
{
type: "NATIVE_LOG",
message: "Hello native log"
}
So the issue now it create similar Web Bridge in Ionic app, because the whole flow on the webapp works.
Google oAuth is not supported in android webView. Google recommends to use chrome custom tab for proceeding oAuth. I have also requirements of js call from my web app to native. How to configure to call native methods from web app using chrome custom tab in android similarly like js interface in webView?
Update 1
This mod Chang marked the post as duplicate but the post is different. I don't want to run any JS in my web app from native. I want to invoke method from web app to my native code via JS interface. Is there any way for CCT?
Based on Can I Inject Javascript Code into Chrome Custom Tabs the answer appears to be no.
Chrome Custom Tab is based on Chrome itself and has the same security model. The web content is only allowed access to the Web APIs (camera, device orientation, etc.) and has no access to the native app. At best the native app can capture a URI.
Even the Chrome Custom Tab documentation state that the way for a native app to handle content:
Some URLs can be handled by native applications. If the user has the Twitter app installed and clicks on a link to a tweet. She expects that the Twitter application will handle it.
Before opening an url from your application, check if a native alternative is available and use it.
Implies that either a native app handles a URL or not. My interpretation of Chrome Custom Tab is a skinnable Chrome component adjacent to the native app rather than internal to a native app like a WebView where a Javascript bridge exists.
Your desire for a Javascript bridge from a web app would mean that there would be a arbitrary way for any website code to interact outside of the web container. The rational as to why that is not allowed is given as the responses in the first link.
I am new to react-native world. Following few tutorials, I found that it react-native app runs on javascript engine on mobile. I am following ios tutorial. So when I go to localhost:8081/index.ios.bundle it loads JS for the app. I know I can use ngrok to manipulate this URL.
I have multiple concerns with this:-
If I change the URL of js from something local to something remote, this would result in a completely new app and now I don't need to go through the App Store to upgrade my app version. Can this be a potential issue in the future?
Since anybody can open this JS in a browser which might have important information like client id and secret for the app, can this be an issue as well?
I am not 100% sure. You can indeed update hybrid app easier and if it is only a quick fix you don't need to go through apple store verification process. Apple can also delete your app and ban you if you don't follow guidelines. Usually your js is local in production for instant app start time, and the network is used only for fresh data.
This is solved with an authentication mechanism.
I'm building a web app using Three.js (Javascript) and it's VR capabilities for mobile devices (android particullary). The issue I'm facing is that after some time screen gets dimmed and turned off. I was trying to find an API to keep the display on, but couldn't find any mention about it. However, if you go to http://vr.chromeexperiments.com/ and run any of those demos, the screen will be always on. I was trying to study their code but didn't find the solution. How do they do it? Thanks
Add a flag in the onCreate method of your activity.
#Override
protected void onCreate(Bundle b) {
super.onCreate(b);
getWindow().addFlags(WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON);
}
Read more here.
If you are running the app from any Browser (like chrome) is not possible to keep the screen awaken since you can't modify the device behavior via Javascript.
You can either get a third party app like KeepScreenOn (https://play.google.com/store/apps/details?id=com.nbondarchuk.android.keepscn&hl=es_419) to do that job or wrap the app inside a Webview using a hybrid App framework like PhoneGap or maybe Titanium. There you can use plug ins to do that job as well (like this one: https://build.phonegap.com/plugins/355)
I am developing location based android application using cordova (ionicframework+angularjs).So when app is in background i have to get the userlocation ,so that i can provide location based push notification.
Is that possible to run the app in background?. Please help
In your requirement you need to use android Services.Otherwise you cannot run GPS Tracker in background(When app is in background). So if you need to run background service i think its not possible to do with ionicframework.Because its not native app development tool its only working with front end like browser base application. So you have to use native application development tool.