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.
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',
}
})
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.