React Native - How to initialize OneSignal in a stateless function component? - reactjs

Question

I've read OneSignal installation here: https://documentation.onesignal.com/docs/react-native-sdk-setup#step-5---initialize-the-onesignal-sdk. The documentation is written in a component class style.
How to add the OneSignal in the stateless function component on React Native app?
I've tried using useEffect but OneSignal still can't detect my app.
Thanks.

Answer 1

Enjoy
import OneSignal from 'react-native-onesignal';
const SplashScreen = () => {
useEffect(() => {
OneSignal.setLogLevel(6, 0);
OneSignal.init('Your-id-app', {
kOSSettingsKeyAutoPrompt: false,
kOSSettingsKeyInAppLaunchURL: false,
kOSSettingsKeyInFocusDisplayOption: 2,
});
OneSignal.inFocusDisplaying(2);
OneSignal.addEventListener('received', onReceived);
OneSignal.addEventListener('opened', onOpened);
OneSignal.addEventListener('ids', onIds);
return () => {
OneSignal.removeEventListener('received', onReceived);
OneSignal.removeEventListener('opened', onOpened);
OneSignal.removeEventListener('ids', onIds);
};
}, []);
const onReceived = (notification) => {
console.log('Notification received: ', notification);
};
const onOpened = (openResult) => {
console.log('Message: ', openResult.notification.payload.body);
console.log('Data: ', openResult.notification.payload.additionalData);
console.log('isActive: ', openResult.notification.isAppInFocus);
console.log('openResult: ', openResult);
};
const onIds = (device) => {
console.log('Device info: ', device);
};
return (
...
);
};

Answer 2

I got it worked by added these lines on App.js:
import OneSignal from 'react-native-onesignal';
...
...
const App = () => {
...
onIds = (device) => {
if (state.playerId) {
OneSignal.removeEventListener('ids', onIds);
return;
} else {
setState({ ...state, playerId: device.userId });
console.log('Device info: ', state.playerId);
}
};
OneSignal.addEventListener('ids', onIds);
...
}
And in index.js:
import OneSignal from 'react-native-onesignal'; // Import package from node modules
OneSignal.setLogLevel(6, 0);
// Replace 'YOUR_ONESIGNAL_APP_ID' with your OneSignal App ID.
OneSignal.init(YOUR_ONESIGNAL_APP_ID, {
kOSSettingsKeyAutoPrompt: false,
kOSSettingsKeyInAppLaunchURL: false,
kOSSettingsKeyInFocusDisplayOption: 2
});
OneSignal.inFocusDisplaying(2); // Controls what should happen if a notification is received while the app is open. 2 means that the notification will go directly to the device's notification center.