Cannot focus on TextInput React Native – Amazon Fire Stick

  android, javascript, react-native, reactjs

I am working on a ReactNative app and I have the following code that renders a TextInput and a button which submits a request to my API. With my Android TV emulator, I can type input into the text field by first selecting the text input with my mouse and then typing on my keyboard. I can click the "connect" button too and all works as expected. When I installed this app on an Amazon Fire Stick, the TextInput was no longer selectable. I could select the "connect" button and could see the ui reflect button clicks on the button, but the TextInput would not focus or launch the on screen keyboard. I was able to get the keyboard to gain focus by setting autoFocus={true} on the <TextInput /> but this results in a less than optimal user experience. How can I fix this? Here is my code:

<>
      <Text styles={styles.text}>Enter your device code.</Text>
                
      <TextInput keyboardType={'number-pad'} style={styles.input} onChange={this.handleChange} value={this.state.code} />
                
      <Button
        styles={styles.button}
        onPress={(e) => {this.getToken(e)}}
        title="Connect"
        color="green"
        accessibilityLabel="Connect your device"
      />
</>

I felt like this article was addressing the same issue as mine but I don’t understand what the solution would be for ReactNative (not TypeScript): https://callstack.com/blog/amazon-fire-tv-stick-app-in-react-native/

Source: ReactJs

LEAVE A COMMENT