React Native: state is null sometimes - setState is working asynchronously - reactjs

Question

I think I do have some problems with the state of my application . I already figured out that this.setState({ ... }) is a function which is working asynchronously.. So, I think this has something to do with my problem.
My problem is that I want to show a dialog popup to my user when I am sending a push notification via OneSignal. This push notification gets received by both iOS and Android. Even when the app is running in the
background, foreground or got killed and isn't even running in the background. For the popup dialog I am using this package: react-native-popup-dialog
This popup is only visible if I send certain key/value pairs with the push notification. These keys are:
showPopup:true - Displaying the popup when true. If it isn't set or not equals true, it isn't displayed!
openLink:mydomain.de- Adds a button with a link to the popup
buttonText:Open in Browser - Sets the button text to the link
Note, the extra URL button is only added to the popup if key openLink and buttonText is set. Of none of them or only one of the key is set, it isn't displaying this button.
However, the popup dialog only shows up sometimes in some cases. I will list them for you below:
Case 1: The application is opened. In this case the popup shows up on iOS and Android. This gets handled by the
onReceived function!
Case 2: The app is completely close (swiped off the screen/killed). In this case, the popup shows up on Android
devices but not on iOS devices! This gets handled by the onOpened function!
Case 3: The app has been opened and is now running in the background. In this case, the popup shows up on iOS
devices but not on Android devices. This gets handled by the onOpened function too!
So, cause I am not getting and error messages or something else, I guess I am right with my guess that this issue is
due the asynchronous this.setState({ ... }) function.
My question now is how can I make sure that the state of notification and visible is always set before rendering the getPopup(...) method.. I already was thinking about implementing it so that I call the getPopup(...) function with parameters. So, I can be sure the parameters are always set before calling the method. However, sadly this is not possible. Cause the class you see below, the SuperScreen class, is just a class which gets extended by some subclasses to bundle my code like the push notification code or some functions I need in every of these subclasses.
Also, I already tried out to add a variable to my SuperClass state e.g. called stateSet which gets set after the setState({ ... }) function of either onReceived or onOpened has finished and verify it with
if(this.state.stateSet) in the first line of the getPopup(...) function. However, this is also not possible. The reason for that is because then my popup is not closing anymore when I am pressing either Ok or the link button.
If you guys have any ideas on how to solve this problem I really would appreciate it!
Here is my code:
export default class SuperScreen extends Component {
constructor(props) {
super(props);
this.state = {
pushNotification: null,
visible: false
};
OneSignal.init("00000000", {
kOSSettingsKeyAutoPrompt: true
});
OneSignal.inFocusDisplaying(0);
OneSignal.enableVibrate(true);
OneSignal.enableSound(true);
OneSignal.addEventListener("received", this.onReceived);
OneSignal.addEventListener("opened", this.onOpened);
OneSignal.addEventListener("ids", this.onIds);
}
componentWillUnmount() {
OneSignal.removeEventListener("received", this.onReceived);
OneSignal.removeEventListener("opened", this.onOpened);
OneSignal.removeEventListener("ids", this.onIds);
}
onReceived = notification => {
//App is opened!
console.log("Notification received: ", notification);
this.setState({
pushNotification: notification,
visible: true
});
if (notification.payload.notificationID != null) {
firebase.analytics().logEvent("Popup_Link_Button", {
notificationID: notification.payload.notificationID,
clicked: true
});
}
};
onOpened = openResult => {
//App either is closed or running in background
//Android: Closed: Showing Background: Not Showing
//iOS: Closed: Not Showing Background: Showing)
console.log("openResult: ", openResult);
this.setState({
pushNotification: openResult.notification,
visible: true
});
if (openResult.notification.payload.notificationID != null) {
firebase.analytics().logEvent("Popup_Link_Button", {
notificationID: openResult.notification.payload.notificationID,
clicked: true
});
}
};
onIds = device => {
console.log("Device info: ", device);
};
getPopup() {
if (
this.state.pushNotification != null &&
this.state.pushNotification.payload.additionalData != null &&
this.state.pushNotification.payload.additionalData.showPopup != null &&
this.state.pushNotification.payload.additionalData.showPopup == "true"
) {
var actionButtons = null;
if (
this.state.pushNotification.payload.additionalData.openLink != null &&
this.state.pushNotification.payload.additionalData.buttonText != null
) {
actionButtons = [
<DialogButton
text="Ok"
key={0}
onPress={() => {
this.setState({ visible: false });
firebase.analytics().logEvent("Popup_Link_Button", {
notificationID: this.state.pushNotification.payload
.notificationID,
opened: false
});
}}
/>
];
actionButtons.push(
<DialogButton
text={this.state.pushNotification.payload.additionalData.buttonText}
key={1}
onPress={() => {
this.openLink(
this.state.pushNotification.payload.additionalData.openLink
);
this.setState({ visible: false });
firebase.analytics().logEvent("Popup_Link_Button", {
notificationID: this.state.pushNotification.payload
.notificationID,
link: this.state.pushNotification.payload.additionalData
.openLink,
opened: true
});
}}
/>
);
} else {
actionButtons = [
<DialogButton
text="Ok"
key={0}
onPress={() => {
this.setState({ visible: false });
firebase.analytics().logEvent("Popup_Link_Button", {
popupID: this.state.pushNotification.payload.notificationID,
opened: false
});
}}
/>
];
}
return (
<Dialog
visible={this.state.visible}
dialogTitle={
<DialogTitle
title={
this.state.pushNotification == null
? ""
: this.state.pushNotification.payload.title
}
/>
}
dialogAnimation={
new SlideAnimation({
slideFrom: "bottom"
})
}
dialogStyle={{ marginLeft: 20, marginRight: 20 }}
actions={actionButtons}
>
<DialogContent>
<Text />
<Text>
{this.state.pushNotification == null
? ""
: this.state.pushNotification.payload.body}
</Text>
</DialogContent>
</Dialog>
);
}
}

Answer 1

you can add a callback to setState to ensure the code runs after setting the state:
this.setState().then({ //Do something here. })

Answer 2

Use async, await for asynchronously .
onReceived = async (notification) => {
//App is opened!
console.log("Notification received: ", notification);
await this.setState({ // It will wait until finish setState.
pushNotification: notification,
visible: true
});
if (notification.payload.notificationID != null) {
firebase.analytics().logEvent("Popup_Link_Button", {
notificationID: notification.payload.notificationID,
clicked: true
});
}
};

Answer 3

You can use a callback in setState!, i learned from it a month ago and it's been useful since . Check this article , you can pass a function as a callback ;)
this.setState(
{ pushNotification: notification,
visible: true }, () => {this.getPopup()}) //this.getPopup it's the second parameter, a callback
Check the article, it's short and will help