I'm using:
window.open(`twitter://post?text=${caption}`, "_system");
to post tweets from my Ionic 2 app.
This successfully opens the app and creates the tweet.
After the post the twitter just crashes and my app crashes too.
I could get this log from Android Studio:
https://www.dropbox.com/s/o1d9cr6htug4ai6/Screenshot%202017-01-26%2018.05.09.png?dl=0
This happens both with Android and iOS phones.
Anyone has seen this issue?
Thanks
Why not use InAppBrowser ?
import {InAppBrowser} from 'ionic-native';
...
let browser = new InAppBrowser('https://ionic.io', '_system');
But the better solution you want is ionic built in social sharing plugin
import { SocialSharing } from 'ionic-native';
// Check if sharing via email is supported
SocialSharing.canShareViaEmail().then(() => {
// Sharing via email is possible
}).catch(() => {
// Sharing via email is not possible
});
// Share via email
SocialSharing.shareViaTwitter(message, image, url).then(() => {
// Success!
}).catch(() => {
// Error!
});
Related
I am trying to set up deep linking for my IOS app using push notifications and can not get notifications to direct a user to a specific screen on a physical device (downloaded via TestFlight).
React Native: 0.66.4
React Navigation: v6
Current Situation
Test push notifications through AWS Pinpoint work (they are successfully sent to a device), but will redirect a user to the wrong route (the initial route / home screen) of the application even when using a deep link. The deep link I am passing through AWS Pinpoint is in the form 'appName://ScreenName' (without the quotes).
The deep link to the page I want the user to go to works, but not as a push notification. For example, if I open Notes on my phone and type 'appName://ScreenName' and press the link I will be redirected to the deep link in my app. This convinces me that deep linking is set up properly, maybe I am wrong here?
If I hardcode the url scheme I want to use into my app.js file (running in development on a physical device) I am directed to the proper screen.
It appears that deep linking is working but Linking.getInitialURL() is not returning the url scheme from a push notifications. The url scheme works, but not as a push notification, whether the app is running in the background or not.
App.js
const config = {
screens: {
'ScreenName': "ScreenName",
},
}
const linking = {
prefixes: ['https://appName.com', 'appName://'],
config,
};
const handleOpenUrl = (event) => {
if (event && event.url) {
const route = event.url.replace(/.*?:\/\//g, "")
if (route?.includes("setmpin")) {
let { hostname, path, queryParams } = Linking.parse(route)
const params = path.split("/")[1]
const listener = Linking.addEventListener(
"url",
handleURL(path.split("/")[0], params)
)
}
}
}
useEffect(() => {
Linking.getInitialURL().then((url) => {
const supported = Linking.canOpenURL(url)
if (supported) {
Linking.openURL(url)
}
})
Linking.addEventListener("url", handleOpenUrl);
return () => {
Linking.removeAllListeners("url");
};
}, [])
Questions...
Am I missing anything glaring here, I have read several stackoverflow and similar posts and am not sure what I have missed.
Am I right to believe that deep linking is setup properly since I can test deep links in my Notes app or by hardcoding the url scheme in my App.js file?
Is there a way to validate what url is being passed by Pinpoint? I believe this is what is driving the issue but do not know how I can check this since push notifications only work on my physical device in production.
Thanks! Happy to share any additional information as well...
I'm using Cloud Messaging from react-native-firebase 7.0.1.
I do not want to store iOS device tokens in firebase, so I'm using getAPNSToken() method and then storing it on my backend.
I'm able to send notification on a device and after pressing it, the application opens.
But when I'm trying to get message from getInitialNotification() or onNotificationOpenedApp() it always returns null/undefined.
It works every time on Android.
PushHandler.js
import React from 'react';
import messaging from '#react-native-firebase/messaging';
export default class PushHandler extends React.Component {
constructor(props) {
super(props);
this.messageApp = messaging();
}
componentDidMount() {
this.messageApp.onNotificationOpenedApp(remoteMessage => {
if (remoteMessage) { // <- always null on iOS
// handle notification
}
});
this.messageApp.getInitialNotification().then(initialMessage => {
if (initialMessage) { // <- always undefined on iOS
// handle notification
}
});
}
render() {
return null;
}
}
Just realized that according to the docs, these functions only work when sending and receiving notifications via FCM, which is why you aren't seeing these work when sending them manually through APNS.
This package will allow for leverage getInitialNotification and the other function: https://github.com/react-native-community/push-notification-ios
It used to work before. I mean, for the RNFirebase 5.x.x versions.
For some reason, the maintainers of the library decided to only send those events up to the JS layer when it's a Firebase Cloud Message coming through.
Here is the IF statement:
https://github.com/invertase/react-native-firebase/blob/master/packages/messaging/ios/RNFBMessaging/RNFBMessaging%2BUNUserNotificationCenter.m#L89
I removed the IF statement it seems to be working as before.
But yeah, that's the new behavior of the RN-Firebase library.
I am integrating UPI payment in my Ionic App.
I have injected WebIntent in the constructor of payment.ts and I call method upi() defined in payment.ts on Pay button click in payment.html
upi method defination :
upi(){
const options = {
action : this.webIntent.ACTION_VIEW,
url : 'upi://pay?pa=8400000701#upi&pn=game&tid=cxnkjcnkjdfdvjndkjfvn&tr=4894398cndhcd23&am=10&cu=INR&tn=App Payment'
};
// Open the intent with options
this.webIntent.startActivityForResult(options).then(onSuccess=> {
console.log('Success', onSuccess);
alert('Payment Successfully done.');
},
onError=> {
alert('error');
});
}
I am using Ionic V4 with Cordova and testing the app on my android device.
On pressing Pay button installed UPI apps are not being shown and alert('error') is being executed always.
Please help me with this.
I have a mobile app built in Ionic, and am using Azure B2C to authenticate clients. It requires I navigate out to get use sign-in, and then retrieve a token in response. The trouble seems to be how to return back to my app while parsing the token.
What I am doing is using either window.open or InAppBrowser, like:
ref = window.open(url, '_self', 'location=no, toolbar=yes');
response location url:
localhost:8080/#access_token=<my_access_token>&token_type=Bearer&expires_in=3600&id_token=<my_id_token>
In Xcode iPhone simulator, Safari reports: Safari cannot open the page because it could not connect to the server.
Let's say I have this logic:
var standalone = window.navigator.standalone,
userAgent = window.navigator.userAgent.toLowerCase(),
safari = /safari/.test( userAgent ),
ios = /iphone|ipod|ipad/.test( userAgent );
if( ios ) {
if ( !standalone && safari ) {
//browser
} else if ( standalone && !safari ) {
//standalone
} else if ( !standalone && !safari ) {
//uiwebview
};
} else {
//not iOS
};
I believe I need to use window.open for cases of browser? And in case of standalone/native I would use InAppBrowser?
I am looking for some good example of how to manage getting token back from browser to either a web or native ios and android app.
I started thinking that deeplinking might be the way I need to get back to my native app.
FWIW: My config at the Azure end offers a native options with Redirect URI of either urn:ietf:wg:oauth:2.0:oob or https://login.microsoftonline.com/tfp/oauth2/nativeclient
Thanks
How to properly link a user to reviews page at App Store app in React Native application on iOS?
Use Linking to open up the url to the app store. To construct the proper url, follow the instructions for iOS and/or android. E.g.
Linking.openURL('market://details?id=myandroidappid')
or
Linking.openURL('itms-apps://itunes.apple.com/us/app/apple-store/myiosappid?mt=8')
For iOS you Have to add LSApplicationQueriesSchemes as Array param to Info.plist and add items to it.
For example to AppStore linking I use itms-apps as one of params in this array.
For example:
<key>LSApplicationQueriesSchemes</key>
<array>
<string>itms-apps</string>
</array>
Your link should be like this
itms-apps://itunes.apple.com/us/app/id${APP_STORE_LINK_ID}?mt=8.
Well. Now you have all stuff to do Link component with method
handleClick () {
Linking.canOpenURL(link).then(supported => {
supported && Linking.openURL(link);
}, (err) => console.log(err));
}
This is something similar, it shows an alert box to update the app and it opens the play store or the app store depending on their device os.
function updateAppNotice(){
const APP_STORE_LINK = 'itms://itunes.apple.com/us/app/apple-store/myiosappid?mt=8';
const PLAY_STORE_LINK = 'market://details?id=myandroidappid';
Alert.alert(
'Update Available',
'This version of the app is outdated. Please update app from the '+(Platform.OS =='ios' ? 'app store' : 'play store')+'.',
[
{text: 'Update Now', onPress: () => {
if(Platform.OS =='ios'){
Linking.openURL(APP_STORE_LINK).catch(err => console.error('An error occurred', err));
}
else{
Linking.openURL(PLAY_STORE_LINK).catch(err => console.error('An error occurred', err));
}
}},
]
);
}
I am using this library. seems pretty good. You just have to specify the package name and App store ID and call the function. And it's cross-platform too.
render() {
return (
<View>
<Button title="Rate App" onPress={()=>{
let options = {
AppleAppID:"2193813192",
GooglePackageName:"com.mywebsite.myapp",
AmazonPackageName:"com.mywebsite.myapp",
OtherAndroidURL:"http://www.randomappstore.com/app/47172391",
preferredAndroidMarket: AndroidMarket.Google,
preferInApp:false,
openAppStoreIfInAppFails:true,
fallbackPlatformURL:"http://www.mywebsite.com/myapp.html",
}
Rate.rate(options, (success)=>{
if (success) {
// this technically only tells us if the user successfully went to the Review Page. Whether they actually did anything, we do not know.
this.setState({rated:true})
}
})
} />
</View>
)
}
2021 Update:
Some of the other answers are quite old, and don't support using the in-app review API added in iOS 10.3 (SKStoreReviewController) and Android 5 (ReviewManager). If you're adding reviews to your React Native app in 2021 you should ideally use these if they are available.
Expo provide a library, https://docs.expo.io/versions/latest/sdk/storereview/ , which will use these newer APIs if they are supported on the user's device, and falls back to opening the store page if not.
There is also https://github.com/KjellConnelly/react-native-rate which has similar functionality, but with a lot more configuration options. E.g. you can decide whether or not to use the in-app API some or all of the time (which might be a good idea, as the in-app API has a lot less friction for the user but you can only ask a few times a year).
Using third party libraries, in ios it is opening itunes, let me tell you the exact way for opening appstore.
First thing your should be live and it'll work on physical device(simulator is not guaranteed)
const url = Platform.OS === 'android' ?
'https://play.google.com/store/apps/details?id=YOUR_APP_ID' : 'https://apps.apple.com/us/app/doorhub-driver/id_YOUR_APP_ID'
Linking.openURL(url)
You can find your ios link by searching your app on appstore and copy that url.