Alternative to Expo Push Notifications

SDK Version: Any
Platform: Android/iOS

Is there an alternative to the deprecated library/package, Expo Push Notifications, that could be used with Expo? I prefer to use modern code - not deprecated class-based components. And I can’t find a way to get this library to work in a function based component. In fact, even out of the box, the code on the documentation page does not work (not surprising… it’s Expo).

What is you exact issue? Instead of ranting you could also supply us with your code example so we can come up with an answer/suggestions.

Are you running this as an Expo app or did you eject/bare workflow?

I’ve got it running last week within an Expo managed workflow without a problem (using FCs). (You need to test on a real device)

Also, class components are not deprecated, hooks is just a different way of approaching components.

1 Like

Honestly I don’t know what the issue was. I was able to re-write it in a function based component and also with the newer hooks (useState & useEffect) to achieve what I wanted. Running it as an expo app on a real device.

From what I’ve read in the React Native docs, class-based components will continue to work because Facebook has 10s of 1000s that they would have to re-write and they don’t plan on it - but they want to move away from them and do not use them for any new code implementations. So I do whatever I can to not use them anymore also. But you are correct - they aren’t deprecated - just not recommended for new scripts. And sorry if I was ranting - I didn’t realize I was.

In case anyone finds it useful…

import registerForPushNotifications from '../components/RegisterForPushNotifications'
import {Notifications} from 'expo'

import React, {useEffect, useState} from 'react'
import {
	StyleSheet,
	Text,
	View,
	Vibration,
	TextInput,
	Picker,
	AsyncStorage,
	TouchableHighlight
} from 'react-native'

export default function HomeScreen(props) {
    const [message, setMessage] = useState('')
    const [sendTo, setSendTo] = useState(0)
    const [note, setNote] = useState('')
    const [notification, setNotification] = useState()
    const [logout, setLogout] = useState(false)

    const handleNotification = rawNotification => {
        Vibration.vibrate()
        setNotification(rawNotification)
    }

    useEffect(() => {
        registerForPushNotifications()
        Notifications.addListener(handleNotification)
    }, [])

const sendNotification = async () => {
        if (sendTo == 0 || message == '') {
            alert("You must select a person to send it and include a message for them.")
            return
        }

        const user = await JSON.parse(await AsyncStorage.getItem('user'))

        fetch('http://address_of_your_server:3000/sendnotification', {

            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                userID: user.userID,
                sendTo: sendTo,
                message: message
            }),
            method: "POST"
        })
            .then(res => res.json())
            .then(data => {
                //console.log(data)
                if (data.ack === 'success') {
                    // do something successful
                    setNote(data.note)
                } else {
                    setNote(data.note)
                }
            })
            .catch(e => {
                setNote('Error: ' + e)
            })
    }
	return (
		<View style={styles.container}>
			<View style={styles.formField}>
				<Text style={styles.label}>To</Text>
				<Picker
					selectedValue={sendTo}
					style={styles.picker}
					onValueChange={(itemValue, itemIndex) => setSendTo(itemValue)}
				>
					<Picker.Item label="Select" value="0" />
					<Picker.Item label="Abe Test" value={403} />
					<Picker.Item label="Tim Test" value={221} />
				</Picker>
			</View>
			<View style={styles.formField}>
				<Text style={styles.label}>Message Body</Text>
				<TextInput style={styles.textInput} onChangeText={(val) => setMessage(val)} />
			</View>
			<View style={styles.buttonContainer}>
				<TouchableHighlight title="Send" style={styles.blueButton} onPress={() => sendNotification()} >
					<Text style={styles.buttonText}>Send</Text>
				</TouchableHighlight>
			</View>
			{(note != '') && (
				<View style={styles.noteContainer}>
					<Text style={styles.note}>{note}</Text>
				</View>
			)}
			{(notification) && (
				<View style={styles.notificationContainer}>
					<Text style={styles.notification}>{JSON.stringify(notification)}</Text>
				</View>
			)}
			<TouchableHighlight onPress={() => {setLogout(true)}} style={styles.greyButton}>
				<Text style={styles.buttonText}>Logout</Text>
			</TouchableHighlight>
		</View>
	)
}

console.disableYellowBox = true //remove & fix warning for prod

const styles = StyleSheet.create({
	container: {
		flex: 1,
		backgroundColor: '#fff',
		alignItems: 'center',
		justifyContent: 'center',
	},
	formField: {
		flexDirection: 'row',
		alignItems: 'center',
		alignContent: 'center',
		width: '80%',
		marginBottom: 20,
	},
	textInput: {
		borderWidth: 1,
		borderColor: 'black',
		padding: 4,
		marginBottom: 10,
		backgroundColor: '#eee',
		flex: 1,
	},
	picker: {
		height: 40,
		backgroundColor: '#eee',
		flex: 1,
		borderWidth: 1,
		borderColor: '#000',
	},
	label: {
		marginBottom: 3,
		fontWeight: 'bold',
		fontSize: 20,
		flex: 1,
		textAlign:'right',
		marginRight: 10,
	},
	buttonContainer: {
		marginTop: 10,
	},
	blueButton: {
		backgroundColor: '#0000ff',
		justifyContent: 'center',
		borderRadius: 5,
		marginTop: 15,
	},
	buttonText: {
		color: '#fff',
		fontSize: 20,
		alignSelf: 'center',
		padding: 10,
	},
	greyButton: {
		backgroundColor: '#777',
		justifyContent: 'center',
		borderRadius: 5,
		marginTop: 150,
	},
	noteContainer: {
		marginTop: 50,
		backgroundColor: 'orange',
		alignContent: 'center',
		height: 40,
		width: '100%',
	},
	note: {
		color: '#fff',
		fontWeight: '700',
		fontSize: 24,
		textAlign: 'center',
	},
	notificationContainer: {
		marginTop: 10,
		backgroundColor: 'darkgreen',
		alignContent: 'center',
		width: '100%',
	},
	notification: {
		color: '#fff',
		fontWeight: '700',
		fontSize: 24,
		textAlign: 'center',
	}

})