add RN navigation screens

Author: fadi-george

examples/RNOneSignalTS/App.tsx

@@ -5,33 +5,34 @@
  * @format
  */
 
-import { StatusBar, StyleSheet, useColorScheme, View } from 'react-native';
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { StatusBar, useColorScheme } from 'react-native';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
+import DetailsScreen from './DetailsScreen';
 import OSDemo from './OSDemo';
 
+export type RootStackParamList = {
+  Home: undefined;
+  Details: undefined;
+};
+
+const Stack = createNativeStackNavigator<RootStackParamList>();
+
 function App() {
   const isDarkMode = useColorScheme() === 'dark';
 
   return (
     <SafeAreaProvider>
       <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
-      <AppContent />
+      <NavigationContainer>
+        <Stack.Navigator initialRouteName="Home">
+          <Stack.Screen name="Home" component={OSDemo} />
+          <Stack.Screen name="Details" component={DetailsScreen} />
+        </Stack.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,35 @@
+import { NativeStackScreenProps } from '@react-navigation/native-stack';
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import type { RootStackParamList } from './App';
+
+type Props = NativeStackScreenProps<RootStackParamList, 'Details'>;
+
+const DetailsScreen: React.FC<Props> = ({ navigation }) => {
+  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 { NativeStackScreenProps } from '@react-navigation/native-stack';
 import React, { useCallback, useEffect, useState } from 'react';
 import {
   Alert,
@@ -9,13 +10,16 @@ import {
   View,
 } from 'react-native';
 import { LogLevel, OneSignal } from 'react-native-onesignal';
+import type { RootStackParamList } from './App';
 import { renderButtonView } from './Helpers';
 import OSButtons from './OSButtons';
 import OSConsole from './OSConsole';
 
 const APP_ID = '77e32082-ea27-42e3-a898-c72e141824ef';
 
-const OSDemo: React.FC = () => {
+type Props = NativeStackScreenProps<RootStackParamList, 'Home'>;
+
+const OSDemo: React.FC<Props> = ({ navigation }) => {
   const [consoleValue, setConsoleValue] = useState('');
   const [inputValue, setInputValue] = useState('');
 
@@ -220,6 +224,11 @@ const OSDemo: React.FC = () => {
     <SafeAreaView style={styles.container}>
       <View style={styles.header}>
         <Text style={styles.title}>OneSignal</Text>
+        <View style={styles.navButton}>
+          {renderButtonView('Go to Details', () => {
+            navigation.navigate('Details');
+          })}
+        </View>
         <OSConsole value={consoleValue} />
         <View style={styles.clearButton}>
           {renderButtonView('X', () => {
@@ -259,6 +268,11 @@ const styles = StyleSheet.create({
     alignSelf: 'center',
     paddingVertical: 10,
   },
+  navButton: {
+    position: 'absolute',
+    right: 0,
+    top: 10,
+  },
   clearButton: {
     position: 'absolute',
     right: 0,