text input focus programatically not working

Current behaviour

I am trying to auto focus, when i click on edit. initially it will be disabled.

Expected behaviour

It should auto focus when i click on edit button. but it is not focusing.

Code sample

const bioRef = useRef(null);


<View style={styles.action}>
	<View style={styles.bioContainer}>
		<Text style={styles.field_title}>Write your bio...</Text>
		{disabled ? (
			<TouchableOpacity
				style={styles.editText}
				onPress={async() => {
					setPlaceholder("");
					await setDisabled(false);
					bioRef.current.focus();
				}}>
				<Text style={styles.editTextLbl}>Edit</Text>
			</TouchableOpacity>
		) : (
			<TouchableOpacity
				style={styles.editText}
				onPress={() => {
					setDisabled(true);
				}}>
				<Text style={styles.editTextLbl}>Save</Text>
			</TouchableOpacity>
		)}
	</View>
</View>
<View style={styles.action}>
	<TextInput
		ref = {bioRef}
		style={styles.textInput}
		multiline={true}
		disabled={disabled}
		numberOfLines={4}
		theme={input_theme}
		placeholderTextColor="#767676"
		keyboardType="default"
		autoCapitalize="none"
		placeholder={placeholder}
		value={bio}
		onChangeText={(text) => setBio(text)}
	/>
</View>

Screenshots (if applicable)

Your Environment

software	version
android	11
react-native	0.64.2
react-native-paper	4.9.2
node	v15.12.0
npm	7.20.0
expo sdk
react-native-vector-icons	7.1.0

[Elabar]

This is because setState is an async operation. Which mean when the line bioRef.current.focus(); is run, the field is probably still in disabled state.

To fix this issue, you can use useEffect to watch your disabled state to focus the field like so.

const [disabled, setDisabled] = useState(false)

useEffect(() => {
   if(!disabled){
      bioRef.current?.focus();
   }
}, [disabled])

You can then remove bioRef.current.focus(); in your onPress handler.

Using useEffect can fix this issue is because the callback in useEffect will run AFTER the state is changed on UI.

[github-actions[bot]]

Hello 👋, this issue has been open for more than a month without a repro or any activity. If the issue is still present in the latest version, please provide a repro or leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution or workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix it.