Keyboard input issues on Android with React Native

Question

Keyboard input issues on Android with React Native

I am building an application using React Native, and we make sure that it is very accessible. When we tried to test it using the keyboard to navigate Android, we were unable to activate any buttons. We tried to play it using the simplest application, and the problem was still there. We were able to reproduce the problem with React Native 0.41.0- versions 0.44.0. We tried every combination of props for our elements TouchableOpacity, and also tried to use elements Buttonand did not succeed.

With a TalkBack-enabled Android phone and a connected Bluetooth keyboard, follow these steps:

react-native init myProject
cd myProject
Edit index.android.jsto add a tag <TouchableOpacity>using a handler that you can test, for example, make a warning window
react-native run-android
Scroll to the tangible element and press Alt+ Enter(or Alt+ Shift+ Enterif using an old enough Android flavor).

Please note that your handler does not start when using the keyboard, but you can still activate an item by double-clicking on the screen.

Here is mine index.android.js, for example:

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableOpacity
} from 'react-native';

export default class myProject extends Component {
  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity onPress={() => alert('test')}>
          <Text style={styles.welcome}>
            Click me!
          </Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('myProject', () => myProject);