I have some very simple code:
<TextInput
onChangeText={setInputAddress}
value={inputAddress}
placeholder="Address or postcode..."
/>
<Button
title="press"
onPress={() => {
Alert.alert("clicked")
}}
/>
The button works fine, and so does the text input, but when I am focussed on the input field, and try to click on the button, it doesn't work. The first click blurs in input field and the second click clicks the button. Is there a way to prevent this behaviour?
The solution was to add keyboardShouldPersistTaps="always" to the surrounding ScrollView.
Related
So I've been struggling with this on iOS: I want a multiline text input that allows adding a new line:
// Now there's a "return" button, that adds a new line, perfect!
<TextInput
multiline
numberOfLines={2}
/>
And at the same time I want a multiline text input with a return key, that dismisses the keyboard (so the user can continue scrolling down the screen to the submit CTA):
// Now there's a "done" button, that dismisses the keyboard, yay!
<TextInput
blurOnSubmit
multiline
numberOfLines={2}
returnKeyType="done"
/>
However, I can't find a way how to combine these two. With other keyboard types (such as number) there is returnKey above the keyboard itself.
Is there a way to have multiline text input with both - new line button and keyboard dismiss key? Thanks!
Edit:
Expo snack: https://snack.expo.io/#mattz/77a2d1
In case anyone is still looking for the answer, I'm posting it here
You could add a wrapper (TouchableOpacity or Pressable) similar to the solution given by James, for the TextInput and dismiss the keyboard with an outside click.
import { TouchableOpacity, TextInput, Keyboard } from 'react-native';
<TouchableOpacity onPress={Keyboard.dismiss}>
<View>
<TextInput
blurOnSubmit
multiline
numberOfLines={2}
returnKeyType="done"
....
/>
</View>
</TouchableOpacity>
You can create an InputAccessoryView with a "Done" Pressable that runs Keyboard.dismiss in it's onPress handler.
I got a weird problem on my react native app, I've a counter buttons, like increment and decrement the quantity of product using redux, but the problem is when i press on button the store value change but the Text component (View) doesn't change automatically until i click outside the button (That's the weird issue).
I tried Button component with onPress, TouchableOpacity onPress but still the same issue.
<TouchableOpacity onPress={()=>{this.handleDecQuantity(item)}}>
<Icon
family="AntDesign"
size={16}
name="minus"
color="#2B4D8E"
style={styles.btn}
/>
</TouchableOpacity>
...
<Text size={16}>{item.quantity}</Text>
...
<Button onlyIcon icon="plus" radius={3} shadowless iconFamily="AntDesign" iconSize={20} color="tarnsparent" iconColor="#2B4D8E" style={styles.btn} onPress={()=>{this.handleIncQuantity(item)}}>+</Button>
I hope the issue is clear, The counter change only when i click outside of button or TouchableOpacity
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'm working in react-native. I have a form page in my mobile app and have an edit button and back button. Once the edit button is clicked, I want a save and cancel button to replace the edit and back button, and they should have their own functionality. I have tried componentWillUpdate() and if else statements in my render function, but neither seem to work.
You can put all the buttons in your render function, controlled with state(eg. inEditMode). When user click on edit button you can set inEditMode to true and display the edit & back button.
Something like this:
render() {
this.state.inEditMode ?
<View>
<EditButton />
<BackButton />
</View> :
<View>
<CancelButton />
<SaveButton />
</View>
}
I have implemented a search bar including a TextInput and a search button. The idea is basically to type what you wish to search for and hit the search button. My problem is that the button is unclickable while the TextInput has focus. Meaning I have to click twice to search, once for the TextInput to lose focus and once to hit the search button.
Here's my code:
<View style={styles.searchView}>
<View style={styles.textInputView}>
<View>
<TextInput style={styles.textInput}
placeholder="Sök användare"
multiline={false}
autoFocus={true}
autoCapitalize="words"
underlineColorAndroid="transparent" />
</View>
</View>
<TouchableOpacity>
<View style={styles.searchButton}>
<Image style = {styles.searchThumbnail}
source = {require('../images/navigatorThumbnails/search.png')}/>
</View>
</TouchableOpacity>
</View>
Is there any way to make the TouchableOpacity clickable while the TextInput has focus?
There is a property called keyboardShouldPersistTaps on Scrollviews (and also ListViews).
For React-Native version >= 0.41
The documentation says:
Determines when the keyboard should stay visible after a tap.
'never' (the default), tapping outside of the focused text input when the keyboard is up dismisses the keyboard. When this happens, children won't receive the tap.
'always', the keyboard will not dismiss automatically, and the scroll view will not catch taps, but children of the scroll view can catch taps.
'handled', the keyboard will not dismiss automatically when the tap was handled by a children, (or captured by an ancestor).
Set it to always or handled to have the expected behaviour.
Outdated version for React-Native < 0.41
The documentation says:
When false, tapping outside of the focused text input when the keyboard is up dismisses the keyboard. When true, the scroll view will not catch taps, and the keyboard will not dismiss automatically. The default value is false.
Set it to true to have the expected behaviour. You might have to set this prop at different places in your component tree.