I was testing out the Navigator component and I was trying to use its navigationBar property. I want it to appear on top of the "content" instead of below it, the only way I found to do that is by using position absolute, but that way I need to set the top of the "content" as well (requiring me to make a fixed height navigationBar plus unnecessary boilerplate code). Is there any other way to do this?
Related
I am trying to make the bottom sheet touch the bottom of the screen rather than the bottom of the tab bar.
screenshot
Attempts to increase the z-index and position it further down are fruitless as the View will not overlap the bottom bar, it will always go behind it.
I tried to wrap it in a Modal component, which fixes the alignment, but then you can not interact with the map.
To create a custom bottom sheet. You can use this package
react-native-actions-sheet
I have used this in many applications. This will resolve all of your issues. As this package is comfortable in iOS and android both.
You can try the bottom sheet libraries which are present in react native. Few of which I have used is:
react-native-raw-bottom-sheet //my choice
react-native-actions-sheet
You can also check this out
Before I begin trying to build something I want to check my strategy.
I think the best way to define what I would like to achieve is to build a component using a FlatList that adjusts fontSize dynamically based on the size of the View (or other more appropriately defined size limiting area) in which it is being displayed.
For example, let's say I want a FlatList of items (of data returned from an API call) that displays full-screen on Screen 1 of my app, but in a small corner of Screen 2 of my app. Here's a quick mock of the behavior I would want:
It seems like the alignment of items, flex, other styles could be written so that the proportions/positions stay the same regardless of parent view in which the FlatList is displayed, so I might only have to adjust fontSize.
Can this behavior be achieved using a FlatList and a reference to a dynamic fontSize? If so, where should the "awareness" of the parent View be stored/passed?
I'm looking for general input as to how to achieve this simply, with or without FlatList. I like using FlatList because of how well it works off the shelf for my simple tasks. Hopefully I'm not trying to make it do something it cant.
Thanks!
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'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'm using React Native 0.14.0 to develop an Android application. Currently I'm using the ToolbarAndroid component to add a toolbar on top of my scene, but it is not kept between scenes. I found that the Navigator has a navigationBar property, which can be set to a Navigator.NavigationBar component, which should include an object dealing with the title and left and right buttons of the navigation bar. See the official example to understand what I mean. As there is little documentation on this part, I have to rely on the example to set the navigationBar properly.
This Navigator.NavigationBar is not as powerful as the ToolbarAndroid, as itdoesn't automatically have space for the logo, for example.
Is there any way to use ToolbarAndroid with the navigationBar property of the Navigator?
Not really. The closest you could probably get is to wrap the ToolbarAndroid in a component and map the navigator left, right methods to the onIconClicked functions. But that defeats the purpose as you are probably most interested in the ToolbarAndroid's UI.
You need to pass a component that will behave something like the Navigator.NavigationBar. If you can drop in a component that will play nice and provide some of the expected props then it'll work.