Please provide the following:
- SDK Version: 39.0.0
- Platforms(Android/iOS/web/all): Android
Hello!
I`m trying to open an notification with data on Notification click with the app closed but nothing shows on addNotificationResponseReceivedListener. That is working on Ios.
I have tried expo-notifications 0.7.2 and 0.8.2.
Here is my package.json
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject",
"postinstall": "rndebugger-open --expo"
},
"dependencies": {
"@expo/vector-icons": "^10.0.0",
"@react-native-community/async-storage": "^1.12.1",
"@react-native-community/masked-view": "^0.1.10",
"@react-navigation/bottom-tabs": "^5.8.0",
"@react-navigation/drawer": "^5.11.4",
"@react-navigation/native": "^5.7.3",
"@react-navigation/stack": "^5.9.0",
"@types/styled-components": "^5.1.4",
"axios": "^0.21.0",
"expo": "~39.0.2",
"expo-app-auth": "~9.2.0",
"expo-auth-session": "~2.0.0",
"expo-barcode-scanner": "~9.0.0",
"expo-constants": "~9.2.0",
"expo-firebase-analytics": "~2.5.0",
"expo-linear-gradient": "~8.3.0",
"expo-linking": "^1.0.1",
"expo-location": "~9.0.0",
"expo-notifications": "~0.7.2",
"expo-permissions": "~9.3.0",
"expo-web-browser": "~8.5.0",
"firebase": "7.9.0",
"intl": "^1.2.5",
"moment": "^2.29.1",
"prop-types": "^15.7.2",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-39.0.4.tar.gz",
"react-native-dev-menu": "^4.0.2",
"react-native-elements": "^3.0.0-alpha.1",
"react-native-gesture-handler": "~1.7.0",
"react-native-maps": "^0.27.1",
"react-native-paper": "^4.4.0",
"react-native-reanimated": "^1.13.2",
"react-native-screens": "^2.10.1",
"react-native-snap-carousel": "^3.9.1",
"react-native-svg": "^12.1.0",
"react-native-web": "~0.13.12",
"react-redux": "^7.2.2",
"redux": "^4.0.5",
"redux-multi": "^0.1.12",
"redux-promise": "^0.6.0",
"redux-thunk": "^2.3.0"
},
"devDependencies": {
"@babel/core": "~7.9.0",
"@types/react": "~16.9.35",
"@types/react-native": "~0.63.2",
"@types/react-native-elements": "^0.18.0",
"@types/react-redux": "^7.1.11",
"@typescript-eslint/eslint-plugin": "^4.8.1",
"@typescript-eslint/parser": "^4.8.1",
"babel-preset-expo": "^8.3.0",
"eslint": "^7.14.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-config-prettier": "^6.15.0",
"eslint-config-react-app": "^6.0.0",
"eslint-import-resolver-typescript": "^2.3.0",
"eslint-plugin-flowtype": "^5.2.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-react": "^7.21.5",
"eslint-plugin-react-hooks": "^4.2.0",
"eslint-plugin-typescript": "^0.14.0",
"prettier": "^2.2.0",
"react-native-debugger-open": "^0.3.25",
"typescript": "~3.9.5"
},
"private": true,
"prettier": {
"singleQuote": true,
"useTabs": true,
"tabWidth": 2,
"printWidth": 140
}
}
Here is my code to show data (working on Ios and not working on Android)
import Constants from 'expo-constants';
import * as Notifications from 'expo-notifications';
import * as Permissions from 'expo-permissions';
import React, { useEffect, useRef, useState } from 'react';
import { Button, Dimensions, Platform, Text, View } from 'react-native';
Notifications.setNotificationHandler({
handleNotification: async () => ({
shouldShowAlert: true,
shouldPlaySound: false,
shouldSetBadge: false,
}),
});
const NotificationSimple = () => {
const [token, setToken] = useState({ expo: '', fcm: '' });
const [notification, setNotification] = useState(false);
const notificationListener = useRef();
const responseListener = useRef();
const schedulePushNotification = async () => {
await Notifications.scheduleNotificationAsync({
content: {
title: 'título direto do app! 📬',
body: 'neste caso não usa token',
data: { data: 'goes here' },
},
trigger: { seconds: 1 },
});
};
const sendPushNotification = async (tokenExpo: string) => {
const message = {
to: tokenExpo,
sound: 'default',
title: 'título token expo',
body: 'And here is the body!',
data: { data: 'goes here' },
};
await fetch('https://exp.host/--/api/v2/push/send', {
method: 'POST',
headers: {
Accept: 'application/json',
'Accept-encoding': 'gzip, deflate',
'Content-Type': 'application/json',
},
body: JSON.stringify(message),
});
};
const registerForPushNotificationsAsync = async () => {
const token = { expo: '', fcm: '' };
if (Constants.isDevice) {
const { status: existingStatus } = await Permissions.getAsync(Permissions.NOTIFICATIONS);
let finalStatus = existingStatus;
if (existingStatus !== 'granted') {
const { status } = await Permissions.askAsync(Permissions.NOTIFICATIONS);
finalStatus = status;
}
if (finalStatus !== 'granted') {
// alert('Failed to get push token for push notification!');
return token;
}
const tokenExpo = await Notifications.getExpoPushTokenAsync();
token.expo = tokenExpo.data;
const tokenFcm = await Notifications.getDevicePushTokenAsync();
token.fcm = tokenFcm.data;
} else {
// alert('Must use physical device for Push Notifications');
}
if (Platform.OS === 'android') {
await Notifications.setNotificationChannelAsync('default', {
name: 'default',
importance: Notifications.AndroidImportance.MAX,
vibrationPattern: [0, 250, 250, 250],
lightColor: '#FF231F7C',
});
}
return token;
};
const init = async () => {
await registerForPushNotificationsAsync().then((token: { expo: string; fcm: string }) => setToken(token));
console.log(`notificationListener: `, notificationListener);
notificationListener.current = Notifications.addNotificationReceivedListener((notification) => {
setNotification(notification);
});
responseListener.current = Notifications.addNotificationResponseReceivedListener((response) => {
console.log('addNotificationResponseReceivedListener: ', response);
});
return () => {
Notifications.removeNotificationSubscription(notificationListener);
Notifications.removeNotificationSubscription(responseListener);
};
};
useEffect(() => {
init();
}, []);
useEffect(() => {
console.log(`token: `, token);
}, [token]);
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'space-around', padding: 10 }}>
<Text selectable={true} style={{ width: Dimensions.get('window').width - 20 }}>
<Text style={{ fontWeight: 'bold' }}>token expo:</Text>
{token.expo}
</Text>
<Text selectable={true} style={{ width: Dimensions.get('window').width - 20 }}>
<Text style={{ fontWeight: 'bold' }}>token FCM:</Text>
{token.fcm}
</Text>
<View style={{ marginBottom: 20, marginTop: 10, width: '100%' }}>
<Text>Title: {notification?.request?.content.title} </Text>
<Text>Body: {notification?.request?.content.body}</Text>
</View>
<Text></Text>
<Button
title="notification local"
onPress={async () => {
await schedulePushNotification();
}}
/>
<View>
<Text></Text>
</View>
<Button
title="notification expo"
onPress={async () => {
await sendPushNotification(token.expo);
}}
/>
</View>
);
};
export default NotificationSimple;
On server side I`m using edwinhoksberg/php-fcm
The notification arives but the data (key value) wont show.