Android TV: touchables do not change appearance when focused inside a modal

“react-native”: “npm:react-native-tvos@0.63.1-1” Code Example using React Native modal code from docs:

<View style={{marginTop: 22}}>
        <Modal
          animationType="slide"
          transparent={false}
          visible={this.state.modalVisible}
          onRequestClose={() => {
            Alert.alert('Modal has been closed.');
          }}>
          <View style={{marginTop: 22}}>
            <View>
              <Text>Hello World!</Text>

              <TouchableHighlight
                onPress={() => {
                  this.setModalVisible(!this.state.modalVisible);
                }}>
                <Text>Hide Modal</Text>
              </TouchableHighlight>
            </View>
          </View>
        </Modal>

        <TouchableHighlight
          onPress={() => {
            this.setModalVisible(true);
          }}>
          <Text>Show Modal</Text>
        </TouchableHighlight>
      </View>

[douglowder]

I’m actively working on this. The issue is that on Android, modal views are separate and not part of the ReactRootView hierarchy

[douglowder]

Thanks for the submission @Sarvarr … I did reproduce this on Android TV emulator.

The specific issue is that buttons don’t change their appearance when focused inside a modal. The buttons still work though – you can use the arrow keys to select button 1 or button 2 in the example below, and pressing return will fire the button.

I’ll take a look to see what the issue is.

import React, {useState} from 'react';
import ReactNative, {
  Alert,
  Modal,
  SafeAreaView,
  StyleSheet,
  ScrollView,
  TouchableHighlight,
  TVMenuControl,
  Platform,
  View,
  Text,
  TouchableOpacity,
} from 'react-native';

import {Header, Colors} from 'react-native/Libraries/NewAppScreen';

const StatusBar = Platform.isTV ? View : ReactNative.StatusBar;

const App: () => React$Node = () => {
  const [modalVisible, setModalVisible] = useState(false);

  const showModal = () => {
    setModalVisible(true);
    TVMenuControl.enableTVMenuKey();
  };

  const hideModal = (arg: number): void => {
    Alert.alert(
      'Alert ' + arg,
      'Modal has been closed.',
      [
        {
          text: 'OK',
          onPress: () => {
            setModalVisible(false);
            TVMenuControl.disableTVMenuKey();
          },
        },
      ],
      {cancelable: false},
    );
  };

  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <ScrollView
          contentInsetAdjustmentBehavior="automatic"
          style={styles.scrollView}>
          <Header />
          {global.HermesInternal == null ? null : (
            <View style={styles.engine}>
              <Text style={styles.footer}>Engine: Hermes</Text>
            </View>
          )}
          <View style={styles.body}>
            <Modal
              animationType="slide"
              transparent={false}
              visible={modalVisible}
              onRequestClose={() => hideModal(0)}>
              <View style={styles.sectionContainer}>
                <View>
                  <Text>Hello World!</Text>

                  <TouchableOpacity
                    style={styles.sectionContainer}
                    onPress={() => hideModal(1)}>
                    <Text style={styles.sectionTitle}>Hide Modal 1</Text>
                  </TouchableOpacity>
                  <TouchableOpacity
                    style={styles.sectionContainer}
                    onPress={() => hideModal(2)}>
                    <Text style={styles.sectionTitle}>Hide Modal 2</Text>
                  </TouchableOpacity>
                </View>
              </View>
            </Modal>

            <TouchableHighlight
              style={styles.sectionContainer}
              onPress={showModal}>
              <Text style={styles.sectionTitle}>Show Modal 1</Text>
            </TouchableHighlight>
            <TouchableHighlight
              style={styles.sectionContainer}
              onPress={showModal}>
              <Text style={styles.sectionTitle}>Show Modal 2</Text>
            </TouchableHighlight>
          </View>
        </ScrollView>
      </SafeAreaView>
    </>
  );
};

const styles = StyleSheet.create({
  scrollView: {
    backgroundColor: Colors.lighter,
  },
  engine: {
    position: 'absolute',
    right: 0,
  },
  body: {
    backgroundColor: Colors.white,
  },
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
    color: Colors.dark,
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
    color: Colors.dark,
  },
  highlight: {
    fontWeight: '700',
  },
  footer: {
    color: Colors.dark,
    fontSize: 12,
    fontWeight: '600',
    padding: 4,
    paddingRight: 12,
    textAlign: 'right',
  },
});

export default App;