Release PRs Sync

.github/workflows/rnvUnitTest.yml

@@ -20,6 +20,7 @@ jobs:
               run: |
                   yarn
                   yarn bootstrap
+                  yarn lint
                   yarn test
               env:
                   CI: true

packages/app-harness/renative.json

@@ -12,7 +12,7 @@
         "react-native-splash-screen": {
             "android": {
                 "templateAndroid": {
-                    "MainActivity_java": {
+                    "MainActivity_kt": {
                         "createMethods": ["SplashScreen.show(this)"],
                         "imports": ["org.devio.rn.splashscreen.SplashScreen"]
                     }
@@ -40,7 +40,7 @@
         "TestNativeModule": {
             "android": {
                 "templateAndroid": {
-                    "MainApplication_java": {
+                    "MainApplication_kt": {
                         "packages": ["MyAppPackage"]
                     }
                 },
@@ -100,6 +100,11 @@
                         "tag": "manifest",
                         "android:name": "",
                         "children": [
+                            {
+                                "tag": "uses-permission ",
+                                "android:name": "android.permission.WRITE_EXTERNAL_STORAGE",
+                                "children": []
+                            },
                             {
                                 "tag": "application",
                                 "android:name": ".MainApplication",
@@ -108,7 +113,8 @@
                                         "tag": "activity",
                                         "android:name": "com.ahmedadeltito.photoeditor.PhotoEditorActivity",
                                         "children": []
-                                    }
+                                    },
+                                    { "tag": "activity", "android:name": "com.yalantis.ucrop.UCropActivity" }
                                 ]
                             }
                         ]

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

@@ -1,41 +1,65 @@
 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';
+import { useSplashScreen } from '../components/SplashScreen';
 import { ICON_LOGO, testProps } from '../config';
 import styles from '../styles';
 import { addNotificationListeners, removeNotificationListeners } from '../components/Notifications';
 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';
+
+const App = () => (
+    <LoggerProvider>
+        <AppContent />
+    </LoggerProvider>
+);
+
+const AppContent = () => {
     const [showVideo, setShowVideo] = useState(false);
+    const { logDebug, logs } = useLoggerContext();
+    const { SplashScreen } = useSplashScreen();
+
     useEffect(() => {
         SplashScreen.hide();
-        addNotificationListeners();
+        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.wrapper}>
             <View style={styles.header}>
                 <Image
                     style={styles.logo}
                     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 +82,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 +96,38 @@ 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>
+                    <TestCase id={6} title="Splash Screen">
+                        <Button onPress={() => SplashScreen.show()} title="Show SplashScreen" />
+                    </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, { fontWeight: 'bold' }]}>{`Logs: `}</Text>
+                {logs
+                    ? logs.map((it, idx) => (
+                          <Text key={idx} style={styles.dynamicText}>
+                              {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,10 +1,11 @@
 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 = () => {
@@ -13,12 +14,12 @@ export const removeNotificationListeners = () => {
     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.mobile.ts

@@ -1,3 +1,5 @@
 import SplashScreen from 'react-native-splash-screen';
 
-export { SplashScreen };
+export function useSplashScreen() {
+    return { SplashScreen };
+}

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

@@ -1,10 +1,20 @@
-const SplashScreen = {
+import { useEffect } from 'react';
+import { NotificationCallback } from '../types';
+import { useLoggerContext } from '../../context';
+
+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 };
+export function useSplashScreen() {
+    const { logDebug } = useLoggerContext();
+    useEffect(() => {
+        //TODO: We could also cache SplashScreen here
+    }, []);
+    return { SplashScreen: SplashScreen(logDebug) };
+}

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,25 @@
+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.concat(msg));
+        console.log(...msg);
+    };
+
+    return <LoggerContext.Provider value={{ logs, logDebug }}>{children}</LoggerContext.Provider>;
+};
+
+export const useLoggerContext = (): LoggerContextType => useContext(LoggerContext);

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

@@ -1,7 +1,15 @@
-import { isPlatformIos } from '@rnv/renative';
+import { isPlatformIos, isFactorMobile, isFactorWatch } from '@rnv/renative';
 import { StyleSheet } from 'react-native';
 
 const styles = StyleSheet.create({
+    wrapper: {
+        backgroundColor: 'white',
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        bottom: 0,
+        top: 0,
+    },
     container: {
         flex: 1,
         justifyContent: 'center',
@@ -18,13 +26,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;