Fix color processing on iOS (#7250)

Author: yogevbd

lib/src/commands/OptionsProcessor.test.ts

@@ -537,8 +537,8 @@ describe('navigation options', () => {
 
         uut.processOptions(options, CommandName.SetRoot);
         expect(options).toEqual({
-          statusBar: { backgroundColor: { dynamic: { light: 0xffff0000, dark: 0xffff0000 } } },
-          topBar: { background: { color: { dynamic: { light: 0xff0000ff, dark: 0xff0000ff } } } },
+          statusBar: { backgroundColor: 0xffff0000 },
+          topBar: { background: { color: 0xff0000ff } },
         });
       });
 
@@ -549,7 +549,7 @@ describe('navigation options', () => {
 
         uut.processOptions(options, CommandName.SetRoot);
         expect(options).toEqual({
-          topBar: { background: { color: { dynamic: { light: 'NoColor', dark: 'NoColor' } } } },
+          topBar: { background: { color: 'NoColor' } },
         });
       });
 
@@ -565,11 +565,11 @@ describe('navigation options', () => {
         };
         uut.processOptions(options, CommandName.SetRoot);
         expect(options).toEqual({
-          statusBar: { backgroundColor: { dynamic: { light: 0xffff0000, dark: 0xffff0000 } } },
+          statusBar: { backgroundColor: 0xffff0000 },
           topBar: {
             background: { color: { dynamic: { light: 0xff0000ff, dark: 0xffff0000 } } },
             title: {
-              color: { dynamic: { light: null, dark: null } },
+              color: undefined,
             },
           },
         });
@@ -585,6 +585,17 @@ describe('navigation options', () => {
           topBar: { background: { color: { dynamic: { light: 0xffff0000, dark: 0xff0000ff } } } },
         });
       });
+
+      it('should not process undefined value', () => {
+        const options: Options = {
+          topBar: { background: { color: undefined } },
+        };
+
+        uut.processOptions(options, CommandName.SetRoot);
+        expect(options).toEqual({
+          topBar: { background: { color: undefined } },
+        });
+      });
     });
   });
 
@@ -748,8 +759,8 @@ describe('navigation options', () => {
           hideOnScroll: false,
           hideTopBarOnFocus: false,
           obscuresBackgroundDuringPresentation: false,
-          backgroundColor: { dynamic: { light: null, dark: null } },
-          tintColor: { dynamic: { light: null, dark: null } },
+          backgroundColor: undefined,
+          tintColor: undefined,
           placeholder: '',
         });
       });
@@ -771,8 +782,8 @@ describe('navigation options', () => {
           hideOnScroll: true,
           hideTopBarOnFocus: true,
           obscuresBackgroundDuringPresentation: false,
-          backgroundColor: { dynamic: { dark: 0xffff0000, light: 0xffff0000 } },
-          tintColor: { dynamic: { dark: 0xff00ff00, light: 0xff00ff00 } },
+          backgroundColor: 0xffff0000,
+          tintColor: 0xff00ff00,
           placeholder: 'foo',
         });
       });

lib/src/commands/OptionsProcessor.ts

@@ -116,33 +116,49 @@ export class OptionsProcessor {
 
   private processColor(key: string, value: any, options: Record<string, any>) {
     if (isEqual(key, 'color') || endsWith(key, 'Color')) {
-      const newColorObj: Record<string, any> = { dark: 'NoColor', light: 'NoColor' };
+      if (Platform.OS === 'ios') this.processColorIOS(key, value, options);
+      else this.processColorAndroid(key, value, options);
+    }
+  }
+
+  private processColorIOS(key: string, value: any, options: Record<string, any>) {
+    if (value !== undefined) {
       if (value === null) {
-        options[key] = newColorObj;
+        options[key] = 'NoColor';
       } else if (value instanceof Object) {
-        if ('semantic' in value || 'resource_paths' in value) {
-          options[key] = value;
-          return;
-        } else if ('dynamic' in value) {
-          for (let keyColor in value.dynamic) {
-            newColorObj[keyColor] = this.colorService.toNativeColor(value.dynamic[keyColor]);
-          }
-
-          options[key] = newColorObj;
+        if ('dynamic' in value) {
+          options[key].dynamic.light = this.colorService.toNativeColor(value.dynamic.light);
+          options[key].dynamic.dark = this.colorService.toNativeColor(value.dynamic.dark);
         } else {
-          for (let keyColor in value) {
-            newColorObj[keyColor] = this.colorService.toNativeColor(value[keyColor]);
-          }
-          options[key] = newColorObj;
+          options[key].light = this.colorService.toNativeColor(value.light);
+          options[key].dark = this.colorService.toNativeColor(value.dark);
+          options[key] = DynamicColorIOS(options[key]);
         }
       } else {
-        let parsedColor = this.colorService.toNativeColor(value);
-        newColorObj.light = parsedColor;
-        newColorObj.dark = parsedColor;
-        options[key] = newColorObj;
+        options[key] = this.colorService.toNativeColor(value);
       }
+    }
+  }
 
-      if (Platform.OS === 'ios') options[key] = DynamicColorIOS(options[key]);
+  private processColorAndroid(key: string, value: any, options: Record<string, any>) {
+    const newColorObj: Record<string, any> = { dark: 'NoColor', light: 'NoColor' };
+    if (value === null) {
+      options[key] = newColorObj;
+    } else if (value instanceof Object) {
+      if ('semantic' in value || 'resource_paths' in value) {
+        options[key] = value;
+        return;
+      } else {
+        for (let keyColor in value) {
+          newColorObj[keyColor] = this.colorService.toNativeColor(value[keyColor]);
+        }
+        options[key] = newColorObj;
+      }
+    } else {
+      let parsedColor = this.colorService.toNativeColor(value);
+      newColorObj.light = parsedColor;
+      newColorObj.dark = parsedColor;
+      options[key] = newColorObj;
     }
   }