I am fairly new to react-native and still learning. I am trying to configure local notifications for an android device, but it's not working. While trying to solve this issue, I learned that Permissions has moved out of expo, and Notifications for android require a separate object to be created for sound and vibration to work. The examples on the other websites also do not seem to work. (maybe there is an update). I have already tried importing "Permissions" from the new "expo-permissions" but still, it is not working! Please help!!
Here is my code:
import React, { Component } from 'react';import { Text, View, ScrollView, StyleSheet, Picker, Switch, Button, Alert } from 'react-native';import { Card } from 'react-native-elements';import DatePicker from 'react-native-datepicker';import * as Animatable from 'react-native-animatable'; import Notifications from 'expo';import * as Permissions from 'expo-permissions';class Reservation extends Component { constructor(props) { super(props); this.state = { guests: 1, smoking: false, date: '', showModal: false } } toggleModal() { this.setState({showModal: !this.state.showModal}); } resetForm() { this.setState({ guests: 1, smoking: false, date: '' }) } async obtainNotificationPermission() { let permission = await Permissions.getAsync(Permissions.USER_FACING_NOTIFICATIONS) if (permission.status !== 'granted') { permission =await Permissions.askAsync(Permissions.USER_FACING_NOTIFICATION); console.log("Permission Status: "+permission); if (permission.status !== 'granted') { Alert.alert('Permission not granted to show notifications!') } } return permission; } async presentLocalNotification(date) { await this.obtainNotificationPermission(); console.log("Permission Status: "+this.obtainNotificationPermission()); Notifications.presentLocalNotificationAsync({ title: 'Your Reservation', body: 'Reservation for '+ date +' requested', ios: { sound: true }, android: { sound: true, vibrate: true, color: '#512DA8' } }); } handleReservation() { console.log(JSON.stringify(this.state)); this.toggleModal(); this.presentLocalNotification(this.state.date); } render() { return(<ScrollView><Animatable.View animation="zoomIn" duration={400} delay={100}><View style={styles.formRow}><Text style={styles.formLabel}>Number of Guests</Text><Picker style={styles.formItem} selectedValue={this.state.guests} onValueChange={(itemValue, itemIndex) => this.setState({ guests: itemValue })} ><Picker.Item label = '1' value = '1' /><Picker.Item label = '2' value = '2' /><Picker.Item label = '3' value = '3' /><Picker.Item label = '4' value = '4' /><Picker.Item label = '5' value = '5' /><Picker.Item label = '6' value = '6' /></Picker></View><View style={styles.formRow}><Text style={styles.formLabel}>Smoking</Text><Switch style={styles.formItem} value={this.state.smoking} onTintColor='#512da8' onValueChange={(value) => this.setState({smoking: value })} ></Switch></View><View style={styles.formRow}><Text style={styles.formLabel}>Date and Time</Text><DatePicker style={{flex: 2, marginRight: 20}} date = {this.state.date} format='' mode='datetime' placeholder='Select date and time ' minDate= '2017-01-01' confirmBtnText='Confirm' cancelBtnText='Cancel' customStyles={{ dateIcon: { position: 'absolute', left: 0, top: 4, marginLeft: 0 }, dateInput: { marginLeft: 36 } }} onDateChange = {(date) => {this.setState({ date: date})}} /></View><View style={styles.formRow}><Button title='Reserve' color='#512da8' accessibilityLabel='Learn more about this purple button' onPress={() => { Alert.alert('Confirm Reservation!','Number of guests: '+this.state.guests+'\n'+'Smoking: '+this.state.smoking+'\n'+'Date and Time: '+this.state.date, [ { text: 'Cancel', onPress: () => {this.resetForm(); console.log('Reservation not confirmed')}, style: 'cancel' }, { text: 'Ok', onPress: () => {this.handleReservation(); this.resetForm()} } ], { cancelable: false } ); }} /></View></Animatable.View></ScrollView> ); }}const styles = StyleSheet.create({ formRow: { alignItems: 'center', justifyContent: 'center', flex: 1, flexDirection: 'row', margin: 20 }, formLabel: { fontSize: 18, flex: 2 }, formItem: { flex: 1 }, modal: { justifyContent: 'center', margin: 20 }, modalTitle: { fontSize: 24, fontWeight: 'bold', backgroundColor: '#512da8', textAlign: 'center', color:'white', marginBottom: 20 }, modalText: { fontSize: 18, margin: 10 }});export default Reservation;
