TopBar component Android cont

* Clear text when component is used in title
* Measure title component to first child's width

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

@@ -2,7 +2,9 @@ package com.reactnativenavigation.parse;
 
 import android.graphics.Typeface;
 import android.support.annotation.Nullable;
+import android.util.Log;
 
+import com.reactnativenavigation.BuildConfig;
 import com.reactnativenavigation.parse.params.Color;
 import com.reactnativenavigation.parse.params.Fraction;
 import com.reactnativenavigation.parse.params.NullColor;
@@ -45,6 +47,11 @@ public class TitleOptions {
         options.component = TextParser.parse(json, "component");
         options.alignment = Alignment.fromString(TextParser.parse(json, "alignment").get(""));
 
+        if (options.component.hasValue() && options.text.hasValue()) {
+            if (BuildConfig.DEBUG) Log.w("RNN", "A screen can't use both text and component - clearing text.");
+            options.text = new NullText();
+        }
+
         return options;
     }
 

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

@@ -3,7 +3,6 @@ package com.reactnativenavigation.viewcontrollers;
 import android.app.Activity;
 
 import com.reactnativenavigation.parse.Options;
-import com.reactnativenavigation.parse.TitleOptions;
 import com.reactnativenavigation.utils.CompatUtils;
 import com.reactnativenavigation.views.titlebar.TitleBarReactView;
 import com.reactnativenavigation.views.titlebar.TitleBarReactViewCreator;
@@ -12,7 +11,6 @@ public class TitleBarReactViewController extends ViewController<TitleBarReactVie
 
     private final TitleBarReactViewCreator reactViewCreator;
     private String componentName;
-    private TitleOptions.Alignment alignment;
 
     public TitleBarReactViewController(Activity activity, TitleBarReactViewCreator reactViewCreator) {
         super(activity, CompatUtils.generateViewId() + "", new Options());
@@ -29,8 +27,7 @@ public class TitleBarReactViewController extends ViewController<TitleBarReactVie
 
     }
 
-    public void setComponent(String componentName, TitleOptions.Alignment alignment) {
+    public void setComponent(String componentName) {
         this.componentName = componentName;
-        this.alignment = alignment;
     }
 }

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

@@ -15,6 +15,7 @@ import com.reactnativenavigation.presentation.FabOptionsPresenter;
 import com.reactnativenavigation.utils.CompatUtils;
 import com.reactnativenavigation.utils.StringUtils;
 import com.reactnativenavigation.utils.Task;
+import com.reactnativenavigation.utils.UiUtils;
 import com.reactnativenavigation.views.Component;
 
 public abstract class ViewController<T extends ViewGroup> implements ViewTreeObserver.OnGlobalLayoutListener {
@@ -201,6 +202,10 @@ public abstract class ViewController<T extends ViewGroup> implements ViewTreeObs
         }
     }
 
