Как настроить локальные уведомления в экспо?

Question

Я новичок в React-native и все еще учусь. Я пытаюсь настроить локальные уведомления для устройства android, но это не работает. Пытаясь решить эту проблему, я узнал, что разрешения переехали из экспозиции, а уведомления для android требуют создания отдельного объекта для работы звука и вибрации. Примеры на других сайтах тоже не работают. (возможно есть обновление). Я уже пробовал импортировать "Разрешения" из новых "expo-permissions", но все равно это не работает! Пожалуйста, помогите !!

Вот мой код:

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;