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} />
Related
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"
/>
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>
I'm currently facing a strange problem:
I use Ionic 3 and ionic tabs like this:
<ion-tabs>
<ion-tab [root]="mapPage" tabTitle="Map" tabIcon="map"></ion-tab>
<ion-tab [root]="addPage" tabTitle="Hinzufügen" tabIcon="add"></ion-tab>
<ion-tab [root]="facebookPage" tabTitle="Facebook" tabIcon="logo-facebook"></ion-tab>
<ion-tab [root]="morePage" tabTitle="Mehr" tabIcon="more"></ion-tab>
</ion-tabs>
The icons are only visible when the Tab is selected, despite the facebook icon. I want that all icons are visible even if they are not selected.
It looks like this on my iOS/Android Device. With ionic cordova run browser it looks all good.
Does anybody else had this problem?
As #Suryan said, ionic will auto select platform, please refer attached image. If it didn't work please go with trail and error method.
There is a formpanel which has a lot of input fields with Extjs6 Modern.
I am using ios 9.3.1 and 3rd-party input method. When I tap one input (e.g. the Rio textarea), the keyboard shows, but it overlays the input.
It goes well when I use the default inputMethod of ios. The view moves up and docks to the top of the keyboard.
Sencha touch has the same issue.
Do you have any workaround?
I have an solution
use plugin cordova-plugin-keyboard，and add those preferences to config.xml
<preference name="KeyboardShrinksView" value="true" />
<preference name="DisableScrollingWhenKeyboardShrinksView" value="true" />
see http://blog.csdn.net/lovelyelfpop/article/details/52033045 for detail
We are developing a hybrid mobile app using IBM Worklight 6.1.
For iOS, how to handle "Search" button event from the soft keypad that is displayed?
"handle" is a bit vague... What are you trying to accomplish?
You shouldn't need to detect any button, if you invoke the correct keyboard for the specific need.
The search button in the iOS keyboard will only appear if your input tag is inside a form element.
For example:
// This will display a return button.
<input id="textField" type="text"/>
// This will display a search button.
<form>
<input id="searchField" type="search"/>
</form>
In JavaScript, you can use the jQuery keypress event to trigger an action once the search button is tapped. For example:
$("#searchField").keypress(function() {
alert("Handler for .keypress() called.");
});
You could also "detect" the "type" of the keyboard, in the case of "search", like the following (but this is kinda obvious...):
if ($("#searchField").attr("type") == "search") {
alert("This search field is of type 'search'.");
}
Otherwise, you will need to implement native code (meaning a Cordova plug-in) to detect the type of the currently displayed keyboard and perform actions, etc...