diff --git a/e2e/Buttons.test.js b/e2e/Buttons.test.js
index 73d7f13c145..1004835aab3 100644
--- 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/lib/android/app/src/main/java/com/reactnativenavigation/views/stack/topbar/titlebar/TitleBarReactView.java b/lib/android/app/src/main/java/com/reactnativenavigation/views/stack/topbar/titlebar/TitleBarReactView.java
index fffede524d2..cd801ffc61a 100644
--- a/lib/android/app/src/main/java/com/reactnativenavigation/views/stack/topbar/titlebar/TitleBarReactView.java
+++ b/lib/android/app/src/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
index 268ed8e3dbf..ea2a357806e 100644
--- 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}
/>
+
);
}
+ 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
index f44adc1bcc4..af042838f0f 100644
--- 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 {
render() {
return (
-
- Alert.alert(this.props.title, 'Thanks for that :)')}>
+
+ Alert.alert(this.props.title, 'Thanks for that :)')}
+ >
{this.props.text}
@@ -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
index 6603fb51106..6f3281998d5 100644
--- 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 {
- 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
index a391af1f284..7fa03db8a5d 100644
--- 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',