I am creating a React native application with the following scenario:
There is a navigation bar at the bottom of the screen, allowing the user to navigate between three main pages. On one of these pages, there is a backdrop with a container overlayed on it with two buttons. Each of these buttons should show open different "pages" in that container, and the navigation bar will be hidden when the user opens one of those "pages". An image is included below.
App layout example
My question is: how is this best implemented in react native?
My original idea was to implement a custom Stack Navigator with createStackNavigator. While this does work, I was wondering if this is a good way to go about it.
One result from using a custom navigator is that the navigation state in the container is also bound to the back button of the device (on Android). However, this is a welcome feature in this case as it makes sense in the navigation flow.
How do I make my carousel items stack on one another in mobile view for bootstrap 5?
I found a couple of answers on here but nothing for bootstrap5
I just created react native app with expo init, built for Android. When i open app in landscape mode and after turn to portrait, the height of app is half of screen. https://i.stack.imgur.com/kzIlD.jpg
Here is code: https://github.com/catalin935/reactNativeHeightBug/blob/master/App.js
It looks like your view has been initialised with a height, perhaps Dimensions.get('screen').height?
If you want the view to always fill the screen, add flex: 1 to the styles to get it to flex to it's container rather than using height/width values.
Alternatively, you could attach an event listener to Dimensions to listen for the change event and use that to rerender your views although I'd only really recommend that if you want your UI to change depending on the screen ratio/orientation (eg, set a FlatList to use two columns rather than one in landscape mode. I have a small library called react-native-screenutils that may help you with that.
I have a FlatList which renders a productInformation item, which you can scroll through (so you horizontally scroll through the products).
The Info items have a lot of pictures and since Android 9 there is a severe performance problem with lots of images in ScrollViews. So I want the FlatList to only render the visible item and unmount and not cache the previous shown items.
How can I achieve this?
How can a navigation bar be supported in both iOS 6 and iOS 7 with a UIContainerView via a storyboard?
I am updating an iOS 6 app to iOS 7, but want to continue to support iOS 6. I have a main top level view that is embedded within a UINavigationController. The view within the navigation controller has a container view in it. I am using a storyboard to lay out the view.
On iOS 7 the navigation controller uses the entire screen, and I've set it up to put the container view content below the navigation bar. In iOS 6 the content of the view does not go under the navigation bar, so I have a blank gap below the nav bar.
Normally I would just reset the origin of the offending view on iOS6 (in ViewDidLoad or somesuch) and go on my way. However since my content is in a UIContainerView, I can't seem to change the frame after it loads. (I have tried this in prepareForSegue: when loading the UIContainerView. I'm open to having done this wrong? heh)
The closest I have found is using the following code under iOS 7 to make the nav bar opaque and keep the content out from under it, then using the entire space for my UIContainerView.
// tell the view to not extend below this nav bar
if ([self respondsToSelector:#selector(edgesForExtendedLayout)])
self.edgesForExtendedLayout = UIRectEdgeNone;
This solution works but has the side effect of showing the status bar as black (since it's more or less "blank" under the status bar). Alternatively, if I put the top edge of the container view below the status bar, on iOS 6 I have a big gap below the navigation bar.
I can eliminate the use of a navigation controller, but that seems a bit heavy handed in this situation and I'd like to use that as a last resort.
I've found the solution to this.
You need to set the barTintColor in iOS 7, which also seems to color the main status bar, as well as setting the nav bar to not be transparent like this:
mainController.navigationBar.barTintColor = [SRPRTabletHelpers customUserColor];
mainController.navigationBar.translucent = NO;
The non-transparency was the key, while setting the color sets not only the regular nav bar, but the color beneath the status bar as well.
I also needed to change my containerView top edge to be the full height of my view contained within the navigation controller, now that it is not transparent, and it works the same on both iOS6 and iOS 7.
While you mention to have already solved this, your method seems to require a lot of manual code and if checks. The iOS 7 UI Transition guide, in the Supporting iOS 6 chapter mentions another way: first design your interface for iOS7 as you have done, with your view extending below the navigation bar.
Then, in the interface builder open the size inspector for UI elements and modify the iOS 6/7 deltas. These values are applied when the storyboard is not run on iOS 7. For example, in your case you can select all your visual elements, then set the Y delta to -44, which is the standard navigation height. That will make the UI go up on iOS6, compensating the fact that the view doesn't go under the navigation bar.