Use explicit height for TopBar

Relying on WRAP_CONTENT caused rare bugs where the TopBar would appear stretched due to flex issues
when a react component was displayed in the title.
Another reason for this change is that we don’t need to wait for the TopBar to measure itself when its height needs to be taken
into account, for example when animating it or when positioning views below it.

lib/android/app/src/main/java/com/reactnativenavigation/anim/TopBarAnimator.java

@@ -12,7 +12,7 @@ import android.view.animation.DecelerateInterpolator;
 import android.view.animation.LinearInterpolator;
 
 import com.reactnativenavigation.parse.AnimationOptions;
-import com.reactnativenavigation.utils.UiUtils;
+import com.reactnativenavigation.utils.ViewUtils;
 import com.reactnativenavigation.views.topbar.TopBar;
 
 import javax.annotation.Nullable;
@@ -43,14 +43,12 @@ public class TopBarAnimator {
 
     public void show(AnimationOptions options) {
         topBar.setVisibility(View.VISIBLE);
-        UiUtils.runOnMeasured(topBar, () -> {
-            if (options.hasValue() && (!options.id.hasValue() || options.id.get().equals(stackId))) {
-                showAnimator = options.getAnimation(topBar);
-            } else {
-                showAnimator = getDefaultShowAnimator(-1 * topBar.getHeight(), DECELERATE, DURATION);
-            }
-            show();
-        });
+        if (options.hasValue() && (!options.id.hasValue() || options.id.get().equals(stackId))) {
+            showAnimator = options.getAnimation(topBar);
+        } else {
+            showAnimator = getDefaultShowAnimator(-1 * ViewUtils.getHeight(topBar), DECELERATE, DURATION);
+        }
+        show();
     }
 
     public void show(float startTranslation) {

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

@@ -162,13 +162,13 @@ public class StackOptionsPresenter {
     }
 
     private void applyTopBarOptions(TopBarOptions options, AnimationsOptions animationOptions, Component component, Options componentOptions) {
-        topBar.setHeight(options.height.get(LayoutParams.WRAP_CONTENT));
+        topBar.setHeight(options.height.get(UiUtils.getTopBarHeightDp(activity)));
         topBar.setElevation(options.elevation.get(DEFAULT_ELEVATION));
         if (topBar.getLayoutParams() instanceof MarginLayoutParams) {
             ((MarginLayoutParams) topBar.getLayoutParams()).topMargin = UiUtils.dpToPx(activity, options.topMargin.get(0));
         }
 
-        topBar.setTitleHeight(options.title.height.get(LayoutParams.WRAP_CONTENT));
+        topBar.setTitleHeight(options.title.height.get(UiUtils.getTopBarHeightDp(activity)));
         topBar.setTitle(options.title.text.get(""));
 
         if (options.title.component.hasValue()) {

lib/android/app/src/main/java/com/reactnativenavigation/react/NavigationModule.java

@@ -55,7 +55,7 @@ public class NavigationModule extends ReactContextBaseJavaModule {
         constants.putString(Constants.BACK_BUTTON_JS_KEY,    Constants.BACK_BUTTON_ID);
         constants.putDouble(Constants.TOP_BAR_HEIGHT_KEY,    Constants.BOTTOM_TABS_HEIGHT);
         constants.putDouble(Constants.STATUS_BAR_HEIGHT_KEY, UiUtils.pxToDp(ctx, UiUtils.getStatusBarHeight(ctx)));
-        constants.putDouble(Constants.TOP_BAR_HEIGHT_KEY,    UiUtils.pxToDp(ctx, UiUtils.getToolBarHeight(ctx)));
+        constants.putDouble(Constants.TOP_BAR_HEIGHT_KEY,    UiUtils.pxToDp(ctx, UiUtils.getTopBarHeight(ctx)));
         promise.resolve(constants);
     }
 

lib/android/app/src/main/java/com/reactnativenavigation/utils/UiUtils.java

@@ -7,6 +7,7 @@ import android.os.Handler;
 import android.os.Looper;
 import android.support.annotation.NonNull;
 import android.util.DisplayMetrics;
+import android.util.TypedValue;
 import android.view.View;
 import android.view.ViewTreeObserver;
 import android.view.WindowManager;
@@ -17,7 +18,7 @@ public class UiUtils {
     private static final int DEFAULT_TOOLBAR_HEIGHT = 56;
 
     private static int statusBarHeight = -1;
-    private static int toolBarHeight = -1;
+    private static int topBarHeight = -1;
 
     public static void runOnPreDrawOnce(final View view, final Runnable task) {
         view.getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
@@ -80,30 +81,35 @@ public class UiUtils {
         return statusBarHeight;
     }
 
-    public static int getToolBarHeight(Context context) {
-        if (toolBarHeight > 0) {
-            return toolBarHeight;
+    public static int getTopBarHeightDp(Context context) {
+        return (int) UiUtils.pxToDp(context, getTopBarHeight(context));
+    }
+
+    public static int getTopBarHeight(Context context) {
+        if (topBarHeight > 0) {
+            return topBarHeight;
         }
         final Resources resources = context.getResources();
         final int resourceId = resources.getIdentifier("action_bar_size", "dimen", "android");
-        toolBarHeight = resourceId > 0 ?
+        topBarHeight = resourceId > 0 ?
                 resources.getDimensionPixelSize(resourceId) :
                 dpToPx(context, DEFAULT_TOOLBAR_HEIGHT);
-        return toolBarHeight;
+        return topBarHeight;
     }
 
     public static float dpToPx(Context context, float dp) {
-        float scale = context.getResources().getDisplayMetrics().density;
-        return dp * scale + 0.5f;
+        return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_PX, dp,
+                context.getResources().getDisplayMetrics());
     }
 
     public static int dpToPx(Context context, int dp) {
-        float scale = context.getResources().getDisplayMetrics().density;
-        return (int) (dp * scale + 0.5f);
+        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_PX, dp,
+                context.getResources().getDisplayMetrics());
     }
 
     public static float pxToDp(Context context, float px) {
-        return px / ((float) context.getResources().getDisplayMetrics().densityDpi / DisplayMetrics.DENSITY_DEFAULT);
+        return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, px,
+                context.getResources().getDisplayMetrics());
     }
 
     public static float dpToSp(Context context, float dp) {

lib/android/app/src/main/java/com/reactnativenavigation/utils/ViewUtils.java

@@ -85,7 +85,7 @@ public class ViewUtils {
         return false;
     }
 
-    public static int getPreferredHeight(View view) {
+    public static int getHeight(View view) {
         if (view.getLayoutParams() == null) return 0;
         return view.getLayoutParams().height < 0 ? view.getHeight() : view.getLayoutParams().height;
     }

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

@@ -9,7 +9,6 @@ import android.widget.RelativeLayout;
 
 import com.reactnativenavigation.interfaces.ScrollEventListener;
 import com.reactnativenavigation.parse.Options;
-import com.reactnativenavigation.utils.UiUtils;
 import com.reactnativenavigation.utils.ViewUtils;
 import com.reactnativenavigation.viewcontrollers.IReactView;
 import com.reactnativenavigation.viewcontrollers.TitleBarButtonController;
@@ -92,12 +91,7 @@ public class ComponentLayout extends FrameLayout implements ReactComponent, Titl
     public void drawBelowTopBar(TopBar topBar) {
         if (getLayoutParams() instanceof RelativeLayout.LayoutParams) {
             RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) getLayoutParams();
-            int topBarHeight = ViewUtils.getPreferredHeight(topBar);
-            if (topBarHeight == 0) {
-                UiUtils.runOnMeasured(topBar, () -> layoutParams.topMargin = topBar.getHeight());
-            } else {
-                layoutParams.topMargin = topBarHeight;
-            }
+            layoutParams.topMargin = ViewUtils.getHeight(topBar);
             setLayoutParams(layoutParams);
         }
     }

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

@@ -4,10 +4,13 @@ import android.annotation.SuppressLint;
 import android.content.Context;
 import android.widget.RelativeLayout;
 
+import com.reactnativenavigation.utils.UiUtils;
 import com.reactnativenavigation.viewcontrollers.topbar.TopBarBackgroundViewController;
 import com.reactnativenavigation.viewcontrollers.topbar.TopBarController;
 import com.reactnativenavigation.views.topbar.TopBar;
 
+import static android.view.ViewGroup.LayoutParams.MATCH_PARENT;
+
 @SuppressLint("ViewConstructor")
 public class StackLayout extends RelativeLayout implements Component {
     private String stackId;
@@ -20,7 +23,10 @@ public class StackLayout extends RelativeLayout implements Component {
     }
 
     private void createLayout(TopBarBackgroundViewController topBarBackgroundViewController, TopBarController topBarController) {
-        addView(topBarController.createView(getContext(), topBarBackgroundViewController, this));
+        addView(topBarController.createView(getContext(), topBarBackgroundViewController, this),
+                MATCH_PARENT,
+                UiUtils.getTopBarHeight(getContext())
+        );
     }
 
     public String getStackId() {

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

@@ -178,9 +178,10 @@ public class TitleBar extends Toolbar {
     }
 
     public void setHeight(int height) {
-        if (height == getLayoutParams().height) return;
+        int pixelHeight = UiUtils.dpToPx(getContext(), height);
+        if (pixelHeight == getLayoutParams().height) return;
         ViewGroup.LayoutParams lp = getLayoutParams();
-        lp.height = (int) UiUtils.dpToPx(getContext(), height);
+        lp.height = pixelHeight;
         setLayoutParams(lp);
     }
 }

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

@@ -71,7 +71,7 @@ public class TopBar extends AppBarLayout implements ScrollEventListener.ScrollAw
 
         root = new FrameLayout(getContext());
         root.setId(CompatUtils.generateViewId());
-        content.addView(titleBar, MATCH_PARENT, WRAP_CONTENT);
+        content.addView(titleBar, MATCH_PARENT, UiUtils.getTopBarHeight(getContext()));
         content.addView(topTabs);
         root.addView(content);
         root.addView(border);
@@ -111,9 +111,10 @@ public class TopBar extends AppBarLayout implements ScrollEventListener.ScrollAw
     }
 
     public void setHeight(int height) {
-        if (height == getLayoutParams().height) return;
+        int pixelHeight = UiUtils.dpToPx(getContext(), height);
+        if (pixelHeight == getLayoutParams().height) return;
         ViewGroup.LayoutParams lp = getLayoutParams();
-        lp.height = (int) UiUtils.dpToPx(getContext(), height);
+        lp.height = pixelHeight;
         setLayoutParams(lp);
     }
 

lib/android/app/src/test/java/com/reactnativenavigation/TestUtils.java

@@ -10,6 +10,7 @@ import com.reactnativenavigation.parse.Options;
 import com.reactnativenavigation.parse.params.Bool;
 import com.reactnativenavigation.presentation.StackOptionsPresenter;
 import com.reactnativenavigation.utils.ImageLoader;
+import com.reactnativenavigation.utils.UiUtils;
 import com.reactnativenavigation.viewcontrollers.ChildControllersRegistry;
 import com.reactnativenavigation.viewcontrollers.ViewController;
 import com.reactnativenavigation.viewcontrollers.stack.StackControllerBuilder;
@@ -29,7 +30,7 @@ public class TestUtils {
                     @Override
                     protected TopBar createTopBar(Context context, TopBarBackgroundViewController topBarBackgroundViewController, StackLayout stackLayout) {
                         TopBar topBar = super.createTopBar(context, topBarBackgroundViewController, stackLayout);
-                        topBar.layout(0, 0, 1000, 100);
+                        topBar.layout(0, 0, 1000, UiUtils.getTopBarHeight(context));
                         return topBar;
                     }
                 })

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

@@ -77,8 +77,8 @@ public class SimpleViewController extends ChildController<SimpleViewController.S
         public void drawBelowTopBar(TopBar topBar) {
             if (getLayoutParams() instanceof RelativeLayout.LayoutParams) {
                 RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) getLayoutParams();
-                if (layoutParams.topMargin == ViewUtils.getPreferredHeight(topBar)) return;
-                layoutParams.topMargin = ViewUtils.getPreferredHeight(topBar);
+                if (layoutParams.topMargin == ViewUtils.getHeight(topBar)) return;
+                layoutParams.topMargin = ViewUtils.getHeight(topBar);
 //                setLayoutParams(layoutParams);
             }
         }

lib/android/app/src/test/java/com/reactnativenavigation/viewcontrollers/navigator/NavigatorTest.java

@@ -35,6 +35,7 @@ import com.reactnativenavigation.viewcontrollers.stack.StackController;
 import org.junit.Test;
 import org.mockito.Mockito;
 import org.robolectric.android.controller.ActivityController;
+import org.robolectric.annotation.Config;
 
 import java.util.Arrays;
 import java.util.List;
@@ -46,6 +47,7 @@ import static org.mockito.Mockito.times;
 import static org.mockito.Mockito.verify;
 import static org.mockito.Mockito.when;
 
+@Config(qualifiers = "xxhdpi")
 public class NavigatorTest extends BaseTest {
     private TestActivity activity;
     private ChildControllersRegistry childRegistry;

lib/android/app/src/test/java/com/reactnativenavigation/viewcontrollers/stack/StackControllerTest.java

@@ -21,6 +21,7 @@ import com.reactnativenavigation.presentation.StackOptionsPresenter;
 import com.reactnativenavigation.utils.CommandListenerAdapter;
 import com.reactnativenavigation.utils.ImageLoader;
 import com.reactnativenavigation.utils.TitleBarHelper;
+import com.reactnativenavigation.utils.UiUtils;
 import com.reactnativenavigation.utils.ViewHelper;
 import com.reactnativenavigation.utils.ViewUtils;
 import com.reactnativenavigation.viewcontrollers.ChildControllersRegistry;
@@ -880,7 +881,7 @@ public class StackControllerTest extends BaseTest {
             @Override
             protected TopBar createTopBar(Context context, TopBarBackgroundViewController topBarBackgroundViewController, StackLayout stackLayout) {
                 TopBar spy = spy(super.createTopBar(context, topBarBackgroundViewController, stackLayout));
-                spy.layout(0, 0, 1000, 100);
+                spy.layout(0, 0, 1000, UiUtils.getTopBarHeight(activity));
                 return spy;
             }
         });