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
Related
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"
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 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 watched this presentation and there's a section on how to build an IOS Maps like UI. When dragging from the bottom to top, it drags to the top, and after it reaches the top, it continues scrolling up. Also, when scrolling down, when it reached the top content of the ScrollView, it continues to drag down.
It is suggested that it can be done using ScrollView by adding an empty transparent cell as the first element on the ScrollView. I have tried implementing the same which can be found in this snack. In my case, instead of Maps, I am using another ScrollView.
But the problem is that the first element (transparent element) does not allow to interact with the First ScrollView elements. I have tried with pointerEvents inside the first transparent view and even in its parent ScrollView. But this does not help. Has anyone tried implementing this kind of use case with react-native? All I found was this library, but I think it's not maintained properly.
you need to set the z-index of the transparent view to send it under/behind the interactive content, here is a good resource:
https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
Edit: Actually I could not accomplish it, it seems like everything inside a scrollview will always be behind or in front of other elements, it seems like you can't have part of the scrollview behind something else and another part in front of something else.