Fix custom back button missing id

Id property wasn’t handled when copying back button in native

e2e/ScreenStack.test.js

@@ -110,4 +110,11 @@ describe('screen stack', () => {
     await elementById(testIDs.PUSH_BOTTOM_TABS_BUTTON).tap();
     await expect(elementById(testIDs.BOTTOM_TABS_ELEMENT)).toBeVisible();
   });
+
+  test(':android: custom back button', async () => {
+    await elementById(testIDs.PUSH_BUTTON).tap();
+    await elementById(testIDs.PUSH_CUSTOM_BACK_BUTTON).tap();
+    await elementById(testIDs.CUSTOM_BACK_BUTTON).tap();
+    await expect(elementByLabel('back button clicked')).toBeVisible();
+  });
 });

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

@@ -40,6 +40,7 @@ public class BackButton extends Button {
     }
 
     public void mergeWith(BackButton other) {
+        if (!Constants.BACK_BUTTON_ID.equals(other.id)) id = other.id;
         if (other.icon.hasValue()) icon = other.icon;
         if (other.visible.hasValue()) visible = other.visible;
         if (other.color.hasValue()) color = other.color;
@@ -50,6 +51,7 @@ public class BackButton extends Button {
     }
 
     void mergeWithDefault(final BackButton defaultOptions) {
+        if (Constants.BACK_BUTTON_ID.equals(id)) id = defaultOptions.id;
         if (!icon.hasValue()) icon = defaultOptions.icon;
         if (!visible.hasValue()) visible = defaultOptions.visible;
         if (!color.hasValue()) color = defaultOptions.color;

playground/src/screens/PushedScreen.js

@@ -31,6 +31,7 @@ class PushedScreen extends Component {
 
   constructor(props) {
     super(props);
+    Navigation.events().bindComponent(this);
     if (this.props.simulateLongRunningTask) {
       this.simulateLongRunningTask();
     }
@@ -49,6 +50,12 @@ class PushedScreen extends Component {
     for (let i = 0; i < Math.pow(2, 25); i++);
   }
 
+  navigationButtonPressed({buttonId}) {
+    if (buttonId === 'backPress') {
+      alert('back button clicked')
+    }
+  }
+
   listeners = [];
 
   componentDidMount() {
@@ -89,6 +96,7 @@ class PushedScreen extends Component {
         <Button title='Pop To Root' testID={testIDs.POP_TO_ROOT} onPress={this.onClickPopToRoot} />
         <Button title='Set Stack Root' testID={testIDs.SET_STACK_ROOT_BUTTON} onPress={this.onClickSetStackRoot} />
         <Button title='Push and Wait for Render' testID={testIDs.PUSH_BUTTON_WAIT_FOR_RENDER} onPress={this.onClickPushWaitForRender} />
+        <Button title='Push custom back button' testID={testIDs.PUSH_CUSTOM_BACK_BUTTON} onPress={this.onClickPushCustomBackButton} />
         {stackPosition > 2 && <Button title='Pop To Stack Position 1' testID={testIDs.POP_STACK_POSITION_ONE_BUTTON} onPress={this.onClickPopToFirstPosition} />}
         <Text style={styles.footer}>{`this.props.componentId = ${this.props.componentId}`}</Text>
       </View>
@@ -242,6 +250,29 @@ class PushedScreen extends Component {
     });
   }
 
+  onClickPushCustomBackButton = async () => {
+    Navigation.push(this.props.componentId, {
+      component: {
+        name: 'navigation.playground.PushedScreen',
+        passProps: {
+          stackPosition: this.getStackPosition() + 1,
+          previousScreenIds: _.concat([], this.props.previousScreenIds || [], this.props.componentId),
+        },
+        options: {
+          topBar: {
+            backButton: {
+              id: 'backPress',
+              icon: require('../../img/navicon_add.png'),
+              visible: true,
+              color: 'black',
+              testID: testIDs.CUSTOM_BACK_BUTTON
+            }
+          }
+        }
+      }
+    });
+  }
+
   async onClickPushBottomTabs() {
     await Navigation.push(this.props.componentId, {
       bottomTabs: {

playground/src/testIDs.js

@@ -16,6 +16,7 @@ module.exports = {
   PUSH_DEFAULT_OPTIONS_BUTTON: `PUSH_DEFAULT_OPTIONS_BUTTON`,
   SHOW_TOPBAR_REACT_VIEW: `SHOW_TOPBAR_REACT_VIEW`,
   BACK_HANDLER_BUTTON: `BACK_HANDLER_BUTTON`,
+  CUSTOM_BACK_BUTTON: `CUSTOM_BACK_BUTTON`,
   SHOW_MODAL_BUTTON: `SHOW_MODAL_BUTTON`,
   SHOW_REDBOX_BUTTON: `SHOW_REDBOX_BUTTON`,
   ORIENTATION_BUTTON: `ORIENTATION_BUTTON`,
@@ -49,6 +50,7 @@ module.exports = {
   SET_TAB_BADGE_BUTTON_NULL: `SET_TAB_BADGE_BUTTON_NULL`,
   PUSH_TO_TEST_DID_DISAPPEAR_BUTTON: `PUSH_TO_TEST_DID_DISAPPEAR_BUTTON`,
   PUSH_BUTTON_WAIT_FOR_RENDER: `PUSH_AND_WAIT_FOR_RENDER`,
+  PUSH_CUSTOM_BACK_BUTTON: `PUSH_CUSTOM_BACK_BUTTON`,
   SHOW_LEFT_SIDE_MENU_BUTTON: `SHOW_LEFT_SIDE_MENU_BUTTON`,
   SHOW_RIGHT_SIDE_MENU_BUTTON: `SHOW_RIGHT_SIDE_MENU_BUTTON`,
   HIDE_LEFT_SIDE_MENU_BUTTON: `HIDE_LEFT_SIDE_MENU_BUTTON`,