I am using "react-native": "0.70.4", with the #react-navigation/material-top-tabs to make a custom bottomsheet with top tabs inside. When clicking the TextInput in tab nr 2 it dismiss the keyboard, but if i click again it does not happen. I tried multiple ways, it happens when there is 3 or more tabs. It works as intended in the other tabs.
Example of the bottomsheet and tabs. If I click the "søk" (TextInput) in tab "test2". It would open and close the keyboard the first time I click it.
this after the second time I click the TextInput.
I am thinking of using android:windowSoftInputMode="adjustNothing"
but this doesnt let me use an useffect/keyboard lisnter
looks like there is not enough space to open the keyboard in the BottomSheet menu, should you use const snapPoints = useMemo(() => ["30%", "50%"], []); for snapPoints?
I had to change android:windowSoftInputMode="adjustResize" with adjustPan, change my layout to use flex instead of height and change tabBarHideOnKeyboard: true to false.
It makes me have to change quite a bit of code. But atleast the bug is gone.
I made a custom tab component with scrollView. the issue is with react-native-pager-view.
unable to resize or move things so that it can reach all components when using pager-view.
Related
Hey I'm just starting out with React Native CLI.
I want to have a button which will add an item in the ScrollView. And the new Item should lead to a new Screen when you press it. But I don't have an idea how to make this nor do I know how to google that xD. Does anyone know how I can make this?
I just have a button which leads to another screen when pressing it.
I hope someone can help me :)
First you have to clear few things and make the logic.
1)Either you want to save that item datathen show it in scroll view, make it Pressable and then u can navigate to a different screen.
Or
You just want to show the data in the scroll view. Once you reload, the data is gone. So that's my bro (In my opinion) is of no use.
For the first step .
You need to store the data in a storage and then fetch it in a scroll view,
make it Pressable and navigate to a different screen.
(hint: If you want to make it Pressable then you can fetch the data into a card component and then call that component in a scroll view).
Now grab your keyboard and start searching on it.
I created a bottom tab bar, when press on the bottom tab bar, will toggle a modal. Now my modal is blocking the bottom tab bar, so I am not able to press on the bottom tab bar to close my modal.
Any solution for this? I've tried zIndex, and adjust the marginBottom for the modal (move it up), but both are not working
Unfortunatelly, you can not do this. As told in this piece of documentation:
A modal displays content that temporarily blocks interactions with the main view.
So this is indeed the expected behavior.
Did you try with
fullScreen={false}
transparent={true}
then set margin-bottom
I use transparentModal for open a modal in react native.
Stack Group 1: Contains App Screens
Stack Group 2: using transparentModal for handling modal
The modal only occupies 2/3 of screen, and there are some button on the top which should be clickable. However, we cannot press these buttons.
Please take a look at the image below
If you have any idea, please let me know.
Thank you in advance!
Transparent modals are just another screen (s. docs). Meaning that the background's screen is set to transparent, but the underlying screen is not pressable.
A possible solution is to move your buttons in a custom header component for your transparentModal screen (s. docs).
Alternatively (but in your case that's seems not the right way to go), you can set cardOverlayEnabled: true to make the screen close if you tap on the background of your transparent modal screen.
Bad news is that we cannot do it using react-navigation
Please take a look at this link
I am using react-native-modal. I am using modal's overlay, and the button which opens up modal, changes to cross button, but it stays behind the overlay of modal. I want that button to be on top of modal when modal is visible. I have already tried zIndex with the button but it didn't work. Need help with this. Thanks in advance.
Something like this but with modal overlay:
The Modal component of react native traps the focus inside the modal content while visible. The only way to capture a click on the button is to display another copy of it inside the Modal component. If you manage to display it at the same position, the user won't see that it's another button.
In a react-native form, when switching from one TextInput to the next one, the second grabs focus for an instant and then suddenly RN dismisses the keyboard.
I have onSubmitEditing coded to move to next input, but the user needs to click on enter in the keyboard, I can also override onEndEditing however that forces you to move to the next input and maybe you didn't touch that one.
I found out that the problem is related to having TextInputs within a ScrollView, focus between inputs in this component doesn't work as expected.
keyboardShouldPersistTaps={true} is deprecated so need to use keyboardShouldPersistTaps="always"