More work on TopBar background component

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

@@ -19,6 +19,10 @@ public class TopBarBackgroundOptions {
         options.color = ColorParser.parse(json, "color");
         options.component = TextParser.parse(json, "component");
 
+        if (options.component.hasValue()) {
+            options.color = new Color(android.graphics.Color.TRANSPARENT);
+        }
+
         return options;
     }
 
@@ -27,9 +31,11 @@ public class TopBarBackgroundOptions {
 
     void mergeWith(final TopBarBackgroundOptions other) {
         if (other.color.hasValue()) color = other.color;
+        if (other.component.hasValue()) component = other.component;
     }
 
     void mergeWithDefault(TopBarBackgroundOptions defaultOptions) {
         if (!color.hasValue()) color = defaultOptions.color;
+        if (!component.hasValue()) component = defaultOptions.component;
     }
 }

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

@@ -40,6 +40,7 @@ public class OptionsPresenter {
         if (options.title.text.hasValue()) topBar.setTitle(options.title.text.get());
         if (options.title.component.hasValue()) topBar.setComponent(options.title.component.get(), options.title.alignment);
         topBar.setBackgroundColor(options.background.color);
+        topBar.setBackgroundComponent(options.background.component);
         topBar.setTitleTextColor(options.title.color);
         topBar.setTitleFontSize(options.title.fontSize);
         if (options.testId.hasValue()) topBar.setTestId(options.testId.get());

lib/android/app/src/main/java/com/reactnativenavigation/views/TopBar.java

@@ -13,18 +13,17 @@ import android.view.View;
 import android.widget.RelativeLayout;
 import android.widget.TextView;
 
-import com.reactnativenavigation.R;
 import com.reactnativenavigation.anim.AnimationListener;
 import com.reactnativenavigation.anim.TopBarAnimator;
 import com.reactnativenavigation.anim.TopBarCollapseBehavior;
 import com.reactnativenavigation.interfaces.ScrollEventListener;
 import com.reactnativenavigation.parse.AnimationOptions;
 import com.reactnativenavigation.parse.TitleOptions;
-import com.reactnativenavigation.parse.TopBarBackgroundOptions;
 import com.reactnativenavigation.parse.params.Button;
 import com.reactnativenavigation.parse.params.Color;
 import com.reactnativenavigation.parse.params.Fraction;
 import com.reactnativenavigation.parse.params.Number;
+import com.reactnativenavigation.parse.params.Text;
 import com.reactnativenavigation.utils.CompatUtils;
 import com.reactnativenavigation.viewcontrollers.ReactViewCreator;
 import com.reactnativenavigation.viewcontrollers.TitleBarReactViewController;
@@ -48,6 +47,7 @@ public class TopBar extends AppBarLayout implements ScrollEventListener.ScrollAw
     private RelativeLayout root;
     private StackLayout parentView;
     private TopBarBackgroundViewCreator topBarBackgroundViewCreator;
+    private TopBarBackgroundView backgroundView;
 
     public TopBar(final Context context, ReactViewCreator buttonCreator, TitleBarReactViewCreator titleBarReactViewCreator, TopBarBackgroundViewCreator topBarBackgroundViewCreator, TopBarButtonController.OnClickListener onClickListener, StackLayout parentView) {
         super(context);
@@ -104,11 +104,11 @@ public class TopBar extends AppBarLayout implements ScrollEventListener.ScrollAw
         titleBar.setComponent(componentName, alignment);
     }
 
-    public void setBackgroundComponent(TopBarBackgroundOptions options) {
-        if (options.component.hasValue()) {
-            TopBarBackgroundView background = topBarBackgroundViewCreator.create((Activity) getContext(), String.valueOf(CompatUtils.generateViewId()), options.component.get());
-            background.setId(R.id.topBarBackgroundComponent);
-            root.addView(background);
+    public void setBackgroundComponent(Text component) {
+        if (component.hasValue()) {
+            backgroundView = topBarBackgroundViewCreator.create((Activity) getContext(), String.valueOf(CompatUtils.generateViewId()), component.get());
+            RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(MATCH_PARENT, getHeight());
+            root.addView(backgroundView, 0, lp);
         }
     }
 
@@ -202,6 +202,11 @@ public class TopBar extends AppBarLayout implements ScrollEventListener.ScrollAw
     }
 
     public void clear() {
+        if (backgroundView != null) {
+            backgroundView.destroy();
+            root.removeView(backgroundView);
+            backgroundView = null;
+        }
         titleBar.clear();
     }
 

lib/android/app/src/main/java/com/reactnativenavigation/views/titlebar/TitleBar.java

@@ -55,6 +55,7 @@ public class TitleBar extends Toolbar {
         clearTitle();
         reactViewController.setComponent(componentName);
         addView(reactViewController.getView(), getComponentLayoutParams(alignment));
+        requestLayout();
     }
 
     public void setBackgroundColor(Color color) {

lib/android/app/src/main/java/com/reactnativenavigation/views/topbar/TopBarBackgroundView.java

@@ -12,12 +12,4 @@ public class TopBarBackgroundView extends ReactView {
     public TopBarBackgroundView(Context context, ReactInstanceManager reactInstanceManager, String componentId, String componentName) {
         super(context, reactInstanceManager, componentId, componentName);
     }
-
-    @Override
-    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
-        super.onMeasure(
-                getChildCount() > 0 ? MeasureSpec.makeMeasureSpec(getChildAt(0).getWidth(), MeasureSpec.EXACTLY) : widthMeasureSpec,
-                heightMeasureSpec
-        );
-    }
 }

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

@@ -14,10 +14,14 @@ import com.reactnativenavigation.mocks.TitleBarReactViewCreatorMock;
 import com.reactnativenavigation.mocks.TopBarBackgroundViewCreatorMock;
 import com.reactnativenavigation.mocks.TopBarButtonCreatorMock;
 import com.reactnativenavigation.parse.Options;
+import com.reactnativenavigation.parse.TopBarBackgroundOptions;
 import com.reactnativenavigation.parse.params.Bool;
 import com.reactnativenavigation.parse.params.Fraction;
 import com.reactnativenavigation.parse.params.Text;
+import com.reactnativenavigation.utils.ViewUtils;
+import com.reactnativenavigation.views.topbar.TopBarBackgroundView;
 
+import org.json.JSONObject;
 import org.junit.Test;
 
 import javax.annotation.Nullable;
@@ -177,4 +181,17 @@ public class OptionsApplyingTest extends BaseTest {
             }
         });
     }
