How would one implement custom url encoding for React Native's Linking API for IOS?
I am using React-Native's Linking API to allow users to open simple http/https hyperlinks within my app using the basic example from the documentation:
Linking.canOpenURL(url).then(supported => {
if (supported) {
Linking.openURL(url);
} else {
console.log('Don\'t know how to open URI: ' + url);
}
});
On Android, the url being passed into Linking.openURL(url); is the same as what shows up in the browser bar when the link is opened. However, on IOS, the url is being encoded. Readability of the url aside, the main problem I'm having is the conversion of the hash character '#' to '%23' which is causing the link to not work properly. I would like to either move responsibility for url encoding to the React Native code prior to calling Linking.openURL(); or at least make an exception for the '#' character.
Related
I am using Ionic React / React Native to develop a mobile app. I want to use Leaflet to display the static map and markers. If the user click the markers, I want to open the coordinate in Google Map / Waze / any native map application then use that native app to navigate the user into the marker.
Is there a way to open the marked place into native map apps?
Google Map provides cross-platform deep linking universal URLs. If the native Google Map app is installed. It will open with that app, otherwise, use the default web browser installed on user's device.
You can use React Native Linking API to dynamically link to a specific location.
import { Linking, Alert } from "react-native";
async function openWithGoogleMap() {
/** Google Map API offers different URL to deep link to various locatioon and map ressources.
* Check their docs - https://developers.google.com/maps/documentation/urls/get-started
*/
const url =
"https://www.google.com/maps/search/?api=1&query=47.5951518%2C-122.3316393";
const supported = await Linking.canOpenURL(url);
if (supported) {
// Opening the link with some app, if the URL scheme is "http" the web link should be opened
// by some browser in the mobile
await Linking.openURL(url);
} else {
Alert.alert(`Don't know how to open this URL: ${url}`);
}
}
My React Native app has a website version. When an user click a link to our website, it will open my App using Deep links. Now I want to send some data from that url to my app, specifically the referer field in request header (for tracking tool search, like google.com, etc. ). I already have this piece of code in my app :
useEffect(() => {
const subscription = Linking.addEventListener('url', navigateScreen);
//navigateScreen is a function to navigate to screen of my App depending on url
return () => {
if (subscription) {
subscription?.remove();
}
};
}, [navigateScreen]);
So my question is can I have my App receive the request header of url or only the url itself ? If can how can I achieve it ?
I am working on the latest version of React-native. I cannot find any documentation to get the card nonce using the application_id and location_id of SquareUp.
Please suggest me how to integrate this payment method with React-Native application.
Also, suggest me package works best for this.
Use this: https://developer.squareup.com/docs/payment-form/payment-form-walkthrough
up to step 1.3 to generate the nonce in html
Host this page on github pages and force it to server over https (http wont work with square)
Embed your github page in WebView React Native or Expo. Retrieve the nonce from WebView and pass it to your API where the rest can be taken care of with the square api.
In the Quick-Start you'll find the method onCardNonceRequestSuccess(cardDetails) which is the callback for returning your information from Square. On that cardDetails parameter you'll find a key "nonce" that will contain your nonce that you need to send to your back end for processing.
async onCardNonceRequestSuccess(cardDetails) {
if (this.chargeServerHostIsSet()) {
try {
await chargeCardNonce(cardDetails.nonce);
SQIPCardEntry.completeCardEntry(() => {
showAlert('Your order was successful',
'Go to your Square dashbord to see this order reflected in the sales tab.');
});
} catch (error) {
SQIPCardEntry.showCardNonceProcessingError(error.message);
}
} else {
SQIPCardEntry.completeCardEntry(() => {
printCurlCommand(cardDetails.nonce, SQUARE_APP_ID);
showAlert(
'Nonce generated but not charged',
'Check your console for a CURL command to charge the nonce, or replace CHARGE_SERVER_HOST with your server host.',
);
});
}
}
Link to repo of above code
The example application should show most of what is necessary for integrating into a React Native application. The main piece that you need to change is the chargeCardNonce() function found here to POST that nonce to your backend.
I am currently trying to open an image that's saved in the cache from the react-native-camera module. According to this Open android Gallery App from react native app they managed to do it when they passed in the content:// url instead of the file:// url, but after some research I can't find anything on converting file uris to content - only the opposite. I can get the image file paths by:
import RNFS from 'react-native-fs'
import { Linking } from 'react-native'
RNFS.readDir(RNFS.CachesDirectoryPath)
.then(arr => RNFS.readDir(arr[0].path)) // The Camera directory
.then(arr => arr.forEach(item => {
const contentURI = somehowConvertPathToContentURI(item.path)
Linking.canOpenURL(contentURI)
.then(able => able ? Linking.openURL(contentURI) : console.log('No application available'))
.catch(console.log)
}))
.catch(console.log)
A logged path would be /data/user/0/com.myapp/cache/Camera/ad8db2ca-4739-47cc-b18d-c5147c8c26e0.jpg. Adding file:// in front will give me the file uri, what about content://?
As a side note, I'm able to directly show the image if I read and convert it to base64 with react-native-fs, then providing the base64 to react-native's <Image> component - but I'd like to open the app with a gallery application
How do you open a Bitcoin URL in a react native app? I am using React Native Linking to detect if there are any apps on the phone that can open a Bitcoin URL formatted according to BIP21. I have 3 apps installed that should handle it:
1) Coinbase
2) Breadwallet
3) Blockchain.info wallet
But it's not opening. Here's the code:
async _openWallet() {
const coinURL = 'bitcoin:15bMc6sQTiQ5jSqoRX3JzatAbQqJaffqup';
try {
const supported = await Linking.canOpenURL(coinURL);
if (supported) {
Linking.openURL(coinURL);
} else {
console.log('Could not find a compatible wallet on this device.');
}
} catch (error) {
console.log(error);
}
}
supported keeps returning false, which causes "Could not find a compatible wallet..." to execute. The weird thing is if I click on a Bitcoin URL on any random website via the Chrome / Safari browser, I get a popup that asks me if I want to open the URL in one of the above apps. So only URLs on websites are opening, but not URLs from inside react native code.
Any ideas?
Looks like every URI scheme you want to use at runtime must be defined up-front in Info.plist. Found the answer here: React Native: Linking API not discovering Uber app