React Native: Opening a push notification at a specific deeplink URL - react-native

I'm trying to open an app at a specific screen, from a push notification. My understanding is that I use a "deep link" to do this. I've set up react-navigation to handle the deep link (and AndroidManifest.xml & appDelegate.m), and can open the deep link with xcrun simctl openurl booted myapp://a/1 / adb shell am start -W -a android.intent.action.VIEW -d "myapp://a/1" app.bundle.name.
But I can't get the push notification to open the app, at the deep link, when the app is closed; it only opens the app on the home screen (on both iOS and Android). How do I get the app to open at the deep link (or alternatively, to read the contents of the push notification so that I can navigate to the correct screen myself)?
library versions:
react-native 0.62.2
#react-navigation 5.5.1
react-native-fcm 16.2.4

After some debugging, I found it was actually a problem in my code handling notifications. I was checking for an ID property in the notification body, but not all notifications have one. So once I removed this, it started working. So to make it work you should have something like:
// push handler component
class PushHandler extends React.Component {
componentDidMount() {
FCM.getInitialNotification(notification => {
if (!notification) {
// the app was not opened with a notification.
return;
}
// extract route from `notification` here
this.props.navigation.navigate(route);
}
}
// ... rest of push notification handling code
}
It also didn't have anything to do with deep linking. The this.props.navigation.navigate is just the plain in-app navigation.

Related

Onesignal pushNotification in react native

Hi I am using Onesignal for my application to send push notifications to my application, I am able to send the push notification and getting to my app, when i click on notification nothing is happening it is just disappearing, How can i open the application and after login to application i need to got to notifications screen, Is there anything i need to configure in onesignal and my native code. As of now i have done for android. Below is the code.
In app.js:
useEffect(() => {
OneSignal.setAppId("myAppId");
OneSignal.setNotificationOpenedHandler((notification) => {
console.log("OneSignal: notification opened:", notification);
});
}, []);
In build.gradle:
implementation 'com.onesignal:OneSignal:[4.0.0, 4.99.99]'

Open deep link url when clicking on FCB notification for both iOS and Android

I have a react-native app using react-native-firebase-messaging to send push notifications to android and iOS devices. I'm trying to embed a deep link in the FCM message so that users clicking on the notification will be routed to a specific section of the app. I've seen this SO post which shows how the link property can be added but it's specific to android. How can I add a deep link url to notifications sent to both iOS and Android devices?
Without having deep link you can use notification click handler of react-native-firebase-messaging and pass the data in the notification payload which screen you want to navigate.
Check this link for documentation and make sure you have register background handler in index.js as shown here
useEffect(() => {
// Assume a message-notification contains a "type" property in the data payload of the screen to open
messaging().onNotificationOpenedApp(remoteMessage => {
console.log(
'Notification caused app to open from background state:',
remoteMessage.notification,
);
navigation.navigate(remoteMessage.data.type);
});
// Check whether an initial notification is available
messaging()
.getInitialNotification()
.then(remoteMessage => {
if (remoteMessage) {
console.log(
'Notification caused app to open from quit state:',
remoteMessage.notification,
);
setInitialRoute(remoteMessage.data.type); // e.g. "Settings"
}
setLoading(false);
});
}, []);

Expo React Native - FaceID is not available in Expo Client

I'm trying to implement Face ID in my React Native project.
...
import * as LocalAuthentication from 'expo-local-authentication';
...
componentDidMount = async () => {
const hasAuth = await LocalAuthentication.hasHardwareAsync();
if(hasAuth)
LocalAuthentication.authenticateAsync();
}
...
When I run it in expo expo-start using my phone, it opens the iPhone page where ask for passcode (not faceID). After entering the passcode it returns the warning message below and the Face ID does not work.
FaceID is not available in Expo Client. You can use it in a standalone Expo app by providing `NSFaceIDUsageDescription`
I also added the NSFaceIDUsageDescription to my app.json.
"infoPlist": {
"NSFaceIDUsageDescription": "This app will optionally use Face ID or Touch ID to save login"
}
Expo Local Authentication FaceID doesnt work on expo client app, but you can test it building an archive IPA for IOS. expo build:ios -t archive. It will create a build for IOS and then you can test it.

Why Android App showing blank screen when coming out of an App with back button React Native Navigation?

I am working on React Native Application and integrated react-native-navigation package for navigation inside app, link of package
Android App got stuck and show blank screen. This happens if I am closing app using back button in case of Android app. At the end I have a listing screen, after reopen the application it shows blank screen because it's not calling Navigation.registerComponent again, it might be destroying app when closed using back button.
This is a code inside my index.js::
import { Navigation } from "react-native-navigation";
import App from './src/app';
Navigation.registerComponent("appName", () => App);
Killing the app and restarting would fix the stuck on splash screen issue. But shouldn't be stuck in the first place. Just an issue when closing through back button.
Does anyone have a fix for this? Please suggest how can I handle and call my Navigation.registerComponent once again after closing app using back button.
Environment
React Native Navigation version: 2.12.0
React Native version: 0.58
Platform(s) : Android only
To resolve this you need to make modification inside react-native-navigation package. Open NavigationActivity.java file and replace below code with new one:
Replace this code:
#Override
public void invokeDefaultOnBackPressed() {
if (!navigator.handleBack(new CommandListenerAdapter())) {
super.onBackPressed();
}
}
With this one:
#Override
public void invokeDefaultOnBackPressed() {
if (!navigator.handleBack(new CommandListenerAdapter())) {
this.moveTaskToBack(true);
//super.onBackPressed();
}
}
After saving your changes check on android device.

React Native Deep Link Event Listener Not firing

componentDidMount() {
Linking.addEventListener('url', event =>
this.handleOpenURL(event.url));
Linking.getInitialURL().then(url => {
console.log('url===',url);
if(url)
this.handleOpenURL(url);
});
}
handleOpenUrl is never called if the app is already open and I try to change the deep link Url. If the app is already not open then it opens the app and gets the URL.
Actually it was the issue with FBSDK overriding the method.
This solution worked for me.
https://github.com/react-navigation/react-navigation/issues/798#issuecomment-290363058
I was having this issue working on a detached Expo project because I had added the suggested code from https://facebook.github.io/react-native/docs/linking.html to the *AppDelegate.m but Expo already provides slightly different functions for handling URL events. Removing the code from the React Native docs made it work for me.