After adding
windowSoftInputMode="adjustPan"
in my manifest file it only solves half of the problem - content that's always on the screen doesnt move, but content rendered after certain conditions are met are still squished. Anyway to fix that?
Related
I'm creating a bottom sheet with selectable text in it. When I want to scroll my bottom sheet, the text gets selected.
I want to know if I can fix it inside my component. I suspect it comes from how I handle the scroll.
Here is a minimal reproduction of my component on Snack, with the bug visible (use Web Version not Android/IOS)
https://snack.expo.dev/#kennyledev/conflict-between-selectable-text-and-react-native-gesture-handler
I've been trying to implement a rather common UI pattern. I've got a react-navigation MaterialTopTabNavigator that contains a number of ListViews. When the currently active ListView is scrolled down, the header above the Tabs is supposed to be hidden (by translating it up, out of the viewport), the tabs should as well move up.
Like in this picture
The problem I'm facing here is either
a) if i translate the header and the tabs up, i need a paddingTop in the lists to make sure the first item is completely visible. But if i scroll down and the header is hidden and then switch to the next tab (where the list is scrolled to the top) the padding will be visible.
or
b) If i translate the whole thing (header, tabbar, and ListView) the paddingTop is not necessary (I can add a padding at the bottom and hide it via a BottomTabNavigator) but the animation gets jerky on android.
There seems to be a bug in react-native causing this.
But there are apps around for Android that implement this pattern.
I'd be grateful for any ideas or pointers around this.
I have a v-dialog that opens when page is loaded. Somehow overlay is lost. The behavior is very similar to this bug report: https://github.com/vuetifyjs/vuetify/issues/7798
But in my case overlay works when v-dialog loads after several seconds of page loading, and overlay is lost only when v-dialog is loaded from the very beginning. So I have to find the way to fix it or to force overlay to be shown together with dialog.
I tried to work with v-overlay (to wrap dialog content there), but it's content is not shown as well, if we try to do this while page is loading.
So how can I fix this or force overlay to work?
I have used text input in creating a search bar on the 'HomeScreen'. Whenever I click on the search bar, it takes me to the 'SearchScreen' where text input is focussed.
In both screens, I have placeholder "Search" in the text input. The problem I am facing is that the placeholder flickers whenever screens are changed. This happens all the time if/when text input is re-rendered.
I want the placeholder to remain static there for smooth transition between screens. Please let me know if you have any idea on how to erect it or if you have any suggested workaround.
Take a look at this library Fluid Transitions. This library helps to create smooth transitions between screens and shared components. Thus, you can go from screen A to screen B maintaining you search bar input intact or at least keep it with a smooth transition.
Another idea is... Do you really need to move to another screen when focusing the search bar? Is it possible if you just create an SearchList component that "shows/hides" a FlatList (for example), when the user focus the search bar, it will change to another screen when the user clicks on a specific result.
I am using react-native-router-flux and here's some observation, previously I was using .replace() for switching scenes, this time I used .push(), customizing it to not show any animation and now search does not flicker when popping the search screen, however, it does flicker on pushing search screen onto the stack, seems like the re-render is causing flickering (as pop does not trigger a render but push does).
It's best to avoid using the placeholder as for now until the problem is sorted in react-native itself.
I've implemented a React Native component which shows an image loaded from a remote server. The user can swipe the image out of the screen in order to navigate to the next image which is again loaded from the remote server. While loading of the second image, the old image is still visible on the screen.
I want the old image to disappear while loading the next image. Any hint how to achieve this?
Prop defaultSource only works for initial render (showing the first image) but not consecutive images. So I guess React reuses the Image under the hood. I've played around with onLoadStart and onLoadEnd but I don't know how to reset the source of the old image.
Any idea?
Thanks.
Add a unique key prop to each image. It can be a number or a string. That will prevent React from re-using the elements.