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
Related
I want to have a scrollable (with snap points) react native navigation stack screen(presentation: "modal") in my app. I don't want anything like "react-native-modal" library or official Modal from react native library. I want an actual screen with modal behaviour and I can achieve that with presentation: "modal" property but I want it to have snap points. Perfect example would be the iOS fitness app.
So this is the screen when you initially press upload button. As you can see it takes maybe 40% - 50% height of the screen
If you scroll down height expands and it acts as ordinary screen with presentation: "modal"
And lastly if you scroll back up it springs back to its original position and it acts as a modal(no gap at the top of the screen as in second image)
That is the behaviour I am looking for.
If it is possible I would like to get similar behaviour on android as well.
I tried to implement that behaviour with "react-native-modal" and official Modal from "react-native" components but I want to have it as a separate screen. I also want it to feel "native like" and with these stuff it doesn't feel that way.
You may try this library react-native-simple-bottom-sheet
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 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 would like to know how to properly handle different screen sizes in react-native. For example I have some screens which contain quite a few components, buttons and text. When there is too much text some components go off screen. I have set up a fake example in rnplay to illustrate the issue - https://rnplay.org/apps/OpZMxQ. Any pointers would be appreciated thanks.