I have created a screen with a header on top with some buttons and a main component that will be scrollable and will contain many components called Category. Now I have created category component, and it is responsive on all screens (without wrapping in Scroll View)
When I try to wrap it in ScrollView or FlatList, the layout is behaving quite differently for smaller devices. It is better on Larger devices, but I want the same look on all devices.
This is the link to the snack to check it out.
Some of the code has been commented which means I have tried them but they didn't work and gave different behavior on different devices.
I have tried both flat list and scroll view with different stylings, but i wasn't able to find the perfect styling.
Mobile Phone dimensions i tried on:
5.8"
3.7"
4.0"
5.2"
Related
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 am using two different screens for a page but its not responsive.
I have used flex and percentage(%) to adjust margin but did not work for me.
Here is screenshot what actually my screens look like. click here
I am trying to implement a UI layout similar to google maps "explore" on Android, (see gif) in React Native.
In my UI design I have app navigation tabs at the bottom of the screen, with a full page map background, overlaid with a "bottom sheet" coming from above the tabs, and a search box component at the top. See UI sketch below.
I have found various react-native ui components which look useful, but I can't figure out the styling to arrange them in the layout I want.
Several of the bottomsheet components I'm looking at, for example, rn-bottom-drawer show gifs similar to what I'm trying to create, e.g this animation, but I can't find an actual code example of how that UI was created. For example, the same library example just shows the bottom drawer over an empty screen.
What combination of wrapping elements and styles would allow me to create the layout described? I come from a XAML background and this kind of layout is very easy to create, but I can't get my head around how to do it in react native.
It is halfway possible with the component "react-native-swipe-up-down".
The swipe up above the App works, but it is really buggy. Had the same problem as you and couldn't find anything better than swipe-up-down til today.
I have the same component in multiple screens, which I navigate to through React navigation. I'm using Tabnavigator.
On the first screen, the View containers move around if the text is too long. I have a fixed flex-size on my view containers, but it doesn't take that into consideration. The strange is, it's only on the first screen. A gif to show you what I mean.
https://gfycat.com/KaleidoscopicEasygoingApisdorsatalaboriosa
I have linked a Snack to show you my code:
https://snack.expo.io/#cronnay/show-inconsistency
I've checked if it's because of the scrollview I have, and I was inconsistent with my design on the scrollviews. but they all have the same styling.
What the heck is going on?
EDIT: Uploaded new gif that shows that I navigate to same component through two different ways. And it makes the design screw up.
https://gfycat.com/HappyPracticalAustralianfreshwatercrocodile
I am trying to figure out how to create a bidirectional loading flatlist. Right now if you add data to the top of a flatlist, it will renreder and repositiin to the top of the flatlist.
I know there is a way some users have rigged up to perform an animated scroll. But that still creates kinda a choppy effect.
My thinking was if i had two flatlists, one of which serves as my new data, I could house those in a scrollview, and essentially get the scrollview to act like a window, And have its position not be affected by any of the rendering
Does anyone have a solution for any of this? I saw one of the RCs just added this to ios, but I am trying tonget it working on Android as well :(