by topherPedersen

How to autoFocus a TextInput field within a Modal in React-Native

This blog post is brought to you by the developer of BitBudget. BitBudget is an automated budgeting app for Android and iOS which syncs with your bank account and helps you avoid overspending. If you’d like to quit living paycheck-to-paycheck and get a better handle on your finances, download it today! https://bitbudget.io

Using the autoFocus prop with TextInputs in React-Native is normally straightforward. However, I’ve noticed that attempting to autoFocus TextInput fields contained within the simple <Modal/> component that comes with React-Native, or the 3rd party react-native-modal doesn’t seem to work. I think the problem likely has to do with how the <Modal/> component is designed. You typically embed the <Modal/> on a screen and just toggle the value of a prop whenever you want to show or hide it. And for whatever reason, this doesn’t seem to play well with autoFocus.

But fret not! Over on Stack Overflow I discovered an excellent work-around from Saleel. Saleel suggests that instead of using autoFocus, give your TextInput a ref, and then use that ref from within the Modal’s onShow method to call the TextInput’s .focus() method:

<Modal
visible={true}
onShow={ () => { this.textInput.focus(); }}>
{/* Adapted From: https://stackoverflow.com/questions/42730400/focus-input-on-load-of-modal-in-react-native */}
<KeyboardAvoidingView style={{}}>
<TextInput
style={{}}
ref={ (input) => { this.textInput = input; }}
placeholder=" Enter Text Here"
onChangeText={ (text) => console.log(text) }
value={ null } />
<Button
title="Submit"
onPress={ () => console.log("do stuff...") } />
</KeyboardAvoidingView>
</Modal>
view raw autoFocusTextInputModal.jsx hosted with ❤ by GitHub
 

topherPedersen