robcalcroft / react-native-in-app-notification

:bell: Customisable in-app notification component for React Native
MIT License
270 stars 78 forks source link

Notification background disappears couple seconds after notification #12

Open zoozalp opened 6 years ago

zoozalp commented 6 years ago

In the following code, white background stays in view for couple seconds after notification disappears. I've seen this in Android but not tested on iOS yet.

Is it a bug or am I missing something?

`import React from "react"; import {View, Platform, PushNotificationIOS, StyleSheet} from "react-native"; import Notification from "react-native-in-app-notification";

const defaultIcon = require("../assets/defaultImages/logo_small.png");

export class InAppNotification extends React.Component {

handleRegister = token => {
    console.log('push token', token);
};

handleNotification = notification => {
    console.log("notification", notification);
    const message = Platform.OS === "ios" ? notification._alert : notification;
    if (!message) {
        console.log("Empty message.");
    } else {
        console.log("message", message);
        if (!this.notification) {
            console.log("In app notification ref is not set yet.");
        } else {
            this.notification.show({
                icon: defaultIcon,
                title: message.title,
                message: message.body
                // onPress: () => Alert.alert('Alert', 'You clicked the notification!'),
            });
        }
    }

    // required on iOS only (see fetchCompletionHandler docs: https://facebook.github.io/react-native/docs/pushnotificationios.html)
    if (Platform.OS === "ios") {
        notification.finish(PushNotificationIOS.FetchResult.NoData);
    }
};

componentDidMount() {
    const {pushNotification: PushNotification} = this.props;
    PushNotification.onNotification(this.handleNotification);
    PushNotification.onRegister(this.handleRegister);
}

render() {
    return (
        <View style={styles.root}>
            <Notification ref={ref => {this.notification = ref;}}/>
        </View>
    )
}

}

const styles = { root: { position: "absolute", top: 0, left: 0, right: 0, height: 200, elevation: 999, zIndex: 999 } };`