I use React Native TextInput and when I click twice capslock - icon appears. Is there a way to hide this behavior?
<TextInput
autoCompleteType="password"
onFocus={handleOnFocus}
textContentType="oneTimeCode"
secureTextEntry
placeholder="Make a strong password"
/>
Related
Is it possible to close react-native 'Modal' on pressing the escape key? I know other libraries 'react-modal' where Modal closes on pressing escape key out of box. But seems react-native Modal doesn't have this functionality out of box.
import { Modal } from "react-native";
<Modal
visible={isOpen}
transparent={true}
animationType={"fade"}
onRequestClose={() => {
console.log("On request close");
this.closeModal();
}}
>
<View>
// Other UI elements here
</View>
</Modal>
"onRequestClose" is not called when Escape key is pressed. Any workaround on how to close modal on pressing escape key?
Note: There is no TextInput which I have seen being suggested in few answers to capture key press events, so that cannot be used.
Description
I'm not able to press on other components after closing a modal
React Native version:
0.63.0
Steps To Reproduce
After loading the screen, try to interact with the components
Open the popup by clicking in the bottom button
Try to interact with the components again
The video reproducing the issue: https://streamable.com/1bb89k
Expected Results
The components should stay interactable after closing the modal
Link to the repository:
https://github.com/LauraBeatris/bill-splitting
Modal
https://github.com/LauraBeatris/bill-splitting/blob/master/src/contexts/popup/PopupContainer.ts
<PopupProvider value={payload}>
<Popup
isOpen={popupState.isOpen}
hidePopup={hidePopup}
handleOnShow={handleOnShow}
handleOnHide={handleOnHide}
>
{
Component && (
<Component
hidePopup={hidePopup}
showPopup={showPopup}
{...componentProps}
/>
)
}
</Popup>
{children}
</PopupProvider>
In my React Native application, I have two TextInput components, one numeric and one default. The problem is that, onSubmitEditing works on the default keyboard on both iOS and Android, but it's not triggered on the numeric keyboard on iOS.
Default keyboard:
I use the default keyboardType in the example below. onSubmitEditing is triggered both on Android and iOS.
<TextInput
value={this.state.username}
onChangeText={(username) => this.setState({ username })}
onSubmitEditing={() => console.log('onSubmitEditing triggered')}
/>
Android keyboard has a tick-button and iOS keyboard has a return button. When I press these buttons, onSubmitEditing is triggered on both keyboards.
Numeric keyboard:
I used the numeric keyboardType in the following example. I added returnKeyType="done", because iOS keyboard does now show a button without setting returnKeyType.
<TextInput
value={this.state.password}
keyboardType="numeric"
onChangeText={(password) => this.setState({ password })}
onSubmitEditing={() => console.log('onSubmitEditing triggered')}
returnKeyType="done"
/>
Android keyboard shows a tick-button and it triggers onSubmitEditing when pressed. iOS keyboard shows a Done button above the keyboard, however it does not trigger onSubmitEditing.
I have tried using onEndEditing prop, but it does not work as onSubmitEditing. It is triggered on blur events too. onSubmitEditing is only triggered when the return key button is pressed, and that's what I exactly need.
I am looking for a way to implement functionality to hide keyboard for native looking search bar in react native (iOS).
There is a possible conflict between react native packages react-native-dismiss-keyboard and react-native-search-bar. Dismiss keyboard works for <TextInput>, but not for <SearchBar> elements.
How to achieve the desired functionality?
Import:
import dismissKeyboard from 'react-native-dismiss-keyboard';
Doesn't work:
<SearchBar
onChangeText={dismissKeyboard}
onSearchButtonPress={dismissKeyboard}
onCancelButtonPress={dismissKeyboard} />
Works:
<TextInput
onChange={dismissKeyboard} />
I'm trying to implement two text inputs. I'm not sure if the best practice is to wrap these inside a scroll view or not. However, when I do it as shown below, I just see a single line in the middle.
If I remove the scroll view and just leave a single Text Input, it displays a box with input that I can interact with. Though I'm still unable to get the keyboard to display on the simulator. But I can manually type in and change state.
Any idea on how to allow more than one text input, as well as how to show the native keyboard that pops up from the bottom?
render() {
return (
<ScrollView>
<TextInput
style={{height: 40, borderColor: 'gray', borderWidth: 1}}
placeholder="Enter item 1"
value={this.state.text}
onChangeText={this.onChange} />
<TextInput
style={{height: 40, borderColor: 'gray', borderWidth: 1}}
placeholder="Enter item 2"
value={this.state.text}
onChangeText={this.onChange} />
</ScrollView>
);
}
1 - For the iOS Simulator there is an option Hardware -> Keyboard -> Toggle Software Keyboard (which is unchecked by default). Checking this option should solve your issue of displaying the native keyboard.
2 - Regarding multi-line text input. Yes this is an issue, but there is a work around shared in this answer below. I'll attach the link to the answer for your reference.
P.s: I haven't tried it myself, but the answer has been marked to have solved the issue!
Multi-Line TextInput Hack - https://stackoverflow.com/a/31759113/5783646
Display keyboard in iOS Simulator: Hardware -> Keyboard -> Toggle Software Keyboard
Show more than one text input: My guess is that there are styles applied (or not applied) to a parent element or elsewhere that is preventing the TextInput from rendering at a useable size.
I created an example on RN Playground that demonstrates what you are asking for: https://rnplay.org/apps/ldlfWw