re-aligning the back button on android and iOS when using icon background logic (#8236)

* re-aligning the back button on android and iOS when using icon background logic

* snapshot test updated

* snapshot update for android

* update logic android

* test update

* reverting changes to iOS because they weren't really needed and there is too much chance for a messup

Author: markdevocht

android/src/main/java/com/reactnativenavigation/views/stack/topbar/titlebar/IconBackgroundDrawable.kt

@@ -8,12 +8,12 @@ import com.reactnativenavigation.options.params.DensityPixel
 
 
 class IconBackgroundDrawable(
-        private val wrapped: Drawable,
-        private val cornerRadius: DensityPixel,
-        private val backgroundWidth: Int,
-        private val backgroundHeight: Int,
-        private val iconColor: Int?,
-        val backgroundColor: Int?
+    private val wrapped: Drawable,
+    private val cornerRadius: DensityPixel,
+    private val backgroundWidth: Int,
+    private val backgroundHeight: Int,
+    private val iconColor: Int?,
+    val backgroundColor: Int?
 ) : Drawable() {
     private val path: Path = Path()
     private val bitmapPaint = Paint().apply {
@@ -56,28 +56,31 @@ class IconBackgroundDrawable(
         canvas.drawBitmap(wrapped.toBitmap(), null, bitmapRect, bitmapPaint)
     }
 
+    override fun getIntrinsicWidth(): Int = backgroundWidth
+    override fun getIntrinsicHeight(): Int = backgroundHeight
+
     override fun setBounds(l: Int, t: Int, r: Int, b: Int) {
-        updatePath(RectF(l.toFloat(), t.toFloat(), backgroundWidth.toFloat(), backgroundHeight.toFloat()))
-        super.setBounds(l, t, backgroundWidth, backgroundHeight)
+        updatePath(RectF(0f, 0f, backgroundWidth.toFloat(), backgroundHeight.toFloat()))
+        super.setBounds(l, t, l + backgroundWidth, t + backgroundHeight)
     }
 
     override fun setBounds(r: Rect) {
-        r.right = backgroundWidth
-        r.bottom = backgroundHeight
-        updatePath(RectF(r))
+        r.right = r.left + backgroundWidth
+        r.bottom = r.top + backgroundHeight
+        updatePath(RectF(0f, 0f, backgroundWidth.toFloat(), backgroundHeight.toFloat()))
         super.setBounds(r)
     }
 
     override fun onBoundsChange(bounds: Rect) {
         if (bounds != null) {
             backgroundRect = Rect((bounds.width() - backgroundWidth) / 2,
-                    (bounds.height() - backgroundHeight) / 2,
-                    bounds.width() - (bounds.width() - backgroundWidth) / 2,
-                    bounds.height() - (bounds.height() - backgroundHeight) / 2)
+                (bounds.height() - backgroundHeight) / 2,
+                bounds.width() - (bounds.width() - backgroundWidth) / 2,
+                bounds.height() - (bounds.height() - backgroundHeight) / 2)
             bitmapRect = Rect((bounds.width() - bitmapWidth) / 2,
-                    (bounds.height() - bitmapHeight) / 2,
-                    bounds.width() - (bounds.width() - bitmapWidth) / 2,
-                    bounds.height() - (bounds.height() - bitmapHeight) / 2)
+                (bounds.height() - bitmapHeight) / 2,
+                bounds.width() - (bounds.width() - bitmapWidth) / 2,
+                bounds.height() - (bounds.height() - bitmapHeight) / 2)
         }
         super.onBoundsChange(bounds)
     }

playground/e2e/BackButton.test.js

@@ -65,7 +65,7 @@ describe('Back Button', () => {
     await expect(elementByLabel('navigationButtonPressed | RNN.hardwareBackButton')).toBeVisible();
   });
 
-  it.e2e('should render back button with iconBackground', async () => {
+  it.e2e(':ios: should render back button with iconBackground', async () => {
     await elementById(TestIDs.PUSH_BACK_BUTTON_ICON_BACKGROUND).tap();
     // eslint-disable-next-line no-undef
     const snapshottedImagePath = `./e2e/assets/back_button_icon_background.${device.getPlatform()}.png`;