I open a Modal where there is a TextInput on top. My TextInput component has the autoFocus set to true. I can say my TextInput is focused about 6 times on 10 (open/close Modal). When it's not focused and if I try to tap (even several times) on TextInput, it doesn't want to focus.
I made another test, I set the autoFocus to false. When I open my Modal then I immediately tap the TextInput to get the focus, sometimes I have to tap twice before I get the focus on. So, it's like something didn't finish its loading before I could tap and get the focus. If I do the same test but I wait maybe 2 seconds before I do a first tap, I always get the focus.
So did you know if there is a conflict between Modal / TextInput / Keyboard?
Here is my code, in case:
return (
<View style={styles.container}>
<TouchableOpacity
style={styles.addressButton}
onPress={() => {
this.props.feedList([]);
this.props.onPressBackButton();
}}
>
<Linearicon name="arrow-left" size={30} color="white" />
</TouchableOpacity>
<View
style={styles.searchBox}
>
<Linearicon style={styles.searchIcon} name="magnifier" size={16} color="#999999" />
<TextInput
style={[styles.searchBoxText, styles.searchBoxTextInput]}
placeholder="Recherchez une adresse..."
autoFocus={false}
placeholderTextColor='#999999'
autoCorrect={false}
onChangeText={(text) => this.onChangeText(text)}
value={this.state.address}
/>
</View>
</View>
)
I also ran into a similar kind of problem. My TextInput has autoFocus in a modal. The TextInput focus worked, but the keyboard sometimes opened and sometimes it did not open. It appears to be a race condition, where autoFocus assigns focus before the modal is visible. The solution was to use onShow attribute in Modal.
<Modal onShow={() => {this.textInput.focus();}} >
<TextInput ref={input => {this.textInput = input;}} />
</Modal>
setting the height for TextInput works.
example
<TextInput style={{textAlign:'center', fontSize:18, height:50,paddingBottom:35}} autoFocus={false} placeholder="Enter Name" placeholderTextColor="grey"/>
I also had the same issue like sometimes it was not get focus while reopen the modal. I agree with the #Saravanan's comment with just one addition by calling blur method before focus to textinput. That worked for me.
<Modal onShow={() => {
this.textInput.blur();
this.textInput.focus();
}}>
<TextInput ref={input => {this.textInput = input;}} />
</Modal>
I had the same issue, autoFocus prop seems kinda buggy when TextInput is inside modal, try this:
export default function Component() {
const inputRef = React.useRef(null);
return (
<Modal isVisible={true} onShow={() => inputRef.current.focus()} >
<TextInput ref={inputRef} />
</Modal>
}
I have the same issue. Whenever TextInput is in a Modal the autofocus is super buggy. Probably a bug. Using RN 0.27.2.
Related
The question is simple, <TextInput /> inside <Animated.View /> is being trigered on every onChangeText event. I want it to exit the animation only if Submit button is pressed. Code is below:
const InputBox = () => { return(
<Animated.View style={styles.inputContainer}
entering={SlideInRight}
exiting={
SlideOutRight
}
>
<TextInput
style={styles.textInput}
onChangeText = {(text) => setTypedText(text)}
/>
<Pressable
onPress={onSubmit}>
<Text>Submit</Text>
</Pressable>
</Animated.View>
)
Any ideas?
Edit: I realized that, when I directly use this <Animated.View/> inside render seems not any problem, but when I create the component dynamically with const InputBox=()=>{} the problem occurs. So the question is why? And how can I use this component which is created by using const InputBox=()=>....
I have created on custom dropdown list View that I am showing on click of TextInput. Users can search as well as select items from that list. Now I want to close that window on click outside of that TextInput How to set visibility false on touch outside of TextInput.
{modalVisible ?
(
<View style={styles.emailItem}>
<ShowCustomDropdown globalsearchdata={globalsearchdata} />
</View>
) : null}
<View style={styles.textinputstyle}>
<TextInput
onTouchStart={()=> setModalVisible(true)}
onChangeText={handleChange}
style={styles.searchInput}
placeholder="Type a message"
value={search_term}
/>
</View>
You don't need onTouchStart prop, you can use below props in TextInput, like:
<TextInput
onFocus={() => setModalVisible(true) } //focus received
onBlur={() => setModalVisible(false) } //focus lost
onChangeText={handleChange}
style={styles.searchInput}
placeholder="Type a message"
value={search_term}
/>
onFocus prop will let you know if TextInput is focussed and onBlur prop will let you know when you click outside TextInput or it isn't focussed.
Hope this works for you.
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>
I created a screen keyboard component that I want to disable the platform's keyboard, how I can disable it?
<TextInput
secureTextEntry
ref="Pin"
selectionColor="#656565"
keyboardType="numeric"
activeColor="#656565"
inactiveColor="#fff"
autoFocus={false}
ignoreCase
codeLength={4}
inputPosition="center"
size={50}
onFulfill={isValid => this}
codeInputStyle={{ borderWidth: 1.5 }}
/>
Just write showSoftInputOnFocus={false} in <TextInput> like this:
<TextInput showSoftInputOnFocus={false} />
I had issues also. No other solutions was working for me. This will display text input field and it will be clickable but not editable.
<TouchableOpacity onPress={this.openPinKeyboard}>
<View pointerEvents="none">
<Input editable={false} value="1234" />
</View>
</TouchableOpacity>
I think you need to add something like:
<TextInput showSoftInputOnFocus={false} keyboardType="numeric" />
setting keyboardType to null worked for me
EDIT:
this only worked in the simulator, running it on an actual device the native keyboard still appeared.
wrapping the <TextInput /> in a <TouchableWithoutFeedback> element in the example below worked.
<TouchableWithoutFeedback onPress={Keyboard.dismiss} >
<TextInput />
</TouchableWithoutFeedback>
You may try to set keyboardType to none, if it doesn't work another alternative is to set the editable prop to false.
Potential answers can be found here : https://github.com/facebook/react-native/issues/14045
<TextInput showSoftInputOnFocus={false}/>
This work for me, sometime I need onFocus action to navigate new screen, and don't need keyboard open animation. Prop Editable will disable textfield, can not pressable
try this solution i hope this will work for android and ios both...
// Step 1: Get Keyboard, TouchableWithoutFeedback from ‘react-native’;
import { View, TextInput, StyleSheet, Keyboard, TouchableWithoutFeedback } from 'react-native';
// Step 2: Create an arrow function to write dismiss keyboard code
const DismissKeyboard = ({ children }) => (
<TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
{children}
</TouchableWithoutFeedback>
);
// Step 3: Wrap all TextInput inside <DismissKeyboard> </DismissKeyboard>
//Example
<DismissKeyboard>
<View style={styles.container}>
<TextInput style={styles.input} placeholder="email" />
<TextInput style={styles.input} placeholder="password" />
</View>
</DismissKeyboard>
The easiest solution is to use the onFocus prop on TextInput.
Import Keyboard from ‘react-native’
import {Keyboard, TextInput} from
'react-native'
Then pass Keyboard.dismiss() to TextInput onFocus prop, to stop the keyboard from popping up when focused.
<TextInput onFocus = {()=> Keyboard.dismiss()} .../>
Now test the input field by pressing it to see if the keyboard will pop up
just put this under text input tag this worked for me in react-native
<TextInput
//this line
editable={false}
/>
you can do it by pointerEvents="none"
<View pointerEvents="none">
<TextInput
focusable={false}
style={{color: '#00000000'}}
onChangeText={setEmail}
/>
</View>
I am using react native to implement a community feed. In each post in the feed, I can comment as seen below.
However, the issue is after I enter a comment and want to press on the submit icon on the right, the keyboard will dismiss first before I can tap on the icon to submit the text.
QUESTION:
How can I immediately submit my text after pressing the submit icon without tapping twice (once to dismiss the keyboard, and second to submit)
Here's a snippet of my implementation:
//Code for comments section/box
<View style={styles.commentSectionContainer}>
<View style={[textInputStyle.dark, textInputStyle.compact]}>
<LocalizedTextInput
multiline={false}
autoCorrect={true}
onChangeText={onCommentTextChange}
placeholder="placeholder/writeComment"
style={[textInputStyle.default, {fontSize: 13}]}
underlineColorAndroid="transparent"
value={textComment}
onSubmitEditing={() => {
if (textComment) {
onSubmitComment();
}
}}
returnKeyType="send"
/>
<View style={styles.iconSubmitContainer}>
<IconButton style={styles.commentSubmit} iconName="send" isDisabled={textComment === ''} onPress={onSubmitComment} hitSlop={hitSlop} />
</View>
</View>
</View>
Localized Text Input is using the following textinput
<View style={{flex: 1}}>
<TextInput
multiline={multiline}
style={[defaultStyle, {flex: 1}]}
underlineColorAndroid="transparent"
autoCorrect={true}
{...otherProps}
/>
</View>
The posts are all wrapped in a scrollView.
I tried to use "keyboardShouldPersistTaps" and keyboardDismissMode="Drag-on" but it doesn't produce the expected experience.. The user should be able to dismiss the keyboard by tapping anywhere outside the textinput box instead of requiring to scroll.
If your parent is a ScrollView component, then passing the prop keyboardShouldPersistTaps="always" should do the trick. See the official documentation here.
As Ankit suggested the prop needs to be passed to the scroll view but if that isn't giving you the desired results TextInput has a blur() method that you can call using a ref of that TextInput. Maybe that would help.