I have a form with multiline TeaxtInput field.
<TextInput
multiline={true}
editable={false}
numberOfLines={5}
/>
When the form is approved, all fields are not editable. But the problem is unable to scroll multiline TextInput field since it is not editable. User faces difficulties to read the complete text in the TextInput.
Hence, Is there any way to scroll multiline TextInput when editable={false}?
Maybe issue is in your other design code because TextInput is scrollable when editable = {false}, I've tried this and its working.
Related
React Native's TextInput has a clearButtonMode property which would display a small x button on the right of the input area in iOS through which text can be cleared.
I am having issues with the hit slop of that button. I believe it is too small and easy to miss. I have to press multiple times in order to hit the right spot in order to activate it.
Is there a way to customize this clear button => change its hitSlop, color, etc?
What you could do, is to wrap your TextInput element with view and Animated.View, so you can add your own Clear Button with TouchableOpacity for example, and select an icon, colors, size, etc.
So, basically, it would be something like this:
<Animated.View style={...}>
<TextInput value={...} style={...} onChangeText={...} />
<TouchableOpacity>
{/* HERE GOES YOUR CLEAR BUTTON, FOR EXAMPLE: */}
<MaterialIcons size={24} color={'black'} name={'close'} />
</TouchableOpacity>
</Animated.View>
I have a ScrollView which has TouchableOpacity and TextInput inside.
When I press on them, nothing happens.
I found the solution for TouchableOpacity and it was to add rejectResponderTermination={true} and it worked.
For example:
<TouchableOpacity
onPress={cameraHandler}
rejectResponderTermination={true}
>
However this does not work for TextInput.
<TextInput
onChangeText={updateText}
value={value.text}
rejectResponderTermination={true}
/>
I would like to use the functionality of rejectResponderTermination in TextInput. Any suggestions would be much appreciated.
rejectResponderTermination is not a prop of TextInput. Try removing it.
<TextInput
onChangeText={updateText}
value={value.text}
/>
A list of props can be found in the official documentation.
If you still want the functionality of rejectResponderTermination, currently you would have to build your own.
This SlideTextInput is an example of how you would do it.
My form has a View with multiple <TextInput> elements. When user clicks on submit button all fields should become non-editable which is possible with,
<View pointerEvents='none'>
</View>
But It can only prevent the user not to edit the field, But doesn't give the appearance of field as it is disabled.
Hence, Is there any way to give the disable look to all <TextInput> elements at once?
I can't think of any prop on the View which will help you to give a "disabled" UI. pointerEvents allows you to prevent editing of each component. Infact, TextInput has an editable prop but no disabled prop. Which suggests that there is no in-built visual cue to indicate that the component cannot be edited. The only clue that you have by default is that there is no keyboard appearing when you focus on the item. In short, there is nothing available out-of-the-box to give a disabled visual cue to each of your components.
For the appearance of <TextInput> as disabled you need specify the backgroundColor of the <TextInput> according to the condition when you make the <TextInput> non-editable.
state = {
text:"",
isEditable:true
}
<TextInput
editable={this.state.isEditable}
style={{height: 40, backgroundColor:(this.state.isEditable)?'white':'#EDEEEF'}}
onChangeText={(text) => this.setState({text})}
value={this.state.text}
/>
And on submit button press you can set the isEditable to false once all your validation is successful:
onSubmit(){
//Your logic goes here after successful validation set isEditable to false
this.setState({isEditable:false});
}
I'm working on a project which has some text fields(textInput). I'm encountering an issue with the textInput fields here. While I type in the textInput field the text is having an underline which is getting even more darker when I hit space and I want to remove that underline from it.
Here is a screenshot:
This is my code:
<TextInput
style={Style.InputStyle}
multiline={true}
placeholderTextColor={'#DC1938'}
placeholder={'Name'}
spellCheck={false}
underlineColorAndroid='rgba(255,0,0,0.3)'
inlineImageLeft='userred'
inlineImagePadding={25}
padding={15}
/>
Try Following props.
spellCheck={false}
autoCorrect={false}
Please refer the following link :
disable spellcheck in react-native TextInput
Hello guys i have found the answer it was the autoCorrect prop. i disabled it and yeah it worked!
Use underlineColorAndroid props
<TextInput underlineColorAndroid='transparent'
placeholder="type here ..">
This is some text you want to render
</TextInput>
An explanation why this happens can be found here.
I'm trying to use a barcode reader in my app so I can fill a TextInput within using software keyboard.
The idea is to use something like this:
<TextInput
autoFocus={true}
onFocus={Keyboard.dismiss}
multiline={false}
onSubmitEditing={() => this.submitFunction()}
/>
It partialy works as I want, I can read the code and It's shown properly but onSubmitEditing is not called.
Does anyone knows how to hide keyboard on a TextView but mantain the focus so onSubmitEditing is called?
If keyboard isn't dismissed onSubmitEditing run as spected.