I have a problem with autoFocus for textInput in React Native. I have two screen when i touch to button in screen A it navigate to screen B and i have a textInput in screen B. I want auto focus to this textInput when i navigate to screen B
This is my code but it's not working, i see the keyboard for a second and it disappear.
<TextInput
placeholder="Search"
style={styles.searchBar}
autoFocus={true}
value={text}
onChangeText={changeText}
/>
I think is not working autoFocus with navigation stack and after i tried with ref but i couldn't be succesfull again.
const inputRef = useRef(null);
const onFocusHandler = () => {
inputRef.current.focus();
}
useEffect(() => {
onFocusHandler();
}, []);
TextInput with ref
<TextInput
placeholder="Search"
style={styles.searchBar}
ref={inputRef}
value={text}
onChangeText={changeText}
/>
Related
I have a <TextInput />. I am trying to simulate key press event on "submit" button where I added it below the TextInput. Here code:
<TextInput
style={styles.textInput}
onSubmitEditing={event => onSubmitEditButton(event.nativeEvent.text)}
/>
<TouchableHighlight onPress={"HERE I AM TRYING TO SIMULATE ENTER-KEY PRESS IN ORDER TO TRIGGER OnSubmitEditing EVENT"} style={{position:"absolute", top:50}}>
<Text>Submit</Text>
</TouchableHighlight
If you simply want onSubmitEditing to do the same thing on a button press, then just call onSubmitEditing in onPress of your button. But this would require storing the text within an input externally:
const [text, setText] = useState('')
const onSubmit = ()=>{
// do stuff with text in textinput
console.log(text)
Keyboard.dismiss()
}
return (
<TextInput
style={styles.textInput}
onChangeText={setText}
onSubmitEditing={onSubmit}
/>
<TouchableHighlight
onPress={onSubmit}
style={{position:"absolute", top:50}}
>
<Text>Submit</Text>
</TouchableHighlight>
)
How do I open a stateless component with the TextInput already in foucs?
Thank you all!
Hi Túlio here is the code and you can also check the live working example I've added in this link --> Snack Example
export default function App() {
const focusRef = React.useRef()
React.useEffect(() => {
if (focusRef.current) focusRef.current.focus()
},[focusRef])
return (
<View style={styles.container}>
<TextInput
placeholder="FirstTextInput"
returnKeyType="next"
ref={focusRef}
blurOnSubmit={false}
style={{padding:10}}
/>
</View>
);
}
If you only want the TextInput field focused on component mount, then you can use the autoFocus prop of a TextInput component
e.g.
<TextInput
autoFocus={true}
/>
I am developing an app on react native. I want to call a date picker when i press on a Text-Input and after selecting a date it should show on the Text-Input
Wrap TextInput into a view and set pointerEvents as none.
Now you can use Pressable component from react-native to listen to the onpress event.
<Pressable onPress={() => alert('Hi!')}>
<View pointerEvents="none">
<TextInput />
</View>
</Pressable>
You cannot explicitly call onPress for TextInput. You could only use. onFocus which will be called when you press the input box to get cursor over there. No need to focus on onBlur as your use case doesn't required.. Handle close within onFocus if possible.
onFocus = () => {
// do something
}
render() {
<TextInput onFocus={onFocus} />
}
What you have to do is use onFocus and onBlur of TextInput.
<TextInput
onFocus={this.onFocus}
onBlur={this.onBlur}
/>
onFocus = () => {
// Open date picker
}
onBlur = () => {
// Close date picker and add value to textinput
}
You can make text input field read only by providing
editable={false}
pointerEvents="none"
prop to TextInput.
Wrap TextInput inside View and set pointerEvents="none", wrap that view with TouchableOpacity or any other Touchable Component. Please see below example!
<TouchableOpacity
onPress={() => {
alert('hello');
}}>
<View pointerEvents="none">
<TextInput
onChange={() => {}}
value={''}
placeholder={waterMark}
editable={!isDisabled}
selectTextOnFocus={!isDisabled}
/>
</View>
</TouchableOpacity>
SideMenu is my custom drawer component and it has X button in it.
When I press the X button, I want the drawer to be closed.
How can I do this?
You can use this.props.navigation.closeDrawer() or this.props.navigation.toggleDrawer() for this.
<Button onPress={()=>this.props.navigation.closeDrawer()} />
or
<Button onPress={()=>this.props.navigation.toggleDrawer()} />
Read this doc
You want to use toggleDrawer(). Very basic example:
render() {
const { navigator } = this.props
return (
<Button
onPress={() => navigator.toggleDrawer({ side: 'right', animated: true })} />
)
}
Nothing in the docs about this. I want to disable the small popup below when clicking on a TextInput in React Native.
Any ideas ?
<TextInput
contextMenuHidden={true}
value={this.state.text}
onChangeText={(text) => this.setState({ text})}
/>
for stop copy paste the following code is
<TextInput contextMenuHidden={true}/>
for ios
<TextInput contextMenuHidden={true}
for Android
<View removeClippedSubviews={true}>
<TextInput contextMenuHidden={true} />
</View>
Surender Kumar's answer:
React Native 55.4: contextMenuHidden does not hide menu on Android - Disable Options on React-Native Text Input
Below solution works for me. I am clearing keyboard on onTouchEnd event
const [text1, setText1] = useState('')
const clearClipboard = () =>{
Clipboard.setString('')
}
const onChangeText = (text) =>{
//For android 12+ clipboard autofill option, dont allow text change more than one char..which means user is typing.
if(text1.length+1 >= text.length){
setText1(text)
}
}
<TextInput onChangeText={onChangeText} value={text1} contextMenuHidden={true} onTouchEnd={clearClipboard}></TextInput>