chore: add react navigation to example project

examples/RNOneSignalTS/App.tsx

@@ -5,33 +5,34 @@
  * @format
  */
 
-import { StatusBar, StyleSheet, useColorScheme, View } from 'react-native';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { NavigationContainer } from '@react-navigation/native';
+import { StatusBar, useColorScheme } from 'react-native';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
+import DetailsScreen from './DetailsScreen';
 import OSDemo from './OSDemo';
 
+export type RootTabParamList = {
+  Home: undefined;
+  Details: undefined;
+};
+
+const Tab = createBottomTabNavigator<RootTabParamList>();
+
 function App() {
   const isDarkMode = useColorScheme() === 'dark';
 
   return (
     <SafeAreaProvider>
       <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
-      <AppContent />
+      <NavigationContainer>
+        <Tab.Navigator>
+          <Tab.Screen name="Home" component={OSDemo} />
+          <Tab.Screen name="Details" component={DetailsScreen} />
+        </Tab.Navigator>
+      </NavigationContainer>
     </SafeAreaProvider>
   );
 }
 
-function AppContent() {
-  return (
-    <View style={styles.container}>
-      <OSDemo />
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-});
-
 export default App;

examples/RNOneSignalTS/DetailsScreen.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+const DetailsScreen: React.FC = () => {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>Details Screen</Text>
+      <Text style={styles.text}>This is a simple extra screen.</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#fff',
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    marginBottom: 16,
+  },
+  text: {
+    fontSize: 16,
+    color: '#666',
+  },
+});
+
+export default DetailsScreen;

examples/RNOneSignalTS/OSDemo.tsx

@@ -1,3 +1,4 @@
+import { useFocusEffect } from '@react-navigation/native';
 import React, { useCallback, useEffect, useState } from 'react';
 import {
   Alert,
@@ -139,78 +140,93 @@ const OSDemo: React.FC = () => {
     OneSignal.Debug.setLogLevel(LogLevel.None);
   }, []);
 
-  useEffect(() => {
-    const setup = async () => {
-      OneSignal.LiveActivities.setupDefault();
-      OneSignal.Notifications.addEventListener(
-        'foregroundWillDisplay',
-        onForegroundWillDisplay,
-      );
-      OneSignal.Notifications.addEventListener('click', onNotificationClick);
-      OneSignal.InAppMessages.addEventListener('click', onIAMClick);
-      OneSignal.InAppMessages.addEventListener('willDisplay', onIAMWillDisplay);
-      OneSignal.InAppMessages.addEventListener('didDisplay', onIAMDidDisplay);
-      OneSignal.InAppMessages.addEventListener('willDismiss', onIAMWillDismiss);
-      OneSignal.InAppMessages.addEventListener('didDismiss', onIAMDidDismiss);
-      OneSignal.User.pushSubscription.addEventListener(
-        'change',
-        onSubscriptionChange,
-      );
-      OneSignal.Notifications.addEventListener(
-        'permissionChange',
-        onPermissionChange,
-      );
-      OneSignal.User.addEventListener('change', onUserChange);
-    };
+  useFocusEffect(
+    useCallback(() => {
+      console.log('Setting up event listeners');
 
-    setup();
+      const setup = async () => {
+        OneSignal.LiveActivities.setupDefault();
+        OneSignal.Notifications.addEventListener(
+          'foregroundWillDisplay',
+          onForegroundWillDisplay,
+        );
+        OneSignal.Notifications.addEventListener('click', onNotificationClick);
+        OneSignal.InAppMessages.addEventListener('click', onIAMClick);
+        OneSignal.InAppMessages.addEventListener(
+          'willDisplay',
+          onIAMWillDisplay,
+        );
+        OneSignal.InAppMessages.addEventListener('didDisplay', onIAMDidDisplay);
+        OneSignal.InAppMessages.addEventListener(
+          'willDismiss',
+          onIAMWillDismiss,
+        );
+        OneSignal.InAppMessages.addEventListener('didDismiss', onIAMDidDismiss);
+        OneSignal.User.pushSubscription.addEventListener(
+          'change',
+          onSubscriptionChange,
+        );
+        OneSignal.Notifications.addEventListener(
+          'permissionChange',
+          onPermissionChange,
+        );
+        OneSignal.User.addEventListener('change', onUserChange);
+      };
 
-    return () => {
-      // Clean up all event listeners
-      OneSignal.Notifications.removeEventListener(
-        'foregroundWillDisplay',
-        onForegroundWillDisplay,
-      );
-      OneSignal.Notifications.removeEventListener('click', onNotificationClick);
-      OneSignal.InAppMessages.removeEventListener('click', onIAMClick);
-      OneSignal.InAppMessages.removeEventListener(
-        'willDisplay',
-        onIAMWillDisplay,
-      );
-      OneSignal.InAppMessages.removeEventListener(
-        'didDisplay',
-        onIAMDidDisplay,
-      );
-      OneSignal.InAppMessages.removeEventListener(
-        'willDismiss',
-        onIAMWillDismiss,
-      );
-      OneSignal.InAppMessages.removeEventListener(
-        'didDismiss',
-        onIAMDidDismiss,
-      );
-      OneSignal.User.pushSubscription.removeEventListener(
-        'change',
-        onSubscriptionChange,
-      );
-      OneSignal.Notifications.removeEventListener(
-        'permissionChange',
-        onPermissionChange,
-      );
-      OneSignal.User.removeEventListener('change', onUserChange);
-    };
-  }, [
-    onForegroundWillDisplay,
-    onNotificationClick,
-    onIAMClick,
-    onIAMWillDisplay,
-    onIAMDidDisplay,
-    onIAMWillDismiss,
-    onIAMDidDismiss,
-    onSubscriptionChange,
-    onPermissionChange,
-    onUserChange,
-  ]);
+      setup();
+
+      return () => {
+        console.log('Cleaning up event listeners');
+
+        // Clean up all event listeners
+        OneSignal.Notifications.removeEventListener(
+          'foregroundWillDisplay',
+          onForegroundWillDisplay,
+        );
+        OneSignal.Notifications.removeEventListener(
+          'click',
+          onNotificationClick,
+        );
+        OneSignal.InAppMessages.removeEventListener('click', onIAMClick);
+        OneSignal.InAppMessages.removeEventListener(
+          'willDisplay',
+          onIAMWillDisplay,
+        );
+        OneSignal.InAppMessages.removeEventListener(
+          'didDisplay',
+          onIAMDidDisplay,
+        );
+        OneSignal.InAppMessages.removeEventListener(
+          'willDismiss',
+          onIAMWillDismiss,
+        );
+        OneSignal.InAppMessages.removeEventListener(
+          'didDismiss',
+          onIAMDidDismiss,
+        );
+        OneSignal.User.pushSubscription.removeEventListener(
+          'change',
+          onSubscriptionChange,
+        );
+        OneSignal.Notifications.removeEventListener(
+          'permissionChange',
+          onPermissionChange,
+        );
+        OneSignal.User.removeEventListener('change', onUserChange);
+      };
+    }, [
+      onForegroundWillDisplay,
+      onNotificationClick,
+      onIAMClick,
+      onIAMWillDisplay,
+      onIAMDidDisplay,
+      onIAMWillDismiss,
+      onIAMDidDismiss,
+      onSubscriptionChange,
+      onPermissionChange,
+      onUserChange,
+    ]),
+  );
 
   const inputChange = useCallback((text: string) => {
     setInputValue(text);