Resize title component when button is added to TopBar (#6472)

When title component with `alignment: fill` is displayed and a button is added with mergeOptions, the title component wasn't measured appropriately which caused the title to overlap the button thus making the button unclickable.
wix · Aug 17, 2020 · a66e8e9 · a66e8e9
1 parent d5f815b
commit a66e8e9
Show file tree

Hide file tree

Showing 6 changed files with 80 additions and 12 deletions.
diff --git a/e2e/Buttons.test.js b/e2e/Buttons.test.js
@@ -1,11 +1,11 @@
 import Utils from './Utils';
 import TestIDs from '../playground/src/testIDs';
 
-const {elementById, elementByLabel} = Utils;
+const { elementById, elementByLabel } = Utils;
 
 describe('Buttons', () => {
   beforeEach(async () => {
-    await device.launchApp({newInstance: true});
+    await device.launchApp({ newInstance: true });
     await elementById(TestIDs.OPTIONS_TAB).tap();
     await elementById(TestIDs.GOTO_BUTTONS_SCREEN).tap();
   });
@@ -51,4 +51,9 @@ describe('Buttons', () => {
     await elementById(TestIDs.BACK_BUTTON).tap();
     await expect(elementByLabel('Buttons')).toBeVisible();
   });
+
+  it('resizes title component when a button is added with mergeOptions', async () => {
+    await elementById(TestIDs.ADD_BUTTON).tap();
+    await elementById(TestIDs.BUTTON_THREE).tap();
+  });
 });
diff --git a/...rc/main/java/com/reactnativenavigation/views/stack/topbar/titlebar/TitleBarReactView.java b/...rc/main/java/com/reactnativenavigation/views/stack/topbar/titlebar/TitleBarReactView.java
@@ -2,10 +2,13 @@
 
 import android.annotation.SuppressLint;
 import android.content.Context;
+import android.view.Gravity;
 
 import com.facebook.react.ReactInstanceManager;
 import com.reactnativenavigation.react.ReactView;
 
+import androidx.appcompat.widget.Toolbar;
+
 @SuppressLint("ViewConstructor")
 public class TitleBarReactView extends ReactView {
 
@@ -16,8 +19,18 @@ public TitleBarReactView(Context context, ReactInstanceManager reactInstanceMana
     @Override
     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
         super.onMeasure(
-                (getChildCount() > 0 && getChildAt(0).getWidth() > 0) ? MeasureSpec.makeMeasureSpec(getChildAt(0).getWidth(), MeasureSpec.EXACTLY) : widthMeasureSpec,
+                getWidthMeasureSpec(widthMeasureSpec),
                 heightMeasureSpec
         );
     }
+
+    private int getWidthMeasureSpec(int currentSpec) {
+        return (isCenter() && getChildCount() > 0 && getChildAt(0).getWidth() > 0) ?
+                MeasureSpec.makeMeasureSpec(getChildAt(0).getWidth(), MeasureSpec.EXACTLY) :
+                currentSpec;
+    }
+
+    private boolean isCenter() {
+        return ((Toolbar.LayoutParams) getLayoutParams()).gravity == Gravity.CENTER;
+    }
 }
diff --git a/playground/src/screens/ButtonsScreen.tsx b/playground/src/screens/ButtonsScreen.tsx
@@ -12,6 +12,8 @@ const {
   TOP_BAR,
   ROUND_BUTTON,
   BUTTON_ONE,
+  BUTTON_THREE,
+  ADD_BUTTON,
   LEFT_BUTTON,
   SHOW_LIFECYCLE_BTN,
   RESET_BUTTONS,
@@ -29,7 +31,14 @@ export default class ButtonOptions extends NavigationComponent {
       topBar: {
         testID: TOP_BAR,
         title: {
-          text: 'Buttons',
+          component: {
+            name: Screens.ReactTitleView,
+            alignment: 'fill',
+            passProps: {
+              text: 'Buttons',
+              clickable: false,
+            },
+          },
         },
         rightButtons: [
           {
@@ -78,10 +87,42 @@ export default class ButtonOptions extends NavigationComponent {
           testID={CHANGE_BUTTON_PROPS}
           onPress={this.changeButtonProps}
         />
+        <Button testID={ADD_BUTTON} label="Add button" onPress={this.addButton} />
       </Root>
     );
   }
 
+  addButton = () =>
+    Navigation.mergeOptions(this, {
+      topBar: {
+        rightButtons: [
+          {
+            id: 'ONE',
+            testID: BUTTON_ONE,
+            text: 'One',
+            color: Colors.primary,
+          },
+          {
+            id: 'ROUND',
+            testID: ROUND_BUTTON,
+            component: {
+              id: 'ROUND_COMPONENT',
+              name: Screens.RoundButton,
+              passProps: {
+                title: 'Two',
+              },
+            },
+          },
+          {
+            id: 'Three',
+            text: 'Three',
+            testID: BUTTON_THREE,
+            color: Colors.primary,
+          },
+        ],
+      },
+    });
+
   push = () => Navigation.push(this, Screens.Pushed);
 
   showLifecycleButton = () =>

diff --git a/playground/src/screens/CustomTopBar.tsx b/playground/src/screens/CustomTopBar.tsx
@@ -5,13 +5,17 @@ import { NavigationComponentProps } from 'react-native-navigation';
 interface Props extends NavigationComponentProps {
   title: string;
   text: string;
+  clickable: boolean;
 }
 
 export default class CustomTopBar extends React.Component<Props> {
   render() {
     return (
-      <View style={styles.container}>
-        <TouchableOpacity onPress={() => Alert.alert(this.props.title, 'Thanks for that :)')}>
+      <View collapsable={false} style={styles.container}>
+        <TouchableOpacity
+          disabled={!this.props.clickable}
+          onPress={() => Alert.alert(this.props.title, 'Thanks for that :)')}
+        >
           <Text style={styles.text}>{this.props.text}</Text>
         </TouchableOpacity>
       </View>
@@ -29,5 +33,6 @@ const styles = StyleSheet.create({
   text: {
     alignSelf: 'center',
     color: 'black',
+    fontSize: 16,
   },
 });
diff --git a/playground/src/screens/PushedScreen.tsx b/playground/src/screens/PushedScreen.tsx
@@ -4,6 +4,7 @@ import {
   NavigationComponent,
   NavigationComponentProps,
   NavigationButtonPressedEvent,
+  Options,
 } from 'react-native-navigation';
 import concat from 'lodash/concat';
 import Navigation from '../services/Navigation';
@@ -34,18 +35,20 @@ interface Props extends NavigationComponentProps {
 }
 
 export default class PushedScreen extends NavigationComponent<Props> {
-  static options() {
+  static options(): Options {
     return {
       topBar: {
         testID: PUSHED_SCREEN_HEADER,
         title: {
           text: 'Pushed Screen',
         },
-        rightButtons: {
-          id: 'singleBtn',
-          text: 'single',
-          testID: TOP_BAR_BTN,
-        },
+        rightButtons: [
+          {
+            id: 'singleBtn',
+            text: 'single',
+            testID: TOP_BAR_BTN,
+          },
+        ],
         backButton: {
           testID: BACK_BUTTON,
         },

diff --git a/playground/src/testIDs.ts b/playground/src/testIDs.ts
@@ -56,6 +56,7 @@ const testIDs = {
   ROUND_BUTTON: 'ROUND_BUTTON',
   ROUND_BUTTON_2: 'ROUND_BUTTON_2',
   BUTTON_ONE: 'BUTTON_ONE',
+  BUTTON_THREE: 'BUTTON_THREE',
   LEFT_BUTTON: 'LEFT_BUTTON',
   HIDE_TOPBAR_DEFAULT_OPTIONS: 'HIDE_TOPBAR_DEFAULT_OPTIONS',
   SET_TOPBAR_REACT_VIEW: 'SET_TOPBAR_REACT_VIEW',