+
+    @Test
+    public void appliesTopBarComponent() throws Exception {
+        JSONObject json = new JSONObject();
+        json.put("component", "someComponent");
+        uut.options.topBarOptions.background = TopBarBackgroundOptions.parse(json);
+        uut.ensureViewIsCreated();
+        stackController.push(uut, new MockPromise());
+        uut.onViewAppeared();
+
+        assertThat(((ColorDrawable) stackController.getTopBar().getTitleBar().getBackground()).getColor()).isEqualTo(Color.TRANSPARENT);
+        assertThat(ViewUtils.findChildrenByClassRecursive(stackController.getTopBar(), TopBarBackgroundView.class)).isNotNull();
+    }
 }

lib/android/app/src/test/java/com/reactnativenavigation/views/TopBarBackgroundComponentTest.java

@@ -1,24 +1,29 @@
 package com.reactnativenavigation.views;
 
+import android.app.Activity;
 import android.util.Log;
+import android.view.ViewGroup;
 
 import com.reactnativenavigation.BaseTest;
 import com.reactnativenavigation.R;
 import com.reactnativenavigation.mocks.TitleBarReactViewCreatorMock;
 import com.reactnativenavigation.mocks.TopBarBackgroundViewCreatorMock;
 import com.reactnativenavigation.mocks.TopBarButtonCreatorMock;
-import com.reactnativenavigation.parse.TopBarBackgroundOptions;
 import com.reactnativenavigation.parse.params.Text;
-import com.reactnativenavigation.react.ReactView;
+import com.reactnativenavigation.utils.ViewUtils;
 import com.reactnativenavigation.viewcontrollers.TopBarButtonController;
+import com.reactnativenavigation.views.topbar.TopBarBackgroundView;
 
 import org.junit.Test;
 
 import static org.assertj.core.api.Java6Assertions.assertThat;
 import static org.mockito.Mockito.spy;
+import static org.mockito.Mockito.times;
+import static org.mockito.Mockito.verify;
 
 public class TopBarBackgroundComponentTest extends BaseTest {
     private TopBar uut;
+    private TopBarBackgroundView backgroundView;
 
     @SuppressWarnings("Convert2Lambda")
     @Override
@@ -29,23 +34,39 @@ public class TopBarBackgroundComponentTest extends BaseTest {
                 Log.i("TopBarTest", "onPress: " + buttonId);
             }
         });
