CODEWITHSUNDEEP
react-nativewix-react-native-navigation
Jim
Jim

Reputation: 2322

How to program React-native-navigation nav bar back button (not hardware button)?

Im using Wix's react-native-navigation library. I'm trying to disconnect a socket connection when the Navigation bar back button is pressed or a swipe is used to move back to the previous screen. Not the hardware back button press on android.

I've followed Wix docs for handling button presses for top bar buttons, located here: https://wix.github.io/react-native-navigation/#/docs/topBar-buttons?id=handling-button-press-events

export default class Lobby extends React.Component {
  static options(passProps) {
    return {
      topBar: {
        leftButtons: {
          id: "backButton"
        }
      }
    };
  }

  constructor(props) {
    super(props);
    this.state = {
      username: "",
      queue: []
    };
    Navigation.events().bindComponent(this);
  }
// as a parameter ive tried: {backButton}, "backButton", {buttonId}, and backButton
  navigationButtonPressed(backButton) {
    const socket = io("http://172.31.99.250:3000");
    socket.emit("leaveLobby", this.state.username);
  }

...
}

Upvotes: 1

Views: 794

Answers (1)

deevee
deevee

Reputation: 1885

Firstly please make sure your clicking on button really works. Make same corrections to you code:

  1. Add some icon image to your new button so that you really have something to click (insert some icon.png image in the same folder as your script is):

    topBar: {
  leftButtons: {
    id: "backButton",
    icon: require('icon.png') // <-- icon.png image
  }
}

  2. Then to your button action add simple alerting for instance:

    navigationButtonPressed({ buttonId }) {
  //const socket = io("http://172.31.99.250:3000");
  //socket.emit("leaveLobby", this.state.username);

  alert("Button tapped: " + buttonId) // <- In the alert box on your app you will see your button id, here "backButton"
}

  3. If you see alert on your app but socket not disconnecting - you should do some more debugging on your socket.io implementation. Here for example I think you are creating new socket instead of disconnecting the one that already exists. I think you should import const socket from the other script where you are creating it.

Upvotes: 0

Related Questions