I want to remove the underline of a TextInput of my react-native application. I tried with borderBottomWidth but it did not work. How can I achieve this on Android and IOS.
Its really simple
In iOS we dont have underline.
and for android just add this prop
<TextInput underlineColorAndroid={'rgba(0,0,0,0)'}> </TextInput>
<TextInput underlineColorAndroid='transparent'>
by this you can remove it.
You should set borderWidth: 0
Example:
<TextInput
style={{borderWidth: 0}}
/>
The solution I found in code inspection is on the TextInput, you could use the :
inputContainerStyle={{borderBottomWidth:0}}
Related
I want to add something like a Hint, on the textInput, as in java using android studio, in react native is it possible to do this? I know you have the option to add a Value, defaultValue and the placeholder, but they don't work like hint.
Tanks!
You can use placeholder props
<TextInput
placeholder="Input email"
/>
Yes it is possible, it's called placeholder, Here is an example from docs.:
<TextInput
style={{height: 40}}
placeholder="Type here to translate!"
onChangeText={(text) => this.setState({text})}
value={this.state.text}
/>
The only thing you need to do is to add a the placeholder prop.
<TextInput
...//otherprops
placeholder="enter your hint here"
/>
I highly suggest you to read more about TextInput in React Native docs here
I have a TextInput whith multiline={true}. I want to know how to get its placeholder text like:
Hey There!
Want any Help?
Placeholder To The Rescue!
I tried some like placeholder='Hey There!\nWant any Help?' but didn't get what i wanted.
I'm sort of new to React Native. Helps would be greatly appreciated!
Found An Answer! Using braces made it render what I wanted. I figured out that React Native renders strings here as it is, but with the formatting given, if inside braces. For eg:
<TextInput
multiline={true}
placeholder='Hey There!\nHow are You?'
/>
With the above code rendered, the TextInput will look like:
HeyThere!\nHow are You?
But if you use braces like this:
<TextInput
multiline={true}
placeholder={'Hey There!\nHow are You?'}
/>
Then You will get the TextInput like:
Hey There!
How are You?
And That's Exactly what I wanted!
Well, Thank You Folks for Replying!
<TextInput
multiline={true}
placeholder={'Hey There! \nWant any Help? \nPlaceholder To The Rescue!'}
style={{height: 40, borderColor: 'gray', borderWidth: 1,fontSize:12}}
/>
try to use textarea html tag.That allow you to do multiline placeholder.
By default, it seems like the text in a TextInput is put at half opacity when editable={false}. This appears to combine with any opacity passed in via a style object - if you pass in opacity: 1 the effect still happens, and if you pass in opacity: 0.5 the "disabled" opacity is ~0.25. How can I stop this behaviour? Tested on Android but may also occur on iOS. Thanks!
I solved this problem doing this:
<View pointerEvents='none'>
<TextInput
...
editable={true}
/>
</View>
PointerEvents documentation: https://facebook.github.io/react-native/docs/view#pointerevents
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.
How to keep keyboard opened when i have TextInput and Touchable near input that sends message. So i want to send message without double tap on touchable. First to hide keyboard, second to send message. How to do that?
Use keyboardShouldPersistTaps to handle this.
Example:-
<ScrollView
keyboardDismissMode="on-drag"
keyboardShouldPersistTaps={'always'} >
</ScrollView>
Deprecated Properties:-
false, deprecated, use 'never' instead
true, deprecated, use 'always' instead
source
Check out keyboardShouldPersistTaps.
The following keeps the keyboard open when content is tapped but closes the keyboard when dragged.
<ScrollView keyboardShouldPersistTaps="always" keyboardDismissMode="on-drag">
{/* Content containing interactive elements such as <Touchable /> */}
</ScrollView>
Note
Any parent ScrollViews/VirtualizedLists/Flatlists/SectionLists will also need to set keyboardShouldPersistTaps="always"
Here are some gory details if you're interested.
Have a look at the keyboardShouldPersistTaps property of ScrollView. Setting it to "handled" should do what you are looking for.
just only wrap you submit button with scrollview and then make sure u need to add two props keyboardShouldPersistTaps="always" and keyboardDismissMode="on-drag"
like this ...
<TextInput/>
<ScrollView
contentContainerStyle={{
width: SIZES.width / 6,
height: 60,
}}
keyboardShouldPersistTaps="always"
keyboardDismissMode="on-drag">
<TouchableOpacity onPress={}>
</TouchableOpacity>
</ScrollView>