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

   },
   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

                 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

         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);
 
     }
 
     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;
 
 
     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

 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

         this.presenter = componentPresenter;
     }
 
+    @Override
+    public void setDefaultOptions(Options defaultOptions) {
+        super.setDefaultOptions(defaultOptions);
+        presenter.setDefaultOptions(defaultOptions);
+    }
+
     @Override
     public void onViewAppeared() {
         super.onViewAppeared();
     @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

 
 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

 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;
 
 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() {
         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);
     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

                 (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

                     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

    * 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

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

playground/src/screens/WelcomeScreen.js

     flexGrow: 1,
     justifyContent: 'center',
     alignItems: 'center',
-    backgroundColor: '#e8e8e8',
   },
   bar: {
     flex: 1,
     flexDirection: 'column',
-    backgroundColor: '#e8e8e8',
     justifyContent: 'space-between'
   },
   h1: {