How to pass a global object around React Native components? - reactjs

Question

I am trying to set up a messaging module in my React Native app, which should get information from a service and render it in different components in different ways. Kind of like the inbox messages here: you receive a message, and in the header component you see the inbox with a red dot and the number of new messages. If you click it, you go to another component that renders the messages fully.
Now, I created two components to render the inbox in those two different ways. But when I try link them to the class that handles the notifications, I get errors inside the components classes saying that the object is undefined.
I have something like this:
Class that stores new messages
class Notifications {
constructor() {
this.notifications = [];
}
receiveNotification(notif) {
this.notifications.push(notif);
}
}
let notifications = new Notifications();
export { notifications };
Class that handles new messages from service
import framework from 'framework'; // this is the framework I use to communicate with the service
import Notifications from './Notifications.js';
export class PushNotificator extends Component {
constructor(props) {
super(props);
this.state = {
token: ""
}
}
componentDidMount() {
framework.requestPermissions()
.then(() => console.log('granted'))
.catch(() => console.log('notification permission rejected'));
framework.getToken().then(token => {
console.log("TOKEN (getToken)", token);
this.setState({token: token});
});
this.notificationListener = framework.on(frameworkEvent.Notification, notif => {
console.log("Notification", notif);
this.showLocalNotification(notif);
})
}
showLocalNotification(notif) {
Notifications.notifications.push(notif); // this fails because Notifications is undefined
framework.presentLocalNotification({
title: notif.title,
body: notif.body,
priority: "high",
click_action: notif.click_action,
show_in_foreground: true,
local: true
});
}
componentWillUnmount() {
this.notificationListener.remove();
}
render() {
return null;
}
}
Relevant part of the header inbox component
import Notifications from './Notifications.js' //assume the paths are correct
import {PushNotificator} from './PushNotificator.js'
export class Home extends Component {
constructor(props) {
super(props);
this.state = {
loading: true,
notifications: Notifications.notifications.find(notif => notif.seen).length
};
this.closeActivityIndicator = () => setTimeout(() => {
this.setState({ loading: false });
}, 2000);
}
...
render() {
<PushNotificator />
...
}
As soon as the constructor is called, the program fails because Notifications is undefined. But why is it undefined? Can I not use it this way?
Thanks.

Answer 1

There are two options, I see, how to fix your issue:
1. You have already instantiated your Notifications, so it is possible to export that instance by default without additional wrapping:
export default notifications;
and then just:
import notifications from './Notifications.js';
// ...
notifications.push(notif);
2. If you don't want to use the default, you may continue exporting your instance via
export { notifications };
and in that case you need to import it properly:
import { notifications } from './Notifications.js';
// ...
notifications.push(notif);
But in both cases you are working with instatiated notifications object, not with Notifications class.