Skip to content

Commit f6c7210

Browse files
fadi-georgefadi-george
committed
add navigation bottom bar
1 parent 8c21c96 commit f6c7210

File tree

5 files changed

+99
-101
lines changed

5 files changed

+99
-101
lines changed

‎examples/RNOneSignalTS/App.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,19 +5,19 @@
55
* @format
66
*/
77

8+
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
89
import { NavigationContainer } from '@react-navigation/native';
9-
import { createNativeStackNavigator } from '@react-navigation/native-stack';
1010
import { StatusBar, useColorScheme } from 'react-native';
1111
import { SafeAreaProvider } from 'react-native-safe-area-context';
1212
import DetailsScreen from './DetailsScreen';
1313
import OSDemo from './OSDemo';
1414

15-
export type RootStackParamList = {
15+
export type RootTabParamList = {
1616
Home: undefined;
1717
Details: undefined;
1818
};
1919

20-
const Stack = createNativeStackNavigator<RootStackParamList>();
20+
const Tab = createBottomTabNavigator<RootTabParamList>();
2121

2222
function App() {
2323
const isDarkMode = useColorScheme() === 'dark';
@@ -26,10 +26,10 @@ function App() {
2626
<SafeAreaProvider>
2727
<StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
2828
<NavigationContainer>
29-
<Stack.Navigator initialRouteName="Home">
30-
<Stack.Screen name="Home" component={OSDemo} />
31-
<Stack.Screen name="Details" component={DetailsScreen} />
32-
</Stack.Navigator>
29+
<Tab.Navigator>
30+
<Tab.Screen name="Home" component={OSDemo} />
31+
<Tab.Screen name="Details" component={DetailsScreen} />
32+
</Tab.Navigator>
3333
</NavigationContainer>
3434
</SafeAreaProvider>
3535
);

‎examples/RNOneSignalTS/DetailsScreen.tsx‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,7 @@
1-
import { NativeStackScreenProps } from '@react-navigation/native-stack';
21
import React from 'react';
32
import { StyleSheet, Text, View } from 'react-native';
4-
import type { RootStackParamList } from './App';
53

6-
type Props = NativeStackScreenProps<RootStackParamList, 'Details'>;
7-
8-
const DetailsScreen: React.FC<Props> = ({ navigation }) => {
4+
const DetailsScreen: React.FC = () => {
95
return (
106
<View style={styles.container}>
117
<Text style={styles.title}>Details Screen</Text>

‎examples/RNOneSignalTS/OSDemo.tsx‎

Lines changed: 87 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { NativeStackScreenProps } from '@react-navigation/native-stack';
1+
import { useFocusEffect } from '@react-navigation/native';
22
import React, { useCallback, useEffect, useState } from 'react';
33
import {
44
Alert,
@@ -10,16 +10,13 @@ import {
1010
View,
1111
} from 'react-native';
1212
import { LogLevel, OneSignal } from 'react-native-onesignal';
13-
import type { RootStackParamList } from './App';
1413
import { renderButtonView } from './Helpers';
1514
import OSButtons from './OSButtons';
1615
import OSConsole from './OSConsole';
1716

1817
const APP_ID = '77e32082-ea27-42e3-a898-c72e141824ef';
1918

20-
type Props = NativeStackScreenProps<RootStackParamList, 'Home'>;
21-
22-
const OSDemo: React.FC<Props> = ({ navigation }) => {
19+
const OSDemo: React.FC = () => {
2320
const [consoleValue, setConsoleValue] = useState('');
2421
const [inputValue, setInputValue] = useState('');
2522

@@ -143,78 +140,93 @@ const OSDemo: React.FC<Props> = ({ navigation }) => {
143140
OneSignal.Debug.setLogLevel(LogLevel.None);
144141
}, []);
145142

146-
useEffect(() => {
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('willDisplay', onIAMWillDisplay);
156-
OneSignal.InAppMessages.addEventListener('didDisplay', onIAMDidDisplay);
157-
OneSignal.InAppMessages.addEventListener('willDismiss', onIAMWillDismiss);
158-
OneSignal.InAppMessages.addEventListener('didDismiss', onIAMDidDismiss);
159-
OneSignal.User.pushSubscription.addEventListener(
160-
'change',
161-
onSubscriptionChange,
162-
);
163-
OneSignal.Notifications.addEventListener(
164-
'permissionChange',
165-
onPermissionChange,
166-
);
167-
OneSignal.User.addEventListener('change', onUserChange);
168-
};
143+
useFocusEffect(
144+
useCallback(() => {
145+
console.log('Setting up event listeners');
169146

170-
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+
};
171175

172-
return () => {
173-
// Clean up all event listeners
174-
OneSignal.Notifications.removeEventListener(
175-
'foregroundWillDisplay',
176-
onForegroundWillDisplay,
177-
);
178-
OneSignal.Notifications.removeEventListener('click', onNotificationClick);
179-
OneSignal.InAppMessages.removeEventListener('click', onIAMClick);
180-
OneSignal.InAppMessages.removeEventListener(
181-
'willDisplay',
182-
onIAMWillDisplay,
183-
);
184-
OneSignal.InAppMessages.removeEventListener(
185-
'didDisplay',
186-
onIAMDidDisplay,
187-
);
188-
OneSignal.InAppMessages.removeEventListener(
189-
'willDismiss',
190-
onIAMWillDismiss,
191-
);
192-
OneSignal.InAppMessages.removeEventListener(
193-
'didDismiss',
194-
onIAMDidDismiss,
195-
);
196-
OneSignal.User.pushSubscription.removeEventListener(
197-
'change',
198-
onSubscriptionChange,
199-
);
200-
OneSignal.Notifications.removeEventListener(
201-
'permissionChange',
202-
onPermissionChange,
203-
);
204-
OneSignal.User.removeEventListener('change', onUserChange);
205-
};
206-
}, [
207-
onForegroundWillDisplay,
208-
onNotificationClick,
209-
onIAMClick,
210-
onIAMWillDisplay,
211-
onIAMDidDisplay,
212-
onIAMWillDismiss,
213-
onIAMDidDismiss,
214-
onSubscriptionChange,
215-
onPermissionChange,
216-
onUserChange,
217-
]);
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+
);
218230

219231
const inputChange = useCallback((text: string) => {
220232
setInputValue(text);
@@ -224,11 +236,6 @@ const OSDemo: React.FC<Props> = ({ navigation }) => {
224236
<SafeAreaView style={styles.container}>
225237
<View style={styles.header}>
226238
<Text style={styles.title}>OneSignal</Text>
227-
<View style={styles.navButton}>
228-
{renderButtonView('Go to Details', () => {
229-
navigation.navigate('Details');
230-
})}
231-
</View>
232239
<OSConsole value={consoleValue} />
233240
<View style={styles.clearButton}>
234241
{renderButtonView('X', () => {
@@ -268,11 +275,6 @@ const styles = StyleSheet.create({
268275
alignSelf: 'center',
269276
paddingVertical: 10,
270277
},
271-
navButton: {
272-
position: 'absolute',
273-
right: 0,
274-
top: 10,
275-
},
276278
clearButton: {
277279
position: 'absolute',
278280
right: 0,

‎examples/RNOneSignalTS/bun.lock‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@
66
"name": "RNOneSignalTS",
77
"dependencies": {
88
"@react-native/new-app-screen": "0.82.1",
9+
"@react-navigation/bottom-tabs": "^7.8.12",
910
"@react-navigation/native": "^7.1.25",
10-
"@react-navigation/native-stack": "^7.8.6",
1111
"react": "19.1.1",
1212
"react-native": "0.82.1",
1313
"react-native-onesignal": "file:../../react-native-onesignal.tgz",
@@ -365,14 +365,14 @@
365365

366366
"@react-native/virtualized-lists": ["@react-native/[email protected]", "", { "dependencies": { "invariant": "^2.2.4", "nullthrows": "^1.1.1" }, "peerDependencies": { "@types/react": "^19.1.1", "react": "*", "react-native": "*" }, "optionalPeers": ["@types/react"] }, "sha512-f5zpJg9gzh7JtCbsIwV+4kP3eI0QBuA93JGmwFRd4onQ3DnCjV2J5pYqdWtM95sjSKK1dyik59Gj01lLeKqs1Q=="],
367367

368+
"@react-navigation/bottom-tabs": ["@react-navigation/[email protected]", "", { "dependencies": { "@react-navigation/elements": "^2.9.2", "color": "^4.2.3", "sf-symbols-typescript": "^2.1.0" }, "peerDependencies": { "@react-navigation/native": "^7.1.25", "react": ">= 18.2.0", "react-native": "*", "react-native-safe-area-context": ">= 4.0.0", "react-native-screens": ">= 4.0.0" } }, "sha512-efVt5ydHK+b4ZtjmN81iduaO5dPCmzhLBFwjCR8pV4x4VzUfJmtUJizLqTXpT3WatHdeon2gDPwhhoelsvu/JA=="],
369+
368370
"@react-navigation/core": ["@react-navigation/[email protected]", "", { "dependencies": { "@react-navigation/routers": "^7.5.2", "escape-string-regexp": "^4.0.0", "fast-deep-equal": "^3.1.3", "nanoid": "^3.3.11", "query-string": "^7.1.3", "react-is": "^19.1.0", "use-latest-callback": "^0.2.4", "use-sync-external-store": "^1.5.0" }, "peerDependencies": { "react": ">= 18.2.0" } }, "sha512-7QG29HAWOR8wYuPkfTN8L2Po+kE1xn3nsi2sS35sGngq8HYZRHfXvxrhrAZYfFnFq2hUtOhcXnSS6vEWU/5rmA=="],
369371

370372
"@react-navigation/elements": ["@react-navigation/[email protected]", "", { "dependencies": { "color": "^4.2.3", "use-latest-callback": "^0.2.4", "use-sync-external-store": "^1.5.0" }, "peerDependencies": { "@react-native-masked-view/masked-view": ">= 0.2.0", "@react-navigation/native": "^7.1.25", "react": ">= 18.2.0", "react-native": "*", "react-native-safe-area-context": ">= 4.0.0" }, "optionalPeers": ["@react-native-masked-view/masked-view"] }, "sha512-J1GltOAGowNLznEphV/kr4zs0U7mUBO1wVA2CqpkN8ePBsoxrAmsd+T5sEYUCXN9KgTDFvc6IfcDqrGSQngd/g=="],
371373

372374
"@react-navigation/native": ["@react-navigation/[email protected]", "", { "dependencies": { "@react-navigation/core": "^7.13.6", "escape-string-regexp": "^4.0.0", "fast-deep-equal": "^3.1.3", "nanoid": "^3.3.11", "use-latest-callback": "^0.2.4" }, "peerDependencies": { "react": ">= 18.2.0", "react-native": "*" } }, "sha512-zQeWK9txDePWbYfqTs0C6jeRdJTm/7VhQtW/1IbJNDi9/rFIRzZule8bdQPAnf8QWUsNujRmi1J9OG/hhfbalg=="],
373375

374-
"@react-navigation/native-stack": ["@react-navigation/[email protected]", "", { "dependencies": { "@react-navigation/elements": "^2.9.2", "color": "^4.2.3", "sf-symbols-typescript": "^2.1.0", "warn-once": "^0.1.1" }, "peerDependencies": { "@react-navigation/native": "^7.1.25", "react": ">= 18.2.0", "react-native": "*", "react-native-safe-area-context": ">= 4.0.0", "react-native-screens": ">= 4.0.0" } }, "sha512-eBY92xb4H53c9jiWriKMOZmQ/Tu9w1qcUrgOA/qjQOvJFbgKF9D6y3e4UuBaDQzjWjLEDZLaiwXe8cwXRb46mg=="],
375-
376376
"@react-navigation/routers": ["@react-navigation/[email protected]", "", { "dependencies": { "nanoid": "^3.3.11" } }, "sha512-kymreY5aeTz843E+iPAukrsOtc7nabAH6novtAPREmmGu77dQpfxPB2ZWpKb5nRErIRowp1kYRoN2Ckl+S6JYw=="],
377377

378378
"@sideway/address": ["@sideway/[email protected]", "", { "dependencies": { "@hapi/hoek": "^9.0.0" } }, "sha512-IqO/DUQHUkPeixNQ8n0JA6102hT9CmaljNTPmQ1u8MEhBo/R4Q8eKLN/vGZxuebwOroDB4cbpjheD4+/sKFK4Q=="],

‎examples/RNOneSignalTS/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@
1212
},
1313
"dependencies": {
1414
"@react-native/new-app-screen": "0.82.1",
15+
"@react-navigation/bottom-tabs": "^7.8.12",
1516
"@react-navigation/native": "^7.1.25",
16-
"@react-navigation/native-stack": "^7.8.6",
1717
"react": "19.1.1",
1818
"react-native": "0.82.1",
1919
"react-native-onesignal": "file:../../react-native-onesignal.tgz",

0 commit comments

Comments
 (0)