-        StackLayout parent = new StackLayout(newActivity(), new TopBarButtonCreatorMock(), new TitleBarReactViewCreatorMock(), new TopBarBackgroundViewCreatorMock(), onClickListener);
-        uut = new TopBar(newActivity(), new TopBarButtonCreatorMock(), new TitleBarReactViewCreatorMock(), new TopBarBackgroundViewCreatorMock(), onClickListener, parent);
+        TopBarBackgroundViewCreatorMock backgroundViewCreator = new TopBarBackgroundViewCreatorMock() {
+            @Override
+            public TopBarBackgroundView create(Activity activity, String componentId, String componentName) {
+                backgroundView = spy(super.create(activity, componentId, componentName));
+                return backgroundView;
+            }
+        };
+        StackLayout parent = new StackLayout(newActivity(), new TopBarButtonCreatorMock(), new TitleBarReactViewCreatorMock(), backgroundViewCreator, onClickListener);
+        uut = new TopBar(newActivity(), new TopBarButtonCreatorMock(), new TitleBarReactViewCreatorMock(), backgroundViewCreator, onClickListener, parent);
         parent.addView(uut);
     }
 
     @Test
     public void setBackgroundComponent() throws Exception {
-        TopBarBackgroundOptions options = new TopBarBackgroundOptions();
-        options.component = new Text("someComponent");
-        uut.setBackgroundComponent(options);
-        assertThat(ReactView.class.isAssignableFrom(uut.findViewById(R.id.topBarBackgroundComponent).getClass())).isTrue();
+        uut.getLayoutParams().height = 100;
+        uut.setBackgroundComponent(new Text("someComponent"));
+        TopBarBackgroundView background = (TopBarBackgroundView) ViewUtils.findChildrenByClassRecursive(uut, TopBarBackgroundView.class).get(0);
+        assertThat(background).isNotNull();
+        assertThat(background.getLayoutParams().width).isEqualTo(ViewGroup.LayoutParams.MATCH_PARENT);
+        assertThat(background.getLayoutParams().height).isEqualTo(uut.getHeight());
     }
 
     @Test
     public void setBackgroundComponent_doesNotSetIfNoComponentIsDefined() throws Exception {
-        TopBarBackgroundOptions options = new TopBarBackgroundOptions();
-        uut.setBackgroundComponent(options);
+        uut.setBackgroundComponent(new Text("someComponent"));
         assertThat(uut.findViewById(R.id.topBarBackgroundComponent)).isNull();
     }
+
+    @Test
+    public void clear_componentIsDestroyed() throws Exception {
+        uut.setBackgroundComponent(new Text("someComponent"));
+        uut.clear();
+        verify(backgroundView, times(1)).destroy();
+        assertThat(backgroundView.getParent()).isNull();
+    }
 }

playground/src/screens/OptionsScreen.js

@@ -24,6 +24,9 @@ class OptionsScreen extends Component {
           fontFamily: 'HelveticaNeue-Italic',
           largeTitle: false
         },
+        background: {
+          component: 'TopBarBackground'
+        },
         ...Platform.select({
           android: { drawBehind: true },
           ios: { drawBehind: false, }

playground/src/screens/TopBarBackground.js

@@ -0,0 +1,41 @@
+const React = require('react');
+const { Component } = require('react');
+const {
+  StyleSheet,
+  View
+} = require('react-native');
+
+class TopBarBackground extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {};
+    this.dots = new Array(55).fill('').map((ignored, i) => <View key={'dot' + i} style={styles.dot}/>);
+  }
+
+  render() {
+    return (
+      <View style={styles.container}>
+        {this.dots}
+      </View>
+    );
+  }
+}
+
+module.exports = TopBarBackground;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: 'row',
+    backgroundColor: '#e0e0e0',
+    flexWrap: 'wrap'
+  },
+  dot: {
+    height: 16,
+    width: 16,
+    borderRadius: 8,
+    margin: 4,
+    backgroundColor: '#bbdefb'
+  }
+});

playground/src/screens/index.js

@@ -21,6 +21,7 @@ const Alert = require('./Alert');
 const BackHandlerModalScreen = require('./BackHandlerModalScreen');
 const CustomTextButton = require('./CustomTextButton');
 const CustomRoundedButton = require('./CustomRoundedButton');
+const TopBarBackground = require('./TopBarBackground');
 
 function registerScreens() {
   Navigation.registerComponent(`navigation.playground.CustomTransitionDestination`, () => CustomTransitionDestination);
@@ -45,6 +46,7 @@ function registerScreens() {
   Navigation.registerComponent('navigation.playground.BackHandlerModalScreen', () => BackHandlerModalScreen);
   Navigation.registerComponent('CustomTextButton', () => CustomTextButton);
   Navigation.registerComponent('CustomRoundedButton', () => CustomRoundedButton);
+  Navigation.registerComponent('TopBarBackground', () => TopBarBackground);
 }
 
 module.exports = {