Skip to content

[Android TV] How can I set focus on the first TouchableHighlight component inside the modal when the modal is opened? #21958

Closed
@marabej

Description

@marabej

Hello

How can I set focus to the first (or any given) TouchableHighlight component inside the modal when it's opened?
I'm using D-pad/kayboard/TV Remote
Let's use the fragment of the react-natvie modal example:

 <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>
              <TouchableHighlight>
                <Text>Button 1</Text>
              </TouchableHighlight>
              <TouchableHighlight>
                <Text>Button 2</Text>
              </TouchableHighlight>
              <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>

Navigation with D-pad works, but when the modal is opened, the first TouchableHighlight (button 1) is not focused, focus remains on the "Show Modal" button
Or, How can I set focus on the "Button 2" TouchableHighlight programatically?

TextInput for example has autoFocus, but TouchableHighlight no, if we are using only Touchable components inside a modal, I don;t know how to autofocus them, or set implicitely it

best regards

Metadata

Metadata

Assignees

No one assigned

    Labels

    Platform: AndroidAndroid applications.Ran CommandsOne of our bots successfully processed a command.Resolution: LockedThis issue was locked by the bot.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions