Add layout.componentBackgroundColor

This property is used to set background color only for components,
unlike backgroundColor which sets color for every type of layout.

Motivation
When a view appears, its options are resolved according to its
currently displayed children. Basically this means that child options
are hoisted to the parent as children can declare options which effect
their parent.
This means that if a component has declared layout.backgroundColor or
if that property was declared in defaultOptions, each view will have a
background color, which might contribute to a significant overdraw.

docs/docs/styling.md

@@ -228,7 +228,8 @@ Navigation.mergeOptions(this.props.componentId, {
   },
   layout: {
     topMargin: Navigation.constants().statusBarHeight, // Set the layout's top margin
-    orientation: ['portrait', 'landscape'] | ['sensorLandscape'] // An array of supported orientations
+    orientation: ['portrait', 'landscape'] | ['sensorLandscape'], // An array of supported orientations
+    componentBackgroundColor: 'red' // Set background color only for components, helps reduce overdraw if background color is set in default options.
   },
   topBar: {
     height: 70, // TopBar height in dp

lib/android/app/src/main/java/com/reactnativenavigation/parse/LayoutFactory.java

@@ -146,7 +146,7 @@ public class LayoutFactory {
                 new ComponentViewCreator(reactInstanceManager),
                 parse(typefaceManager, node.getOptions()),
                 new Presenter(activity, defaultOptions),
-                new ComponentPresenter()
+                new ComponentPresenter(defaultOptions)
         );
 	}
 

lib/android/app/src/main/java/com/reactnativenavigation/parse/LayoutOptions.java

@@ -15,6 +15,7 @@ public class LayoutOptions {
         if (json == null) return result;
 
         result.backgroundColor = ColorParser.parse(json, "backgroundColor");
+        result.componentBackgroundColor = ColorParser.parse(json, "componentBackgroundColor");
         result.topMargin = NumberParser.parse(json, "topMargin");
         result.orientation = OrientationOptions.parse(json);
 
@@ -22,11 +23,13 @@ public class LayoutOptions {
     }
 
     public Colour backgroundColor = new NullColor();
+    public Colour componentBackgroundColor = new NullColor();
     public Number topMargin = new NullNumber();
     public OrientationOptions orientation = new OrientationOptions();
 
     public void mergeWith(LayoutOptions other) {
         if (other.backgroundColor.hasValue()) backgroundColor = other.backgroundColor;
+        if (other.componentBackgroundColor.hasValue()) componentBackgroundColor = other.componentBackgroundColor;
         if (other.topMargin.hasValue()) topMargin = other.topMargin;
         if (other.orientation.hasValue()) orientation = other.orientation;
 
@@ -34,6 +37,7 @@ public class LayoutOptions {
 
     public void mergeWithDefault(LayoutOptions defaultOptions) {
         if (!backgroundColor.hasValue()) backgroundColor = defaultOptions.backgroundColor;
+        if (!componentBackgroundColor.hasValue()) componentBackgroundColor = defaultOptions.componentBackgroundColor;
         if (!topMargin.hasValue()) topMargin = defaultOptions.topMargin;
         if (!orientation.hasValue()) orientation = defaultOptions.orientation;
     }

lib/android/app/src/main/java/com/reactnativenavigation/presentation/ComponentPresenter.java

@@ -4,8 +4,28 @@ import com.reactnativenavigation.parse.Options;
 import com.reactnativenavigation.views.ComponentLayout;
 
 public class ComponentPresenter {
+    public Options defaultOptions;
+
+    public ComponentPresenter(Options defaultOptions) {
+        this.defaultOptions = defaultOptions;
+    }
+
+    public void setDefaultOptions(Options defaultOptions) {
+        this.defaultOptions = defaultOptions;
+    }
+
+    public void applyOptions(ComponentLayout view, Options options) {
+        mergeBackgroundColor(view, options);
+    }
 
     public void mergeOptions(ComponentLayout view, Options options) {
         if (options.overlayOptions.interceptTouchOutside.hasValue()) view.setInterceptTouchOutside(options.overlayOptions.interceptTouchOutside);
+        mergeBackgroundColor(view, options);
+    }
+
+    private void mergeBackgroundColor(ComponentLayout view, Options options) {
+        if (options.layout.componentBackgroundColor.hasValue()) {
+            view.setBackgroundColor(options.layout.componentBackgroundColor.get());
+        }
     }
 }

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/ComponentViewController.java

@@ -30,6 +30,12 @@ public class ComponentViewController extends ChildController<ComponentLayout> {
         this.presenter = componentPresenter;
     }
 
+    @Override
+    public void setDefaultOptions(Options defaultOptions) {
+        super.setDefaultOptions(defaultOptions);
+        presenter.setDefaultOptions(defaultOptions);
+    }
+
     @Override
     public void onViewAppeared() {
         super.onViewAppeared();
@@ -50,7 +56,8 @@ public class ComponentViewController extends ChildController<ComponentLayout> {
     @Override
     public void applyOptions(Options options) {
         super.applyOptions(options);
-        view.applyOptions(options);
+        getView().applyOptions(options);
+        presenter.applyOptions(getView(), resolveCurrentOptions(presenter.defaultOptions));
     }
 
     @Override

lib/android/app/src/test/java/com/reactnativenavigation/mocks/SimpleComponentViewController.java

@@ -9,6 +9,6 @@ import com.reactnativenavigation.viewcontrollers.*;
 
 public class SimpleComponentViewController extends ComponentViewController {
     public SimpleComponentViewController(Activity activity, ChildControllersRegistry childRegistry, String id, Options initialOptions) {
-        super(activity, childRegistry,id, "theComponentName", new TestComponentViewCreator(), initialOptions, new Presenter(activity, new Options()), new ComponentPresenter());
+        super(activity, childRegistry,id, "theComponentName", new TestComponentViewCreator(), initialOptions, new Presenter(activity, new Options()), new ComponentPresenter(Options.EMPTY));
     }
 }

lib/android/app/src/test/java/com/reactnativenavigation/viewcontrollers/ComponentViewControllerTest.java

@@ -9,6 +9,7 @@ import com.reactnativenavigation.mocks.TestReactView;
 import com.reactnativenavigation.parse.Options;
 import com.reactnativenavigation.presentation.ComponentPresenter;
 import com.reactnativenavigation.presentation.Presenter;
+import com.reactnativenavigation.views.ComponentLayout;
 import com.reactnativenavigation.views.StackLayout;
 
 import org.junit.Test;
@@ -22,8 +23,9 @@ import static org.mockito.Mockito.when;
 
 public class ComponentViewControllerTest extends BaseTest {
     private ComponentViewController uut;
-    private IReactView view;
-    private ComponentPresenter componentPresenter;
+    private ComponentLayout view;
+    private ComponentPresenter presenter;
+    private Options resolvedOptions = new Options();
 
     @Override
     public void beforeEach() {
@@ -32,12 +34,32 @@ public class ComponentViewControllerTest extends BaseTest {
         view = spy(new TestComponentLayout(activity, new TestReactView(activity)));
         ParentController<StackLayout> parentController = TestUtils.newStackController(activity).build();
         Presenter presenter = new Presenter(activity, new Options());
-        this.componentPresenter = spy(new ComponentPresenter());
-        uut = new ComponentViewController(activity, new ChildControllersRegistry(), "componentId1", "componentName", (activity1, componentId, componentName) -> view, new Options(), presenter, this.componentPresenter);
+        this.presenter = spy(new ComponentPresenter(Options.EMPTY));
+        uut = new ComponentViewController(activity, new ChildControllersRegistry(), "componentId1", "componentName", (activity1, componentId, componentName) -> view, new Options(), presenter, this.presenter) {
+            @Override
+            public Options resolveCurrentOptions(Options defaultOptions) {
+                return resolvedOptions;
+            }
+        };
         uut.setParentController(parentController);
         parentController.ensureViewIsCreated();
     }
 
+    @Test
+    public void setDefaultOptions() {
+        Options defaultOptions = new Options();
+        uut.setDefaultOptions(defaultOptions);
+        verify(presenter).setDefaultOptions(defaultOptions);
+    }
+
+    @Test
+    public void applyOptions() {
+        Options options = new Options();
+        uut.applyOptions(options);
+        verify(view).applyOptions(options);
+        verify(presenter).applyOptions(view, resolvedOptions);
+    }
+
     @Test
     public void createsViewFromComponentViewCreator() {
         assertThat(uut.getView()).isSameAs(view);
@@ -93,6 +115,6 @@ public class ComponentViewControllerTest extends BaseTest {
     public void mergeOptions_delegatesToPresenter() {
         Options options = new Options();
         uut.mergeOptions(options);
-        verify(componentPresenter).mergeOptions(uut.getView(), options);
+        verify(presenter).mergeOptions(uut.getView(), options);
     }
 }

lib/android/app/src/test/java/com/reactnativenavigation/viewcontrollers/OptionsApplyingTest.java

@@ -63,7 +63,7 @@ public class OptionsApplyingTest extends BaseTest {
                 (activity1, componentId, componentName) -> view,
                 initialNavigationOptions,
                 new Presenter(activity, new Options()),
-                new ComponentPresenter()
+                new ComponentPresenter(Options.EMPTY)
         ) {
             @Override
             public boolean isViewShown() {

lib/android/app/src/test/java/com/reactnativenavigation/viewcontrollers/TopTabsViewControllerTest.java

@@ -92,7 +92,7 @@ public class TopTabsViewControllerTest extends BaseTest {
                     new TestComponentViewCreator(),
                     tabOptions.get(i),
                     new Presenter(activity, new Options()),
-                    new ComponentPresenter()
+                    new ComponentPresenter(Options.EMPTY)
             );
             tabControllers.add(spy(viewController));
         }

lib/src/interfaces/Options.ts

@@ -55,6 +55,10 @@ export interface OptionsLayout {
    * Set the screen background color
    */
   backgroundColor?: Color;
+  /**
+   * Set background color only for components, helps reduce overdraw if background color is set in default options.
+   */
+  componentBackgroundColor?: Color;
   /**
    * Set the allowed orientations
    */

playground/src/app.js

@@ -24,6 +24,9 @@ function start() {
   registerScreens();
   Navigation.events().registerAppLaunchedListener(async () => {
     Navigation.setDefaultOptions({
+      layout: {
+        componentBackgroundColor: '#e8e8e8'
+      },
       bottomTab: {
         iconColor: '#1B4C77',
         selectedIconColor: '#0f0',

playground/src/screens/WelcomeScreen.js

@@ -583,12 +583,10 @@ const styles = {
     flexGrow: 1,
     justifyContent: 'center',
     alignItems: 'center',
-    backgroundColor: '#e8e8e8',
   },
   bar: {
     flex: 1,
     flexDirection: 'column',
-    backgroundColor: '#e8e8e8',
     justifyContent: 'space-between'
   },
   h1: {