I am using an Input component with "decimal" keyboard. Unfortunately this keyboard has no button to dismiss itself.
My workaround is to show an icon on the right side with an appropriate action on it. However, this is of poor usability.
What is the best way to tackle this?
<Input
ref={purchasePriceInput}
placeholder="Enter purchase price"
returnKeyType={'next'}
keyboardType = 'decimal-pad'
onChangeText={value => setPurchasePrice(value)}
label={'Purchase Price'}
labelStyle={styles.label}
rightIcon={<Icon
name='check'
type='font-awesome-5'
color='gray'
onPress={()=>{purchasePriceInput.current.blur()}} //<-- my workaround
/>}
>
{purchasePrice.toLocaleString()}
</Input>
You only need to change returnKeyType="done"
returnKeyType determines how the return key should look.
The following values work across platforms:
done
go
next
search
send
These values are just appearance.
So in your case, next works but it looks like a right arrow.
Related
enter image description here
This is my current keyboard pad which is keyboardType="numeric". I want to change the symbol to '+' as I only want to allow my user to input either '+' or digits.
I've tried different keyboardType but could not find any method to modify the symbol. The only method I can think of is using normal keyboardType, then use regex to prevent user to input anything besides digits and '+'.
Please help if you know how to do it. Thanks a lot.
You can not change the button on keyboard. You are right, you can use regex
^[0-9 +]+$
So in your case below code can be used
const [number, setNumber] = React.useState<string>('');
const onChangeText = (text:string)=>{
setNumber(string.replace(/^[0-9 +]+$/g, ""))
}
<TextField onChangeText={onChangeText} />
I've two input fields in my application.
<ScrollView>
<View>
<Input
placeholder={`Enter the amount:`}
keyboardType="number-pad"
showSoftInputOnFocus={false}
onFocusCustom={() => setShowCalulator(true)}
onBlurCustom={() => setShowCalulator(false)}
caretHidden={true}
/>
<Input
placeholder="Enter a short description: (Optional)"
multiline
onBlurCustom={() => Keyboard.dismiss()}
/>
</View>
</ScrollView>
When we click the Amount Input field, it opens a calculator ( not a keyboard ).
When we click the Description field, it will open a keyboard. When the keyboard is open and we're in the description field and we click the amount field then the amount field gets focused for a few milliseconds and disappears. We need to click again to the amount field to get it focused and open the calculator.
This issue doesn't exist if we first unfocused the description field and then click the amount field.
You can try this:
keyboardType={Device.isAndroid ? "numeric" : "number-pad"}
and Could pls take a look at this blog,it may help:https://lefkowitz.me/visual-guide-to-react-native-textinput-keyboardtype-options/
This is happening because your input is in ScrollView. You can find solutions here -> React Native requires two taps to change input focus when within scrollview
We are using SimpleFormIterator inside ArrayInput like follows (as example)
<ArrayInput source="backlinks">
<SimpleFormIterator>
<DateInput source="date" />
<TextInput source="url" />
</SimpleFormIterator>
</ArrayInput>
But when clicking "ADD" to add new fields it is still focused in "ADD" button. Is there any way we can focus on first added field after clicking "ADD"?
You could try adding an autoFocus prop on the DateInput, however, it means the first item will be focused automatically too in an Edit form which is probably not what you want.
I think this should be the job of the SimpleFormIterator. Can you please open a feature request issue on react-admin repository ?
In the mean time, you can make your own form iterator which would handle the focus.
Here, when someone tap on that button, VoiceOver or TalkBack will tell what is written in the accessibility label.
Now, I need a way to let the VoiceOver or Talkback speak that the button has been clicked by double-tapping.
I have attached a sample code below.
<TouchableOpacity
accessible={true}
accessibilityLabel="button for adding email address. Double tap to add alternative email"
onPress={() => { this.addEmailField() }} >
<Text>Add email address</Text>
</TouchableOpacity>
Thank you very much for your efforts and time.
I would do something like this
accessibilityLabel={this.props.clicked ? 'saved' : 'button for adding email address. Double tap to add alternative email'}
I want to add returnKeyType="next" to TextInput keyboardType='numeric', by default on the right there is a
erase button and on the left . is it possible to add another button ?
We can't add next button to numeric but if we can add done button above the keyboard in ios
returnKeyType={'done'}
keyboardType="number-pad"