In my react-native app, I need different screen behaviour on different screens when keyboard pops up.
In some screens i need the screen to move up, and in some screens i do not want to change the screen position etc.
Individual behaviours can be achieved by setting values of android:windowSoftInputMode to adjustNothing or adjustResize in AndroidManifest.xml file.
But setting these values in the manifest file changes the behaviour for all the screens.
Is there a way to change it programmatically within different screens ?
In android code it looks achievable using a getWindow() call. How to do it in react-native ?
Try this component react-native-android-keyboard-adjust
When the component in which you don't want to move up views mounts, set AndroidKeyboardAdjust.setAdjustPan() and when that component unmount reset it to AndroidKeyboardAdjust.setAdjustResize() or whatever option that suits your criteria
See this answer
try use ScrollView instead of View then wrap it on KeyboardAvoidingView
Related
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
I am using vuetify with vuejs.
How is possible I know when a "v-navigation-drawer" menu has been opened with overlay(showing above other components/page). It´s occurs depending width screen.
I need check it and disable a component if the 'navigation-drawer' was opened only without overlay.
You can check for the v-navigation-drawer's temporary prop when the navigation drawer is toggled. A/c to docs:
A temporary drawer sits above its application and uses a scrim (overlay) to darken the background. This drawer behavior is mimicked by default when on mobile.
Will require some code from your side for a more detailed answer.
I'm looking for a solution, if possible a library or a custom component, for React Native, without Expo.
I need to create a video frame that is movable in the screen, up and down, and cover the content. I also need to make it possible to click on the content behind it.
Another difficulty is that I need it to stay up on all screens during navigation.
I first tried to use reanimated-bottom-sheet with some increments, but the content behind the bottom is not clickable. Also, to make it available on all screens I needed to put in at the same level as React Navigation's BottomTabNavigator and it covers the tab bar too even with a zIndex.
I also tried to use modals, but I'm relatively new to React Native and couldn't find how to make the background touchable as well as making it movable.
I guess I need to make a view with absolute positionning and learn Reanimated, unless you have a simpler idea?
Thanks
I am creating tabs in my app using react-navigation by createTabNavigator.
What I want to do is how can I show a portion of next screen in tab in the current screen. The Idea is to show the user that there exist another view
What I have already done is that everything except the for showing the next screen in current one, is there any prop or option that will allow me to shrink down the page container?
This is not possible with react-navigation.
Try using a carousel library like react-native-snap-carousel (https://github.com/archriss/react-native-snap-carousel). As you can see in their showcase apps, this library does exactly what you want.
i am currently working on an App for Android and iOS - i am using react native.
Is there any way to hide the navigation bar dynamically in react-navigation or should i rather switch to react native router flux?
When the user changes to landscape i want to hide the navigation bar, when he goes back to Portrait, i want to show it again.
I know how to change it statically by using {header: null} in the navigation Options, but this does not help me in this case, at least i did not find a way to solve this.
Thanks in advance!
This is sort of a hack but I think you can replace the provided header component from React navigation with your own, then add a redux state that controls its visibility.
Either wrap your screens with a view that contains an onLayout event that will trigger redux action to set the visibility of your custom header.