Please provide the following:
- SDK Version: 39.0.0
- Platforms(Android/iOS/web/all): Android
My Push (FCM) arrives for both applications (IOS and Android) but when I click on the notification with the app closed, the “data” with “key” and “value” only appear on IOS with the addNotificationResponseReceivedListener (or any other, I tried them all).
We tested expo-notifications 0.7.2 and expo-notifications 0.8.2.
Ios works perfectly.
Actual 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
}
}
My code to show notification:
import React, { useEffect, useRef, useState } from 'react';
import { connect } from 'react-redux';
import { Button, Dimensions, Platform, ScrollView, StyleSheet, Text, View } from 'react-native';
import * as Notifications from 'expo-notifications';
import * as Permissions from 'expo-permissions';
import Constants from 'expo-constants';
import { setPushNotification } from '../../services/store/actions/push-notification-action';
import { ditoService } from '../../services/api/dito.service';
Notifications.setNotificationHandler({
handleNotification: async () => ({
shouldShowAlert: true,
shouldPlaySound: true,
shouldSetBadge: true,
}),
});
const NotificationPush: React.FC<any> = (props) => {
const [notification, setNotification] = useState(false);
const notificationListener = useRef();
const responseListener = useRef();
const [addNotificationResponseReceived, setAddNotificationResponseReceived] = useState(false);
const [addNotificationReceived, setAddNotificationReceived] = useState(false);
const [addNotificationsDropped, setAddNotificationsDropped] = useState(false);
const nontificationSimple = async () => {
await Notifications.scheduleNotificationAsync({
content: {
title: 'notificação direto do app! 📬',
body: 'neste caso não usa token',
data: { data: 'data para mais info' },
},
trigger: { seconds: 1 },
});
};
const sendExpo = async (tokenExpo: string) => {
console.log(`tokenExpo: `, tokenExpo);
const message = {
to: tokenExpo,
sound: 'default',
title: 'notificação via expo',
body: 'neste caso a mensagem é enviada direto da expo',
data: { data: 'data para mais info' },
};
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 () => {
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') {
console.log('Falha ao obter o token push para notificação por push. :(');
return;
}
console.log(`token Expo: `, (await Notifications.getExpoPushTokenAsync()).data);
props.onSetPushNotification(
(await Notifications.getDevicePushTokenAsync()).data, // token FCM
(await Notifications.getExpoPushTokenAsync()).data, // tokenExpo
Constants.installationId // deviceId
);
}
// Notifications.addListener(notification => console.log(notification))
// Notifications.addNotificationResponseReceivedListener(response => {
// console.log("addNotificationResponseReceivedListener", response);
// });
if (Platform.OS === 'android') {
await Notifications.setNotificationChannelAsync('default', {
name: 'default',
importance: Notifications.AndroidImportance.HIGH,
vibrationPattern: [0, 250, 250, 250],
lightColor: '#FF231F7C',
});
}
};
useEffect(() => {
(async () => {
await registerForPushNotificationsAsync();
notificationListener.current = await Notifications.addNotificationReceivedListener((response) => {
setNotification(response);
return response;
});
responseListener.current = await Notifications.addNotificationResponseReceivedListener((response) => {
setNotification(response);
return response;
});
Notifications.addNotificationResponseReceivedListener((response) => {
setAddNotificationResponseReceived(response);
});
Notifications.addNotificationReceivedListener((response) => {
setAddNotificationReceived(response);
});
Notifications.addNotificationsDroppedListener((response) => {
setAddNotificationsDropped(response);
});
return () => {
Notifications.removeNotificationSubscription(notificationListener);
Notifications.removeNotificationSubscription(responseListener);
};
})();
}, []);
useEffect(() => {
if (props?.pushNotification?.tokenFcm) {
ditoService.setToken(props?.pushNotification?.tokenFcm).then();
}
}, [props.pushNotification, props.user]);
useEffect(() => {
if (props.user.email) {
ditoService.setOrUpdateUser().then();
}
}, [props.user]);
return (
<>
<ScrollView>
<View style={styles.container}>
<View style={styles.containerText}>
<Text style={styles.text}>token expo:</Text>
<Text selectable={true}>{props.pushNotification.tokenExpo}</Text>
</View>
<View style={styles.containerText}>
<Text style={{ fontWeight: 'bold' }}>token FCM:</Text>
<Text selectable={true}>{props.pushNotification.tokenFcm}</Text>
</View>
<View style={styles.containerText}>
<Text style={{ fontWeight: 'bold' }}>deviceId:</Text>
<Text selectable={true}>{props.pushNotification.deviceId}</Text>
</View>
<View style={styles.containerNotification}>
<Text>Title: {notification?.request?.content.title} </Text>
<Text>Body: {notification?.request?.content.body}</Text>
<Text selectable={true}>data: {JSON.stringify(notification?.request?.content || '')}</Text>
</View>
<View style={styles.containerButton}>
<Button title="send local" onPress={nontificationSimple} />
<Button title="send expo" onPress={async () => await sendExpo(props.pushNotification.tokenExpo)} />
</View>
<View>
<Text>default:</Text>
<Text selectable={true} style={{ fontSize: 9, color: '#941818' }}>{JSON.stringify(notification)}</Text>
</View>
<View>
<Text>addNotificationResponseReceivedListener:</Text>
<Text selectable={true} style={{ fontSize: 9, color: '#941818' }}>{JSON.stringify(addNotificationResponseReceived)}</Text>
</View>
<View>
<Text>addNotificationReceivedListener:</Text>
<Text selectable={true} style={{ fontSize: 9, color: '#941818' }}>{JSON.stringify(addNotificationReceived)}</Text>
</View>
<View>
<Text>addNotificationsDroppedListener:</Text>
<Text selectable={true} style={{ fontSize: 9, color: '#941818' }}>{JSON.stringify(addNotificationsDropped)}</Text>
</View>
</View>
</ScrollView>
</>
);
};
const styles = StyleSheet.create({
container: {
marginTop: 20,
padding: 10,
},
containerText: {
width: Dimensions.get('window').width - 20,
},
containerNotification: {
marginBottom: 20,
marginTop: 10,
width: '100%',
},
text: {
fontWeight: 'bold',
},
containerButton: {
// flex: 1,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-around',
},
});
const mapStateToProps = ({ pushNotification, user, cartUser, cartAddress }) => ({
pushNotification,
user,
cartUser,
cartAddress,
});
const mapDispatchToProps = (dispatch) => ({
onSetPushNotification: (tokenFcm, tokenExpo, deviceId) => dispatch(setPushNotification(tokenFcm, tokenExpo, deviceId)),
});
export default connect(mapStateToProps, mapDispatchToProps)(NotificationPush);
At server side I`m using edwinhoksberg/php-fcm