Cannot focus on TextInput React Native - Amazon Fire Stick

user_7426461 0
Viewed 641

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/

react-native reactjs android javascript
3 Answers

do you want to focus it when your component renders at first??

you can try the autoFocus property of TextInput for that, otherwise,

const ref = useRef(null);
<TextInput ref={ref}/>

You can then focus the InputText by ref.current.focus()

user_71529650

Touchables components can be focused with TV remote, so encapsulating your TextInput in a touchable is a good way, plus you can change the style for a good looking focus effect (onPress or onFocus event)

constructor(props) {
        super(props)

        this.state = {
            focused: false
        }
    
        this.inputRef = React.createRef()
    }
    
    onFocus(){
        this.setState({focused: true}, () => {
            this.inputRef.current.focus()
        })
    }

    onBlur(){
        this.setState({focused: false}, () => {
            this.inputRef.current.blur()
        })
    }

    render() {
        return (
            <View>
                <TouchableHighlight
                    onPress={this.onFocus}
                    onBlur={this.onBlur}
                    style={[styles.wrapper, this.state.focused ? styles.wrapperFocused : null]}>
                        <TextInput ref={this.inputRef} />
                </TouchableHighlight>
                
            </View>
        )
    }
user_102584450

Known issues:

  • TextInput components do not work for now (i.e. they cannot receive focus automatically, see this comment).

  • It is however possible to use a ref to manually trigger inputRef.current.focus().

  • You can wrap your input inside a TouchableWithoutFeedback component and trigger focus in the onFocus event of that touchable. This enables opening the keyboard via the arrow keys.

  • The keyboard might reset its state after each keypress (this might only happen inside the Android TV emulator).

  • The content of Modal components cannot receive focus, see this issue for details.

Content Copy from React Native

user_116476200
Related