Can anyone can help me to fix these errors this is a little bit old project earlier i was importing notifications from expo but due to react-native updates i am importing it from expo-notifications because their is no notification pre-build in expo
WARN expo-permissions is now deprecated — the functionality has been moved to other expo packages that directly use these permissions (e.g. expo-location, expo-camera). The package will be removed in the upcoming releases
ERROR TypeError: Notifications.addListener is not a function. (In 'Notifications.addListener(_handleNotification)', 'Notifications.addListener' is undefined)
My File:
import React, { useState, useEffect } from 'react';
import {
StyleSheet,
Text,
View,
TextInput,
TouchableOpacity,
Image,
ActivityIndicator,
Vibration,
Platform,
Alert
} from 'react-native';
import { showMessage } from "react-native-flash-message";
import * as authActions from '../../store/actions/auth';
import { useDispatch } from 'react-redux';
import Colors from '../../constants/Colors';
import * as Notifications from 'expo-notifications';
import * as Permissions from 'expo-permissions';
import Constants from 'expo-constants';
const AuthScreen = (props) => {
const [isSignup, setIsSignUp] = useState(false);
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [isLoading, setIsLoading] = useState(false);
const [expoPushToken, setExpoPushToken] = useState('');
const [notification, setNotification] = useState({});
const dispatch = useDispatch();
let token;
let _notificationSubscription;
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') {
Alert.alert(
'Failed !',
'Failed to get push token for push notification!',
[{ text: 'Okay' }]
);
return;
}
try{
token = await Notifications.getExpoPushTokenAsync();
} catch(err){
showMessage({
message: `ERROR - ${err.message}`,
description: `${err}`,
type: "danger",
icon: { icon: "danger", position: 'left' },
duration: 3000
});
}
console.log(token);
setExpoPushToken(token);
} else {
Alert.alert(
'Error !',
'Must use physical device for Push Notifications',
[{ text: 'Okay' }]
)
}
if (Platform.OS === 'android') {
Notifications.createChannelAndroidAsync('default', {
name: 'default',
sound: true,
priority: 'max',
vibrate: [0, 250, 250, 250],
});
}
};
useEffect(() => {
registerForPushNotificationsAsync();
console.log(expoPushToken);
_notificationSubscription = Notifications.addListener(_handleNotification);
}, [])
const _handleNotification = notification => {
Vibration.vibrate();
setNotification(notification);
};
const validateAuthForm = () => {
const emailRegex = /^(([^<>()\[\]\\.,;:\s@"] (\.[^<>()\[\]\\.,;:\s@"] )*)|(". "))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9] \.) [a-zA-Z]{2,}))$/;
const passwordRegex = /\d/
if(isSignup && !name){
showMessage({
message: "Please enter a valid name.",
type: "danger",
icon: { icon: "danger", position: 'left' },
duration: 3000
});
setIsLoading(false);
return false;
}
if(isSignup && name && name.length < 2){
showMessage({
message: "Please enter a valid name.",
type: "danger",
icon: { icon: "danger", position: 'left' },
duration: 3000
});
setIsLoading(false);
return false;
}
if(!emailRegex.test(email.toLowerCase())){
showMessage({
message: "Please enter a valid email.",
type: "danger",
icon: { icon: "danger", position: 'left' },
duration: 3000
});
setIsLoading(false);
return false;
}
if(!password || password.length === 0){
showMessage({
message: "Please enter your password.",
type: "danger",
icon: { icon: "danger", position: 'left' },
duration: 3000
});
setIsLoading(false);
return false;
}
if(isSignup && password.length < 6){
showMessage({
message: "Password should be atleast 6 characters long.",
type: "danger",
icon: { icon: "danger", position: 'left' },
duration: 3000
});
setIsLoading(false);
return false;
}
if(isSignup && !passwordRegex.test(password)){
showMessage({
message: "Password should contain atleast 1 number.",
type: "danger",
icon: { icon: "danger", position: 'left' },
duration: 3000
});
setIsLoading(false);
return false;
}
return true;
}
const AuthHandler = async () => {
setIsLoading(true);
if(validateAuthForm()){
if(isSignup){
try {
const msg = await dispatch(authActions.signup(name, email, password, expoPushToken))
showMessage({
message: "Signup Success",
description: 'Please Login !',
type: "success",
icon: { icon: "success", position: 'left' },
duration: 3000
});
setIsSignUp(false);
setName('');
setEmail('');
setPassword('');
} catch (error) {
showMessage({
message: error.message,
type: "danger",
icon: { icon: "danger", position: 'left' },
duration: 3000
});
}
setIsLoading(false);
} else {
try {
await dispatch(authActions.signin(email, password, expoPushToken))
showMessage({
message: "Signed in success",
type: "success",
icon: { icon: "success", position: 'left' },
duration: 3000
});
} catch (error) {
showMessage({
message: error.message,
type: "danger",
icon: { icon: "danger", position: 'left' },
duration: 3000
});
setIsLoading(false);
}
}
}
};
const inputChangeHandler = (text,inputField) => {
if(inputField === 1){
setName(text)
} else if(inputField === 2){
setEmail(text)
} else if(inputField === 3){
setPassword(text)
}
}
return (
<View style={styles.container}>
<Image style={styles.bgImage} source={require('../../assets/bg-auth.png')} />
<View style={styles.titleContainer} >
<Text style={styles.title}>SocialApp</Text>
</View>
{/* { error !== null && (
<View style={styles.errorMsgContainer} >
<Image style={styles.msgIcon} source={{ uri: "https://i.imgur.com/GnyDvKN.png" }} />
<Text style={styles.msgText}> {error} </Text>
</View>
)} */}
{ isSignup && (
<View style={styles.inputContainer}>
<TextInput style={styles.inputs}
placeholder="Name"
underlineColorAndroid='transparent'
value={name}
onChangeText={(text) => inputChangeHandler(text,1)}
/>
<Image style={styles.inputIcon} source={{ uri: 'https://img.icons8.com/nolan/40/000000/name.png' }} />
</View>
) }
<View style={styles.inputContainer}>
<TextInput style={styles.inputs}
placeholder="Email"
keyboardType="email-address"
underlineColorAndroid='transparent'
value={email}
onChangeText={(text) => inputChangeHandler(text, 2) }
/>
<Image style={styles.inputIcon} source={{ uri: 'https://img.icons8.com/nolan/40/000000/email.png' }} />
</View>
<View style={styles.inputContainer}>
<TextInput style={styles.inputs}
placeholder="Password"
secureTextEntry={true}
underlineColorAndroid='transparent'
value={password}
onChangeText={(text) => inputChangeHandler(text, 3) }
/>
<Image style={styles.inputIcon} source={{ uri: 'https://img.icons8.com/nolan/40/000000/key.png' }} />
</View>
<TouchableOpacity
onPress={() => props.navigation.navigate('ForgotPassword')}
style={styles.btnForgotPassword}
>
<Text style={styles.btnText}>Forgot your password?</Text>
</TouchableOpacity>
<TouchableOpacity
style={[styles.buttonContainer, styles.loginButton]}
onPress={AuthHandler}
>
{ isLoading ? (
<ActivityIndicator size="small" color="#fff" />
) :(
<Text style={styles.loginText}>
{ isSignup ? "Register" : "Login" }
</Text>
) }
</TouchableOpacity>
<TouchableOpacity
style={[styles.buttonContainer, styles.registerButton]}
onPress={() => {
setIsSignUp(prevState => !prevState);
}}
>
<Text style={styles.btnText} >
{ isSignup ? "Already a user ? Login" : "Don't have an account ? Register" }
</Text>
</TouchableOpacity>
</View>
);
}
export const screenOptions = (navData) => {
return{
headerTitle: 'Auth',
}
}
CodePudding user response：
Not particularly familiar with Expo, but it doesn't seem like the function addListener you are trying to call actually exists in expo-notifications. At least there's no reference to it in the docs. Since you say it is an older project, that function has probably be renamed to something else.
You're most likely looking for one of the addNotification*Listener functions described on that page. From my gut feeling, I'd try with Notifications.addNotificationReceivedListener. Still, to find out which one it really is you need, you would need to share more info about where you found out about Notifications.addListener in the first place.