Skip to content

Commit 2beb506

Browse files
fadi-georgefadi-george
authored
chore: add react navigation to example project (#1876)
1 parent b547fd0 commit 2beb506

File tree

6 files changed

+721
-458
lines changed

6 files changed

+721
-458
lines changed

‎examples/RNOneSignalTS/App.tsx‎

Lines changed: 37 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -5,33 +5,54 @@
55
* @format
66
*/
77

8-
import { StatusBar, StyleSheet, useColorScheme, View } from 'react-native';
8+
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
9+
import { NavigationContainer } from '@react-navigation/native';
10+
import { StatusBar, Text, useColorScheme } from 'react-native';
911
import { SafeAreaProvider } from 'react-native-safe-area-context';
12+
import DetailsScreen from './DetailsScreen';
1013
import OSDemo from './OSDemo';
1114

15+
export type RootTabParamList = {
16+
Home: undefined;
17+
Details: undefined;
18+
};
19+
20+
const Tab = createBottomTabNavigator<RootTabParamList>();
21+
22+
function HomeIcon() {
23+
return <Text style={{ fontSize: 24 }}>🏠</Text>;
24+
}
25+
26+
function DetailsIcon() {
27+
return <Text style={{ fontSize: 24 }}>ℹ</Text>;
28+
}
29+
1230
function App() {
1331
const isDarkMode = useColorScheme() === 'dark';
1432

1533
return (
1634
<SafeAreaProvider>
1735
<StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
18-
<AppContent />
36+
<NavigationContainer>
37+
<Tab.Navigator>
38+
<Tab.Screen
39+
name="Home"
40+
component={OSDemo}
41+
options={{
42+
tabBarIcon: () => <HomeIcon />,
43+
}}
44+
/>
45+
<Tab.Screen
46+
name="Details"
47+
component={DetailsScreen}
48+
options={{
49+
tabBarIcon: () => <DetailsIcon />,
50+
}}
51+
/>
52+
</Tab.Navigator>
53+
</NavigationContainer>
1954
</SafeAreaProvider>
2055
);
2156
}
2257

23-
function AppContent() {
24-
return (
25-
<View style={styles.container}>
26-
<OSDemo />
27-
</View>
28-
);
29-
}
30-
31-
const styles = StyleSheet.create({
32-
container: {
33-
flex: 1,
34-
},
35-
});
36-
3758
export default App;

‎examples/RNOneSignalTS/DetailsScreen.tsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import React from 'react';
2+
import { StyleSheet, Text, View } from 'react-native';
3+
4+
const DetailsScreen: React.FC = () => {
5+
return (
6+
<View style={styles.container}>
7+
<Text style={styles.title}>Details Screen</Text>
8+
<Text style={styles.text}>This is a simple extra screen.</Text>
9+
</View>
10+
);
11+
};
12+
13+
const styles = StyleSheet.create({
14+
container: {
15+
flex: 1,
16+
justifyContent: 'center',
17+
alignItems: 'center',
18+
backgroundColor: '#fff',
19+
},
20+
title: {
21+
fontSize: 24,
22+
fontWeight: 'bold',
23+
marginBottom: 16,
24+
},
25+
text: {
26+
fontSize: 16,
27+
color: '#666',
28+
},
29+
});
30+
31+
export default DetailsScreen;

‎examples/RNOneSignalTS/OSDemo.tsx‎

Lines changed: 86 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { useFocusEffect } from '@react-navigation/native';
12
import React, { useCallback, useEffect, useState } from 'react';
23
import {
34
Alert,
@@ -139,78 +140,93 @@ const OSDemo: React.FC = () => {
139140
OneSignal.Debug.setLogLevel(LogLevel.None);
140141
}, []);
141142

142-
useEffect(() => {
143-
const setup = async () => {
144-
OneSignal.LiveActivities.setupDefault();
145-
OneSignal.Notifications.addEventListener(
146-
'foregroundWillDisplay',
147-
onForegroundWillDisplay,
148-
);
149-
OneSignal.Notifications.addEventListener('click', onNotificationClick);
150-
OneSignal.InAppMessages.addEventListener('click', onIAMClick);
151-
OneSignal.InAppMessages.addEventListener('willDisplay', onIAMWillDisplay);
152-
OneSignal.InAppMessages.addEventListener('didDisplay', onIAMDidDisplay);
153-
OneSignal.InAppMessages.addEventListener('willDismiss', onIAMWillDismiss);
154-
OneSignal.InAppMessages.addEventListener('didDismiss', onIAMDidDismiss);
155-
OneSignal.User.pushSubscription.addEventListener(
156-
'change',
157-
onSubscriptionChange,
158-
);
159-
OneSignal.Notifications.addEventListener(
160-
'permissionChange',
161-
onPermissionChange,
162-
);
163-
OneSignal.User.addEventListener('change', onUserChange);
164-
};
143+
useFocusEffect(
144+
useCallback(() => {
145+
console.log('Setting up event listeners');
165146

166-
setup();
147+
const setup = async () => {
148+
OneSignal.LiveActivities.setupDefault();
149+
OneSignal.Notifications.addEventListener(
150+
'foregroundWillDisplay',
151+
onForegroundWillDisplay,
152+
);
153+
OneSignal.Notifications.addEventListener('click', onNotificationClick);
154+
OneSignal.InAppMessages.addEventListener('click', onIAMClick);
155+
OneSignal.InAppMessages.addEventListener(
156+
'willDisplay',
157+
onIAMWillDisplay,
158+
);
159+
OneSignal.InAppMessages.addEventListener('didDisplay', onIAMDidDisplay);
160+
OneSignal.InAppMessages.addEventListener(
161+
'willDismiss',
162+
onIAMWillDismiss,
163+
);
164+
OneSignal.InAppMessages.addEventListener('didDismiss', onIAMDidDismiss);
165+
OneSignal.User.pushSubscription.addEventListener(
166+
'change',
167+
onSubscriptionChange,
168+
);
169+
OneSignal.Notifications.addEventListener(
170+
'permissionChange',
171+
onPermissionChange,
172+
);
173+
OneSignal.User.addEventListener('change', onUserChange);
174+
};
167175

168-
return () => {
169-
// Clean up all event listeners
170-
OneSignal.Notifications.removeEventListener(
171-
'foregroundWillDisplay',
172-
onForegroundWillDisplay,
173-
);
174-
OneSignal.Notifications.removeEventListener('click', onNotificationClick);
175-
OneSignal.InAppMessages.removeEventListener('click', onIAMClick);
176-
OneSignal.InAppMessages.removeEventListener(
177-
'willDisplay',
178-
onIAMWillDisplay,
179-
);
180-
OneSignal.InAppMessages.removeEventListener(
181-
'didDisplay',
182-
onIAMDidDisplay,
183-
);
184-
OneSignal.InAppMessages.removeEventListener(
185-
'willDismiss',
186-
onIAMWillDismiss,
187-
);
188-
OneSignal.InAppMessages.removeEventListener(
189-
'didDismiss',
190-
onIAMDidDismiss,
191-
);
192-
OneSignal.User.pushSubscription.removeEventListener(
193-
'change',
194-
onSubscriptionChange,
195-
);
196-
OneSignal.Notifications.removeEventListener(
197-
'permissionChange',
198-
onPermissionChange,
199-
);
200-
OneSignal.User.removeEventListener('change', onUserChange);
201-
};
202-
}, [
203-
onForegroundWillDisplay,
204-
onNotificationClick,
205-
onIAMClick,
206-
onIAMWillDisplay,
207-
onIAMDidDisplay,
208-
onIAMWillDismiss,
209-
onIAMDidDismiss,
210-
onSubscriptionChange,
211-
onPermissionChange,
212-
onUserChange,
213-
]);
176+
setup();
177+
178+
return () => {
179+
console.log('Cleaning up event listeners');
180+
181+
// Clean up all event listeners
182+
OneSignal.Notifications.removeEventListener(
183+
'foregroundWillDisplay',
184+
onForegroundWillDisplay,
185+
);
186+
OneSignal.Notifications.removeEventListener(
187+
'click',
188+
onNotificationClick,
189+
);
190+
OneSignal.InAppMessages.removeEventListener('click', onIAMClick);
191+
OneSignal.InAppMessages.removeEventListener(
192+
'willDisplay',
193+
onIAMWillDisplay,
194+
);
195+
OneSignal.InAppMessages.removeEventListener(
196+
'didDisplay',
197+
onIAMDidDisplay,
198+
);
199+
OneSignal.InAppMessages.removeEventListener(
200+
'willDismiss',
201+
onIAMWillDismiss,
202+
);
203+
OneSignal.InAppMessages.removeEventListener(
204+
'didDismiss',
205+
onIAMDidDismiss,
206+
);
207+
OneSignal.User.pushSubscription.removeEventListener(
208+
'change',
209+
onSubscriptionChange,
210+
);
211+
OneSignal.Notifications.removeEventListener(
212+
'permissionChange',
213+
onPermissionChange,
214+
);
215+
OneSignal.User.removeEventListener('change', onUserChange);
216+
};
217+
}, [
218+
onForegroundWillDisplay,
219+
onNotificationClick,
220+
onIAMClick,
221+
onIAMWillDisplay,
222+
onIAMDidDisplay,
223+
onIAMWillDismiss,
224+
onIAMDidDismiss,
225+
onSubscriptionChange,
226+
onPermissionChange,
227+
onUserChange,
228+
]),
229+
);
214230

215231
const inputChange = useCallback((text: string) => {
216232
setInputValue(text);

0 commit comments

Comments
 (0)