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
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 want my screen's header to scroll along with the tabs, Each of the tabs has infinite data so I am using FlatList to display it.
The problem is if I am displaying the header in simple View then that part doesn't scroll with the tab.
I tried to put the scroll view on top and then FlatList into it but that again is a performance issue.
Please suggest an optimized and better solution for the following.
I am using the latest versions of react native and react navigation.
Following the example of this docs page from React Navigation, I created a nested bottom navigation system for my React Native app (simplified version of my code can be seen and tested here). However, I have noticed that the icons for the pages shown in the navigation bar are the typical question mark symbols (on iOS) that show when the image is not recognized:
However, if I use a simple navigation bar, with no nesting, the icons are shown no problem. Any ideas on how to fix this?
I found out what the problem was: I was adding the icon into the deepest (second) layer of the navigation bar. When using nested navigation bars, the icons must be placed in the highest level navigation layer. Here is a working version of the previous example, with the appropriate correction.
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 Router Flux and have a bottom tab bar. I have a screen set up with a lot of links to other screens on it. If the parent scene isn't added to the tabs, I'm unable to route to it.
I've looked through the documentation and tried various options and styling. I think the easiest option would be to apply a width of 0 to that particular scene group, but it isn't available with View styles.
I want to be able to hide the parent scene so it isn't showing in the tab bar. At the moment, nothing is changing and the item is showing in the tab bar.
Figured it out. The problem was that I had the child scenes nested within a parent scene. When I removed them from the parent and outside of the tabs, it worked perfectly.