[Android]Hardware back button doesn't work and keyboard doesn't show on Expo

[sngmr]

Thank you for your grate library!! I'm facing the problem on Android. It would be grateful for your assistance.

Symptoms

After adding react-native-volume-manager, the hardware back button doesn't work and keyboard doesn't show up when focusing on a TextInput on Android in the Expo environment. iOS is working fine.

Environment

package.json

"expo": "~48.0.15",
"expo-status-bar": "~1.4.4",
"react": "18.2.0",
"react-native": "0.71.7",
"react-native-volume-manager": "^1.5.0"

Node version

• v16.16.0

Tested Android version

• Android 11 (I tested two different devices. Symptoms is same)

How to reproduce

Procedure

# Create Expo project
yarn create expo-app AndroidTest1
cd AndroidTest1

# Add react-native-volume-manager
yarn add react-native-volume-manager

# Change code as below

# Build on EAS Expo (needs setup for Expo)
eas build --profile preview --platform android

Modified code

Modify App.js to add TextInput.

import { StatusBar } from 'expo-status-bar';
import { useState } from 'react';
import { StyleSheet, Text, View, TextInput } from 'react-native';

export default function App() {
  const [sampleText, setSampleText] = useState("This is sample text");
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <TextInput editable={true} value={sampleText} onChangeText={setSampleText} />
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Install and test

• Download build APK by Expo EAS and install Android real device.
• After launching App, hardware back button doesn't work.
• When move focus to the TextInput, keyboard will NOT show up.

[hirbod]

So it is breaking for you even without importing?

[sngmr]

So it is breaking for you even without importing?

Thank you for quick reply. Answer is YES. That reproduce step is very minimum case. My real code is import and using this library, symptom is same. iOS is working fine, I can get the change volume event and can set volume.

[hirbod]

Thanks. After looking through the code (without verifying yet), I think I know whats happening. I tried to make this library compatible with RN Modals, therefore I had to set up an transparent modal to catch key events. Looks like the focus on the invisible dialog is catching the back button and traps the input.

I'll try to verify this and provide a quick fix for it.

[hirbod]

Turns out thats really not easy to fix. I might to revert my code (which would make it work but without Modal support)

[hunterfoulk]

Getting the non responding TextInput bug on 1.5.0 on our end too on Android, seems to work building IOS 16.4 simulators and devices for me.

Seems to focus the input but the input value doesnt change and the keyboard doesnt open

[hirbod]

The issue was fixed in version 1.5.1. Thank you for reporting it. However, this fix release has one downside. If you have globally called: (on Android)

    VolumeManager.showNativeVolumeUI({ enabled: false }); // or true

you will need to re-trigger this again onBlur or when the keyboard closes (which is the easiest solution). Currently, there is some sort of focus issue that I couldn't solve, but I believe it's a feasible workaround for now until I find a more robust solution.

This only affects you if you try to hide the native volume UI when the volume up/down button was pressed. It does not interfere with setVolume or any other event. So once you lose focus to the current view due to a Modal or a Keyboard, you need to re-trigger the function to suppress the toast on hardware key presses.

[sngmr]

Thank you for your quick fix. It works! You save my day!!

[hirbod]

You are welcome! Arigatō for being my first sponsor ever :)

Appreciated!

[isaacwashere]

I was literally just experiencing this, and was like 10min away from making an issue hahaaa! Glad it was able to get fixed! This is a big fix! Thanks @hirbod!! 🙌 🦾