Fix/app harness

packages/app-harness/src/app/index.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { Button, Image, ScrollView, Text, View } from 'react-native';
+import { Api } from '@rnv/renative';
 import { OrientationLocker, PORTRAIT, LANDSCAPE } from '../components/OrientationLocker';
 import { NewModuleButton } from '../components/NewModuleButton';
 import { SplashScreen } from '../components/SplashScreen';
@@ -9,17 +10,45 @@ import { addNotificationListeners, removeNotificationListeners } from '../compon
 import { requestPermissions } from '../components/Permissions';
 import { TestCase } from '../components/TestCase';
 
-const App = () => {
+import config from '../../package.json';
+import { LoggerProvider, useLoggerContext } from '../context';
+import { NotificationCallback } from '../components/types';
+import { SplashscreenType } from '../components/SplashScreen/types';
+
+const App = () => (
+    <LoggerProvider>
+        <AppContent />
+    </LoggerProvider>
+);
+
+const AppContent = () => {
     const [showVideo, setShowVideo] = useState(false);
+    const { logDebug, logs } = useLoggerContext();
+
     useEffect(() => {
-        SplashScreen.hide();
-        addNotificationListeners();
+        if (typeof SplashScreen === 'function') {
+            SplashScreen(handleNotification).hide();
+        } else {
+            (SplashScreen as SplashscreenType)?.hide();
+        }
+        addNotificationListeners(handleNotification);
 
         return () => {
-            removeNotificationListeners();
+            removeNotificationListeners(handleNotification);
         };
     }, []);
 
+    const handleNotification: NotificationCallback = (message) => logDebug(message);
+
+    const handleRequestPermissions = async () => {
+        try {
+            const permission = await requestPermissions();
+            logDebug(`Permissions: ${permission}`);
+        } catch (error) {
+            logDebug(`${error}`);
+        }
+    };
+
     return (
         <View style={{ flex: 1 }}>
             <View style={styles.header}>
@@ -28,14 +57,13 @@ const App = () => {
                     source={ICON_LOGO}
                     {...testProps('template-starter-home-screen-renative-image')}
                 />
-                <Text
-                    style={{ color: 'black', fontWeight: 'bold', marginHorizontal: 10 }}
-                    {...testProps('app-harness-home-screen-intro-text')}
-                >
+                <Text style={styles.introText} {...testProps('app-harness-home-screen-intro-text')}>
                     ReNative Harness
                 </Text>
                 <View style={{ flex: 1, alignItems: 'flex-end' }}>
-                    <Text style={{ color: 'black' }}>v1.0.0-rc.12, platform: macos, formFactor: desktop</Text>
+                    <Text style={styles.dynamicText}>
+                        {`v${config.version}, platform: ${Api.platform}, factor: ${Api.formFactor}, engine: ${Api.engine}`}
+                    </Text>
                 </View>
             </View>
 
@@ -58,8 +86,8 @@ const App = () => {
                     <TestCase id={3} title="Orientation support ">
                         <OrientationLocker
                             orientation={PORTRAIT}
-                            onChange={(orientation) => console.log('onChange', orientation)}
-                            onDeviceChange={(orientation) => console.log('onDeviceChange', orientation)}
+                            onChange={(orientation) => logDebug(`onChange ${orientation}`)}
+                            onDeviceChange={(orientation) => logDebug(`onDeviceChange ${orientation}`)}
                         />
                         <Button title="Toggle Video" onPress={() => setShowVideo(!showVideo)} />
                         {showVideo && (
@@ -72,25 +100,35 @@ const App = () => {
                         )}
                     </TestCase>
                     <TestCase id={4} title="Permissions">
-                        <Button onPress={requestPermissions} title="Request permissions" />
+                        <Button onPress={handleRequestPermissions} title="Request permissions" />
                     </TestCase>
                     <TestCase id={5} title="Image Support">
                         <Image source={ICON_LOGO} style={{ width: 100, height: 100 }} />
                     </TestCase>
                 </ScrollView>
             </View>
-            <View
+            <ScrollView
                 style={{
                     backgroundColor: '#EEEEEE',
-                    height: 100,
+                    maxHeight: '20%',
                     width: '100%',
                     borderTopWidth: 1,
                     borderTopColor: 'black',
                     padding: 10,
                 }}
+                contentContainerStyle={{
+                    paddingBottom: 10,
+                }}
             >
-                <Text style={{ color: 'black' }}>Logs:</Text>
-            </View>
+                <Text style={styles.dynamicText}>{`Logs: `}</Text>
+                {logs
+                    ? logs.map((it, idx) => (
+                          <Text key={idx} style={styles.dynamicText}>
+                              {`${idx + 1}. ${it}`}
+                          </Text>
+                      ))
+                    : null}
+            </ScrollView>
         </View>
     );
 };

packages/app-harness/src/components/NewModuleButton/index.native.tsx

@@ -1,17 +1,23 @@
 import React from 'react';
 import { NativeModules, Button } from 'react-native';
+import { useLoggerContext } from '../../context';
 
 export const NewModuleButton = () => {
     const { TestNativeModule } = NativeModules;
+    const { logDebug } = useLoggerContext();
     const callback = (error: any, result: string) => {
         if (error) {
-            console.log(error);
+            logDebug(error);
         } else {
-            console.log(result);
+            logDebug(result);
         }
     };
     const onPress = () => {
-        TestNativeModule.createTestEvent('testName', 'testLocation', callback);
+        if (TestNativeModule) {
+            TestNativeModule.createTestEvent('testName', 'testLocation', callback);
+        } else {
+            logDebug('NativeModules not supported for this platform');
+        }
     };
     return <Button title="Click to invoke native module!" color="#841584" onPress={onPress} />;
 };

packages/app-harness/src/components/NewModuleButton/index.tsx

@@ -1,9 +1,11 @@
 import React from 'react';
 import { Button } from 'react-native';
+import { useLoggerContext } from '../../context';
 
 export const NewModuleButton = () => {
+    const { logDebug } = useLoggerContext();
     const onPress = () => {
-        console.log('NativeModules not supported in web');
+        logDebug('NativeModules not supported in web');
     };
     return <Button title="Click to invoke native module!" color="#841584" onPress={onPress} />;
 };

packages/app-harness/src/components/Notifications/index.ios.mobile.ts

@@ -1,24 +1,25 @@
 import PushNotificationIOS from '@react-native-community/push-notification-ios';
+import { NotificationCallback, NotificationError } from '../types';
 
-export const addNotificationListeners = () => {
+export const addNotificationListeners = (callback: NotificationCallback) => {
     PushNotificationIOS.requestPermissions();
     PushNotificationIOS.addEventListener('notification', onRemoteNotification);
-    PushNotificationIOS.addEventListener('register', onRegistered);
-    PushNotificationIOS.addEventListener('registrationError', onError);
+    PushNotificationIOS.addEventListener('register', onRegistered(callback));
+    PushNotificationIOS.addEventListener('registrationError', onError(callback));
 };
 
-export const removeNotificationListeners = () => {
+export const removeNotificationListeners = (callback: NotificationCallback) => {
     PushNotificationIOS.removeEventListener('notification');
     PushNotificationIOS.removeEventListener('register');
     PushNotificationIOS.removeEventListener('registrationError');
 };
 
-const onRegistered = (deviceToken) => {
-    console.log(`Device Token: ${deviceToken}`);
+const onRegistered = (callback: NotificationCallback) => (deviceToken: string) => {
+    callback(`Device Token: ${deviceToken}`);
 };
 
-const onError = (error) => {
-    console.log(`Error on notification register: ${error}`);
+const onError = (callback: NotificationCallback) => (error: NotificationError) => {
+    callback(`Error on notification register: ${error.message}`);
 };
 
 const onRemoteNotification = (notification) => {

packages/app-harness/src/components/Notifications/index.ts

@@ -1,7 +1,9 @@
-export const addNotificationListeners = () => {
-    console.log('addNotificationListeners not supported on this platform');
+import { NotificationCallback } from '../types';
+
+export const addNotificationListeners = (callback: NotificationCallback) => {
+    callback('addNotificationListeners not supported on this platform');
 };
 
-export const removeNotificationListeners = () => {
-    console.log('removeNotificationListeners not supported on this platform');
+export const removeNotificationListeners = (callback: NotificationCallback) => {
+    callback('removeNotificationListeners not supported on this platform');
 };

packages/app-harness/src/components/Permissions/index.mobile.ts

@@ -1,7 +1,5 @@
 import { request, PERMISSIONS } from 'react-native-permissions';
 
 export const requestPermissions = () => {
-    request(PERMISSIONS.IOS.CONTACTS).then((result) => {
-        console.log(result);
-    });
+    return request(PERMISSIONS.IOS.CONTACTS);
 };

packages/app-harness/src/components/Permissions/index.ts

@@ -1,3 +1,3 @@
 export const requestPermissions = () => {
-    console.log('requestPermissions not supported on this platform');
+    return 'requestPermissions not supported on this platform';
 };

packages/app-harness/src/components/SplashScreen/index.ts

@@ -1,10 +1,12 @@
-const SplashScreen = {
+import { NotificationCallback } from '../types';
+
+const SplashScreen = (callback: NotificationCallback) => ({
     hide: () => {
-        console.log('SplashScreen.hide not supported on this platform');
+        callback('SplashScreen.hide not supported on this platform');
     },
     show: () => {
-        console.log('SplashScreen.show not supported on this platform');
+        callback('SplashScreen.show not supported on this platform');
     },
-};
+});
 
 export { SplashScreen };

packages/app-harness/src/components/SplashScreen/types.ts

@@ -0,0 +1,4 @@
+export type SplashscreenType = {
+    hide: () => void;
+    show: () => void;
+};

packages/app-harness/src/components/types.ts

@@ -0,0 +1,2 @@
+export type NotificationCallback = (message: string) => void;
+export type NotificationError = { message: string; code: number; details: any };

packages/app-harness/src/context/index.tsx

@@ -0,0 +1,24 @@
+import React, { createContext, useContext, useState, ReactNode, FC } from 'react';
+
+type LogMessage = string;
+
+type LoggerContextType = {
+    logs: LogMessage[];
+    logDebug: (msg: LogMessage) => void;
+};
+type LoggerProviderProps = {
+    children: ReactNode;
+};
+
+const LoggerContext = createContext<LoggerContextType>({} as LoggerContextType);
+
+export const LoggerProvider: FC<LoggerProviderProps> = ({ children }) => {
+    const [logs, setLogs] = useState<LogMessage[]>([]);
+    const logDebug = (msg: LogMessage) => {
+        setLogs((prevLogs) => [...prevLogs, msg]);
+    };
+
+    return <LoggerContext.Provider value={{ logs, logDebug }}>{children}</LoggerContext.Provider>;
+};
+
+export const useLoggerContext = (): LoggerContextType => useContext(LoggerContext);

packages/app-harness/src/styles/index.ts

@@ -1,4 +1,4 @@
-import { isPlatformIos } from '@rnv/renative';
+import { isPlatformIos, isFactorMobile, isFactorWatch } from '@rnv/renative';
 import { StyleSheet } from 'react-native';
 
 const styles = StyleSheet.create({
@@ -18,13 +18,23 @@ const styles = StyleSheet.create({
     header: {
         marginTop: isPlatformIos ? 50 : 0, // TODO: remove once safe area view is implemented
         flexDirection: 'row',
-        height: 50,
+        height: 60,
         backgroundColor: 'white',
         borderBottomColor: 'black',
         borderBottomWidth: 1,
         alignItems: 'center',
         padding: 10,
     },
+    introText: {
+        color: 'black',
+        fontWeight: 'bold',
+        marginHorizontal: 10,
+        display: isFactorMobile || isFactorWatch ? 'none' : 'flex',
+    },
+    dynamicText: {
+        color: 'black',
+        fontSize: isFactorWatch ? 10 : 14,
+    },
 });
 
 export default styles;