Please provide the following:
- SDK Version: 39.0.0
- Platforms(Android/iOS/web/all): iOS
Hi, I’ve been trying to get my push notifications to work but nothing seems to fix it. I follow the exact code on expo-notifications docs and I am able to get my notification push token, but when I send a notification through the expo client my device does not show it at all. I even tried doing Notifications.scheduleNotificationAsync but it doesnt show any notification at all. I cant see to figure out what is wrong with it.
Heres a copy of my code and my package.json, I’ve removed any unnecessary code.
// Technical imports
import 'react-native-gesture-handler';
import React from 'react';
import * as Font from 'expo-font';
import { StatusBar, Vibration, View, Text } from 'react-native';
import { NavigationContainer, DefaultTheme, CommonActions } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Ionicons, MaterialIcons } from '@expo/vector-icons';
import * as SplashScreen from 'expo-splash-screen';
import * as SecureStore from 'expo-secure-store';
import * as Permissions from 'expo-permissions';
import Constants from 'expo-constants';
import * as ExpoNotifications from 'expo-notifications';
import Localization from './localization/config';
import API from './Api';
const styles = require('./Styles');
const AppTheme = {
...DefaultTheme,
colors: {
...DefaultTheme.colors,
background: styles.Secondary,
primary: styles.Primary
},
};
ExpoNotifications.setNotificationHandler({
handleNotification: async () => ({
shouldShowAlert: true,
shouldPlaySound: true,
shouldSetBadge: false,
}),
});
const AuthContext = React.createContext();
function App() {
const [notification, setNotification] = React.useState(false);
const notificationListener = React.useRef();
const [state, dispatch] = React.useReducer(
(prevState, action) => {
switch (action.type) {
case 'RESTORE_TOKEN':
return {
...prevState,
authenticated: action.authenticated,
session: action.session,
appIsReady: true
};
case 'LOG_IN':
return {
...prevState,
authenticated: true,
session: {
...prevState.session,
crypto: action.crypto,
name: action.name
}
};
case 'LOG_OUT':
return {
...prevState,
authenticated: false,
session: {
crypto: '',
name: '',
socket: ''
},
};
case 'NOTIFICATION_TOKEN':
return {
...prevState,
session: {
...prevState.session,
socket: action.token
}
}
}
},
{
appIsReady: false,
authenticated : false,
session: {
crypto: '',
name: '',
socket: ''
},
notification: {}
}
);
const authContext = React.useMemo(() => ({
login: async ({name, crypto, pfp}) => {
await SecureStore.setItemAsync('A', crypto);
await SecureStore.setItemAsync('B', name);
dispatch({type: "LOG_IN", name, crypto, pfp})
if (state.session.socket) {
const body = {auth: state.session.crypto, token: state.session.socket};
await API.post('/settings/notifications', body);
}
},
logout: async (data) => {
if (state.session.socket) {
const body = {auth: state.session.crypto, token: state.session.socket};
const notifRemoveReq = await API.post('/settings/notifications/remove', body);
}
dispatch({type: "LOG_OUT"})
await SecureStore.deleteItemAsync('A');
await SecureStore.deleteItemAsync('B');
}
}), []);
React.useEffect(() => {
ExpoNotifications.setBadgeCountAsync(0);
const load = async () => {
try {
await SplashScreen.preventAutoHideAsync();
} catch (e) {
//console.log(e);
}
await prepareResources();
notificationListener.current = ExpoNotifications.addNotificationReceivedListener(notification => {
Vibration.vibrate();
ExpoNotifications.setBadgeCountAsync(0);
});
}
load();
return () => {
ExpoNotifications.removeNotificationSubscription(notificationListener);
};
}, []);
React.useEffect(() => {
SplashScreen.hideAsync();
}, [state.appIsReady])
const prepareResources = async () => {
await Font.loadAsync({
'Manrope': require('./assets/fonts/ManropeRegular.otf'),
});
dispatch({type: 'RESTORE_TOKEN', ...session});
try {
const token = await registerForPushNotificationsAsync();
if (token !== "") {
dispatch({type: 'NOTIFICATION_TOKEN', token})
}
} catch (e) {
console.log(e);
}
};
const loadSession = async () => {
let crypto = await SecureStore.getItemAsync('_A');
let name = await SecureStore.getItemAsync('_B');
let authenticated = (crypto && name) !== null;
return {
authenticated: authenticated,
session: {
crypto: authenticated ? crypto : '',
name: authenticated ? name : '',
socket: state.session.socket
}
}
}
return (
<AuthContext.Provider value={authContext}>
<StatusBar barStyle="dark-content" />
<NavigationContainer theme={AppTheme}>
<Stack.Navigator screenOptions={{gestureEnabled: false}}>
</Stack.Navigator>
</NavigationContainer>
</AuthContext.Provider>
)
}
async function registerForPushNotificationsAsync() {
let token;
if (Constants.isDevice) {
let experienceId = undefined;
if (!Constants.manifest) {
// Absence of the manifest means we're in bare workflow
experienceId = '@dannyyy.jimenez/tailorideveloper';
}
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 = (await ExpoNotifications.getExpoPushTokenAsync({
experienceId,
development: Constants.manifest ? true : false
})).data;
console.log(token);
} else {
alert('Must use physical device for Push Notifications');
}
if (Platform.OS === 'android') {
ExpoNotifications.setNotificationChannelAsync('default', {
name: 'default',
importance: ExpoNotifications.AndroidImportance.MAX,
vibrationPattern: [0, 250, 250, 250],
lightColor: '#FFDB113B',
});
}
return token;
};
export default App;
{
"scripts": {
"start": "react-native start",
"android": "react-native run-android",
"ios": "react-native run-ios",
"web": "expo start --web"
},
"dependencies": {
"@react-native-community/masked-view": "0.1.10",
"@react-navigation/bottom-tabs": "^5.5.1",
"@react-navigation/native": "^5.4.3",
"@react-navigation/stack": "^5.4.0",
"axios": "^0.19.2",
"expo": "^39.0.0",
"expo-localization": "~9.0.0",
"expo-media-library": "~9.2.1",
"expo-notifications": "~0.7.2",
"expo-permissions": "~9.3.0",
"expo-secure-store": "~9.2.0",
"expo-splash-screen": "~0.6.2",
"expo-status-bar": "~1.0.2",
"expo-updates": "~0.3.3",
"i18n-js": "^3.8.0",
"qs": "^6.9.4",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "0.63.3",
"react-native-actions-sheet": "^0.3.5",
"react-native-gesture-handler": "~1.7.0",
"react-native-open-maps": "^0.3.5",
"react-native-reanimated": "~1.13.0",
"react-native-safe-area-context": "3.1.4",
"react-native-screens": "~2.10.1",
"react-native-unimodules": "~0.11.0",
"react-native-web": "~0.13.7"
},
"devDependencies": {
"@babel/core": "^7.8.6",
"babel-jest": "~25.2.6",
"babel-preset-expo": "^8.3.0",
"jest": "~25.2.6",
"react-test-renderer": "~16.11.0"
},
"private": true,
"name": "DesignerAdmin",
"version": "1.0.0"
}