Hardware back button handling breaks when a component with a text input loses the focus

[mbillard]

• Review the documentation: https://facebook.github.io/react-native
• Search for existing issues: https://github.com/facebook/react-native/issues
• Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

Environment:
  OS: macOS High Sierra 10.13.6
  Node: 10.7.0
  Yarn: 1.9.2
  npm: 6.2.0
  Watchman: Not Found
  Xcode: Xcode 10.0 Build version 10A255
  Android Studio: Not Found

Packages: (wanted => installed)
  react: 16.3.1 => 16.3.1
  react-native: https://github.com/expo/react-native/archive/sdk-29.0.0.tar.gz => 0.55.4

Description

If a component with a text input that had the focus gets blurred, the hardware back button handler no longer gets called when pressing the hardware back button.

With the sample code below:

✅ If I press the back button before the input gets focused, the back button gets handled.
✅ If I give focus to the input and press the back button, it gets handled.
❌ If I give focus to the input, blur it with the button (or any other way), the back button does not get handled
✅ If instead of an input and a button I have two inputs, switching focus between each does not break the back button handling.

Reproducible Demo

This is the smallest component I could setup with which I managed to reproduce the issue. I also tested with a regular Component with the same result.

import React, { PureComponent, Fragment } from 'react';
import { BackHandler, Button, TextInput } from 'react-native';

export default class SearchInput extends PureComponent {
  constructor(props) {
    super(props);

    this.inputRef = React.createRef();
  }

  componentDidMount() {
    BackHandler.addEventListener('hardwareBackPress', this.onBackPress);
  }

  componentWillUnmount() {
    BackHandler.removeEventListener('hardwareBackPress', this.onBackPress);
  }

  onBackPress = () => alert('onBackPress') || true;

  render() {
    return (
      <Fragment>
        <TextInput ref={this.inputRef} />
        <Button title='blur' onPress={() => this.inputRef.current.blur()} />
      </Fragment>
    );
  }
}

[react-native-bot]

I am closing this issue because it does not appear to have been verified on the latest release, and there has been no followup in a while.

If you found this thread after encountering the same issue in the latest release, please feel free to create a new issue with up-to-date information by clicking here.

[pk-developer]

import React, { Component } from 'react';
import { withNavigation } from 'react-navigation';
import { BackHandler } from 'react-native';

class HandleBack extends Component {

constructor(props) {
super(props);
this.didFocus = props.navigation.addListener('didFocus', payload =>
BackHandler.addEventListener('hardwareBackPress', this.onBack)
);
}

componentDidMount() {
this.willBlur = this.props.navigation.addListener('willBlur', payload =>
BackHandler.removeEventListener('hardwareBackPress', this.onBack)
);
}

onBack = () => {
return this.props.onBack();
};

componentWillUnmount() {
this.didFocus.remove();
this.willBlur.remove();
BackHandler.removeEventListener('hardwareBackPress', this.onBack);
}

render() {
return this.props.children;
}
}

export default withNavigation(HandleBack);

// how to use the in component
import HandleBack from '@app/backhandler';

handleBackButton = () => {
// put your business login here
return true;
}
render() {
return (

)}

[Mittal-Kachchhi]

i m able to reproduce this issue

[Mittal-Kachchhi]

@mbillard did you get any solutions??

[mbillard]

No, I haven't tried to reproduce the issue recently either.