+    public void runOnPreDraw(Task<T> task) {
+        UiUtils.runOnPreDrawOnce(getView(), () -> task.run(getView()));
+    }
+
     public abstract void sendOnNavigationButtonPressed(String buttonId);
 
     protected boolean isViewShown() {

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

@@ -7,6 +7,7 @@ import android.graphics.Typeface;
 import android.support.annotation.Nullable;
 import android.support.v7.widget.Toolbar;
 import android.util.Log;
+import android.view.Gravity;
 import android.view.View;
 import android.view.ViewGroup;
 import android.widget.TextView;
@@ -22,6 +23,9 @@ import com.reactnativenavigation.viewcontrollers.TopBarButtonController;
 import java.util.ArrayList;
 import java.util.List;
 
+import static android.view.ViewGroup.LayoutParams.MATCH_PARENT;
+import static android.view.ViewGroup.LayoutParams.WRAP_CONTENT;
+
 @SuppressLint("ViewConstructor")
 public class TitleBar extends Toolbar {
     private final ReactViewCreator buttonCreator;
@@ -48,8 +52,8 @@ public class TitleBar extends Toolbar {
     }
 
     public void setComponent(String componentName, TitleOptions.Alignment alignment) {
-        reactViewController.setComponent(componentName, alignment);
-        addView(reactViewController.getView(), ViewGroup.LayoutParams.WRAP_CONTENT, getHeight());
+        reactViewController.setComponent(componentName);
+        addView(reactViewController.getView(), getComponentLayoutParams(alignment));
     }
 
     public void setBackgroundColor(Color color) {
@@ -146,4 +150,14 @@ public class TitleBar extends Toolbar {
         }
         return null;
     }
+
+    public Toolbar.LayoutParams getComponentLayoutParams(TitleOptions.Alignment alignment) {
+        if (alignment == TitleOptions.Alignment.Fill) {
+            return new LayoutParams(MATCH_PARENT, getHeight());
+        } else {
+            LayoutParams lp = new LayoutParams(WRAP_CONTENT, getHeight());
+            lp.gravity = Gravity.CENTER;
+            return lp;
+        }
+    }
 }

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

@@ -12,4 +12,12 @@ public class TitleBarReactView extends ReactView {
     public TitleBarReactView(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/TitleBarTest.java

@@ -1,6 +1,8 @@
 package com.reactnativenavigation.viewcontrollers;
 
 import android.app.Activity;
+import android.support.v7.widget.Toolbar;
+import android.view.Gravity;
 import android.view.ViewGroup;
 
 import com.reactnativenavigation.BaseTest;
@@ -14,6 +16,7 @@ import com.reactnativenavigation.views.titlebar.TitleBar;
 import com.reactnativenavigation.views.titlebar.TitleBarReactView;
 
 import org.junit.Test;
+import org.mockito.ArgumentCaptor;
 
 import java.util.ArrayList;
 import java.util.Arrays;
@@ -24,7 +27,6 @@ import java.util.Map;
 
 import static org.assertj.core.api.Java6Assertions.assertThat;
 import static org.mockito.ArgumentMatchers.any;
-import static org.mockito.ArgumentMatchers.eq;
 import static org.mockito.Mockito.spy;
 import static org.mockito.Mockito.times;
 import static org.mockito.Mockito.verify;
@@ -128,10 +130,28 @@ public class TitleBarTest extends BaseTest {
     }
 
     @Test
-    public void setComponent_addsComponentToTitleBar() {
+    public void setComponent_addsComponentToTitleBar() throws Exception {
         uut.setComponent("com.rnn.CustomView", TitleOptions.Alignment.Center);
-        final int height = uut.getHeight();
-        verify(uut, times(1)).addView(any(TitleBarReactView.class), eq(ViewGroup.LayoutParams.WRAP_CONTENT), eq(height));
+        verify(uut, times(1)).addView(any(TitleBarReactView.class));
+    }
+
+    @Test
+    public void setComponent_alignFill() throws Exception {
+        uut.setComponent("com.rnn.CustomView", TitleOptions.Alignment.Fill);
+        verify(uut, times(1)).getComponentLayoutParams(TitleOptions.Alignment.Fill);
+        ArgumentCaptor<Toolbar.LayoutParams> lpCaptor = ArgumentCaptor.forClass(Toolbar.LayoutParams.class);
+        verify(uut, times(1)).addView(any(TitleBarReactView.class), lpCaptor.capture());
+        assertThat(lpCaptor.getValue().width == ViewGroup.LayoutParams.MATCH_PARENT);
+    }
+
+    @Test
+    public void setComponent_alignCenter() throws Exception {
+        uut.setComponent("com.rnn.CustomView", TitleOptions.Alignment.Center);
+        verify(uut, times(1)).getComponentLayoutParams(TitleOptions.Alignment.Center);
+        ArgumentCaptor<Toolbar.LayoutParams> lpCaptor = ArgumentCaptor.forClass(Toolbar.LayoutParams.class);
+        verify(uut, times(1)).addView(any(TitleBarReactView.class), lpCaptor.capture());
+        assertThat(lpCaptor.getValue().width == ViewGroup.LayoutParams.WRAP_CONTENT);
+        assertThat(lpCaptor.getValue().gravity == Gravity.CENTER);
     }
 
     private List<Button> leftButton(Button leftButton) {

playground/src/screens/CustomTopBar.js

@@ -19,7 +19,7 @@ class CustomTopBar extends Component {
   render() {
     return (
       <View style={styles.container}>
-        <TouchableOpacity stye={styles.button} onPress={() => Alert.alert(this.props.title, 'Thanks for that :)')}>
+        <TouchableOpacity onPress={() => Alert.alert(this.props.title, 'Thanks for that :)')}>
           <Text style={styles.text}>Press Me</Text>
         </TouchableOpacity>
       </View>
@@ -32,16 +32,12 @@ module.exports = CustomTopBar;
 const styles = StyleSheet.create({
   container: {
     flex: 1,
+    flexDirection: 'column',
     justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: 'white'
-  },
-  button: {
-    alignSelf: 'center',
-    backgroundColor: 'green'
+    alignSelf: 'center'
   },
   text: {
     alignSelf: 'center',
-    color: 'black'
+    color: 'black',
   }
 });

playground/src/screens/OptionsScreen.js

@@ -23,6 +23,8 @@ class OptionsScreen extends Component {
           fontSize: 16,
           fontFamily: 'HelveticaNeue-Italic',
           largeTitle: false,
+          component: 'navigation.playground.CustomTopBar',
+          alignment: 'center'
         },
         ...Platform.select({
           android: { drawBehind: true },
@@ -41,13 +43,13 @@ class OptionsScreen extends Component {
             testID: CUSTOM_BUTTON2,
             component: 'CustomRoundedButton'
           },
-          {
-            id: BUTTON_ONE,
-            testID: BUTTON_ONE,
-            title: 'One',
-            buttonFontSize: 28,
-            buttonColor: 'red'
-          }
+          // {
+          //   id: BUTTON_ONE,
+          //   testID: BUTTON_ONE,
+          //   title: 'One',
+          //   buttonFontSize: 28,
+          //   buttonColor: 'red'
+          // }
         ],
         leftButtons: [{
           id: BUTTON_LEFT,
@@ -99,6 +101,7 @@ class OptionsScreen extends Component {
   render() {
     return (
       <View style={styles.root}>
+        <View style={{width: 2, height: 2, backgroundColor: 'red', alignSelf: 'center'}}/>
         <Text style={styles.h1} testID={testIDs.OPTIONS_SCREEN_HEADER}>{`Options Screen`}</Text>
         <Button title='Dynamic Options' testID={testIDs.DYNAMIC_OPTIONS_BUTTON} onPress={this.onClickDynamicOptions} />
         <Button title='Show Top Bar' testID={testIDs.SHOW_TOP_BAR_BUTTON} onPress={this.onClickShowTopBar} />