I have a screen in my React Native application in which I have few text fields.
I was wondering if there is any way in which on screen load my keyword opens automatically and focuses on my first text input field?
I was searching for something like stateAlwaysVisible in android.
The keyboard should open automatically when <TextInput /> is focused. You can use the autoFocus prop to make it focus when the element mounts (link)
autoFocus does not seem to fire when the page loads through stack navigation. It ends up focusing the textInput but does not open the keyboard.
This trick worked for me
setTimeout(() => InputRef.current.focus(), 100)
My way (there was a problem with focusing and showing a keyboard on component render)
import { InteractionManager, TextInput } from 'react-native';
...
inputRef = React.createRef();
componentDidMount() {
this.focusInputWithKeyboard()
}
focusInputWithKeyboard() {
InteractionManager.runAfterInteractions(() => {
this.inputRef.current.focus()
});
}
render() {
<TextInput ref={this.inputRef} />
}
another solution :)
import React, { useRef } from 'react'
export function mycomponent(props) {
const inputRef = useRef();
return(
<TextInput
ref={inputRef}
onLayout={()=> inputRef.current.focus()}>
</TextInput>
)
}
onLayout doesn't invoked when navigating back to that screen!None of the solutions above worked for me when using a Modal. However, a combination of them did work.
Using the Modal's onShow and a setTimeout did the job for me.
<Modal
onShow={() => {
setTimeout(() => {
inputRef?.current?.focus()
}, 50)
}}
>
{/* ... */}
<TextInput
ref={inputRef}
/>
</Modal>
It worked for me.
<TextInput
autoFocus={false}
autoCapitalize="none"
onChangeText={(val) => {
props.onChange(val);
}}
value={null}
defaultValue={props.defaultValue}
ref={(ref) => {
if( ref !== undefined && ref && !ref.isFocused() ){
ref.focus();
}
}}
{...propsMerge}
/>
This seems to be working in my simulator. Have not confirmed on a real device.
constructor(props) {
super(props);
this.buildNameTextInput = React.createRef();
}
<TouchableOpacity
style={styles.mainButton}
onPress={() => {
this.buildNameTextInput = true
this.props.setSaveBuildModal(true)
}}
>
<Text style={styles.mainButtonText}> Save Build </Text>
</TouchableOpacity>
<TextInput
autoFocus={!!this.buildNameTextInput}
ref={this.buildNameTextInput}
placeholder="Type a Name"
autoCapitalize="words"
style={{...styles.heroBtnText, marginVertical: 50}}
onChangeText={buildName => this.props.setCurrentBuildName(buildName)}
value={this.props.buildName}
/>
You can maintain a ref to the TextInput as textInputRef and use this.textInputRef.focus()
This is how it looks in code, using the setTimeout() Hook
import { StyleSheet, Text, View, TextInput } from "react-native";
import React from "react";
const HomeScreen = () => {
const inputRef = React.useRef();
setTimeout(() => inputRef.current.focus(), 100);
return (
<View style={{ paddingVertical: 20 }}>
<Text>circle</Text>
<TextInput ref={inputRef} />
</View>
);
};
export default HomeScreen;
const styles = StyleSheet.create({});
setTimeOut with useEffect or it will be it will be created in every render!
setTimeout is not a hook, it's nothing but a JS function. 2) You need to wrap with useEffect hook, as said before. 3) It's a good practice to cancel it when component unmounts (returning a cleanup function in the end of useEffect), like following: useEffect(()=> { const timeout = setTimeout(() => inputRef.current.focus(), 100); return ()=> { clearTimeout(timeout) } }, [])just use autoFocus prop of TextInput. It worked even in a modal :
<TextInput
placeholder={placeholder || "Enter text"}
value={text}
onChangeText={setText}
editable={!readOnly}
autoFocus={true}
/>
The selected solution did not work for me due to stack navigation (see comment of "SoundStage" on selected solution)
I added a new variable openTheKeyboard to the state initially set to false.
My hacky solution:
componentDidMount() {
this.setState({ openTheKeyboard: true });
}
componentDidUpdate() {
if (this.state.openTheKeyboard) {
this.textInput.focus();
this.setState({ openTheKeyboard: false });
}
}
