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
Related
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.
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"
I'm new to react-native.
I'm struggling on keyboard now. I have TextInput and a button. What I want is that, when user entered input through keyboard, he/she can go to next page with just one click on the return button. So what I simply want is that onSubmit method should be called when user clicks "return" button on keyboard.
Is there anyone can help me?
You can use onSubmitEditing callback of TextInput
Example.
<TextInput
onSubmitEditing={(event) => this.onSubmitHandler(event)}
/>
You can get more information from docs