In my app when I select to give input to particular input field which positioned at top the keyboard pushes all my bottom element upward. I am using Ionic framework. In android platform it is solved by changing windowsoftinput to adjustpan from autoresize. How to solve this problem in case of ios platform.
you should be able to add the class hide-on-keyboard-open to the items you want to stay "behind the keyboard" you can read more about how this works here
it involves using the ionic keyboard plugin
Related
I've recently upgraded to react-navigation v6 for various functionality upgrades but seem to be having some difficulty understanding the recently added presentation prop available on stack navigators.
I'm working exclusively for IOS and what I basically want to achieve is the same drag-to-close behaviour presentation="modal" gives by default but without the asthetic look of the new screen being stacked on top of the previous screen.
I've made a basic example to highlight what it is I mean which will hopefully make more sense than my words.
If you set presentation to modal inside the Routes.js (line 56), on button click the modal will render and the user is able to drag down on the screen to close it. If however I use presention="transparentModal", you lose the dragging functionality.
Is it possible to get this dragging functionality when using this presentation type?
EDIT
Link to minimal example: https://snack.expo.dev/BpTJ1Cu9m
I am trying to make the bottom sheet touch the bottom of the screen rather than the bottom of the tab bar.
screenshot
Attempts to increase the z-index and position it further down are fruitless as the View will not overlap the bottom bar, it will always go behind it.
I tried to wrap it in a Modal component, which fixes the alignment, but then you can not interact with the map.
To create a custom bottom sheet. You can use this package
react-native-actions-sheet
I have used this in many applications. This will resolve all of your issues. As this package is comfortable in iOS and android both.
You can try the bottom sheet libraries which are present in react native. Few of which I have used is:
react-native-raw-bottom-sheet //my choice
react-native-actions-sheet
You can also check this out
This is for iOS app created using react-native. I am using KeyboardAvoidingView in a form which contains a few TextInput fields. I have observed that the view is not moved high enough to accommodate the keyboard when a TextInput field towards the bottom of the screen is selected.
I created a snack that demonstrates this behavior (Link below). I have also observed that in some cases, the view is moved high enough on one iPhone but not the other. Initially, the problem was reported for iPhone 6S Plus in which users reported that the view is not moved high enough to accommodate the keyboard and in such cases, they are not able to see what they are typing the input box. When I was trying to create a snack to reproduce the problem, I found that I was able to reproduce that even on an iPhone 5s.
https://snack.expo.io/ry15dng2-
In the above snack, if you click on the TextInput box with value jug, you should see that the keyboard overlaps the input box and it is not clearly visible.
I am sorry for the quality of the snack. I just tried to create a minimal example to reproduce the problem.
How can I fix this problem?
I also experienced this issue (on Android). They key is this prop in the KeyboardAvoidingView:
/**
* This is the distance between the top of the user screen and the react native view,
* may be non-zero in some use cases. The default value is 0.
*/
keyboardVerticalOffset: PropTypes.number.isRequired,
The view does not automatically identify the offset between the top of the app frame and the top of the KeyboardAvoidingView that you are rendering, so it doesn't shift itself enough if that number is nonzero.
To fix this, either add an explicit keyboardVerticalOffset if it's known, like this...
<KeyboardAvoidingView behavior={"position"} keyboardVerticalOffset={Constants.statusBarHeight}>
... or move the KeyboardAvoidingView to the root of your component tree so that there is no offset above it.
I have two issues with a Sencha Touch application, first is how do I remove the top bar highlighted in red, second is, when I press the back from above bar it goes back fine but when I press the phone's back button it takes me out of application, what can I do? Look at the picture below
I have already tried using navigationBar:hidden or false and autoMaximize:true, also about back button thing I don't have any idea so please suggest me something.
Question 1)
I guess you are using Sencha native packaging, and you have encountered this bug: http://www.sencha.com/forum/showthread.php?259817-3.1.0.256-Strange-Android-Titlebar-on-native-Apps/page2
Quote from richardvd user of Sencha Touch Forums:
This is the Android TitleBar, you can remove it by adding an attribute
to your base AndroidManifest.xml.
In my case this file is located here:
C:\ext\Sencha\Cmd\3.1.1.274\stbuild\st-res\android\AndroidManifest.xml
Open it and add this attribute to the application field:
android:theme="#android:style/Theme.NoTitleBar"
Question 2)
You can control the back button behaviour from Javascript with Cordova/Phonegap:
document.addEventListener("backbutton", yourCallbackFunction, false);
Source: PhoneGap documentation
I'm building an App for Android, iOS and Blackberry with Sencha Touch 2.0.1.
I have a Form-Panel with about 10 selectfields and some sextfields. If i ran the app on Android 2.3 or higher, the selectfields are shown as pickers. So far so good.
When the user starts filling out the form starting with textfields, he can go through the form using the next-button on the virtual keyboard. The problem is, that the selectfields are ignored by the next-button. The user has to tap on the selectfields.
I can't figure out how to get prev- and next-Buttons for the picker-elements. So that I can go through the form only with the next-Button instead of pressing "done" and tapping on the next Selectfield. It would be far more comfortable for the user.
So support of the sencha-forum isn't really helpful, see below:
http://www.sencha.com/forum/showthread.php?219636-Native-select-field-for-Android
http://www.sencha.com/forum/showthread.php?205581-Can-I-use-iOS-native-picker-instead-of-ST2-picker
According to this, there are prev- and next buttons available for a picker:
http://www.sencha.com/forum/showthread.php?205159-Ext.picker.Date-with-no-prev-and-next-buttons&p=803794
But I can't find them:-(
I think, there are two solutions to the problem:
Accessing the native Picker as proposed in the first link above. The question is how?
Implementing an own Picker-Element with an Prev- and Next-Button. This seems to be a huge efford for such a basic task.
I can't really believe, that this is such a big deal in a big framework like Sencha Touch.
Anyone facing the same problem and has a working solution?
My only idea for you would to put your picker on the page as normal, then add two buttons on the page - a Prev and Next buttons using Sencha. Then add onTop handlers for those buttons, that use the picker's .setActiveItem() method to set the picker to the next or previous item. Hopefully that will get you on your way.
http://docs.sencha.com/touch/2-0/#!/api/Ext.picker.Picker-method-setActiveItem