I'm developing a mobile app with react native, and i'm stuck to make a Visualization like the Image.
I can't get it to work with the ScrollView (witch wraps everything) and the SectionList itself (with tabs).
I need the Tab navigation to stick on the Header while scrolling and continue the scrolling to the sections.
I'm using this library https://github.com/bogoslavskiy/react-native-tabs-section-list, but i can't get it to work.
Image
Have someone ever done 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
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 tried react-navigation-collapsible but it does not support tabs due to react-native#21801
similar question Animating a single View based on multiple ScrollView(s)
React native animation scrollview onScroll event not working with external method
You can use this one for having tabs in the header.
https://github.com/netguru/sticky-parallax-header
It can be implemented in this way.
https://snack.expo.io/#waheed25/89a9dc
You can follow this one.
https://medium.com/#andi.gu.ca/a-collapsing-navbar-with-tabs-in-react-native-e80790588830
Im trying to create a view with an animated shrinking header with a tabview that contains tabs with flatlist(such as google play). See Image.
I'm using react-navigation with a TabNavigator. The header is a component with a fixed height, currently above the TabNavigator. The header is fixed above the tabs all the time taking precious space.
I've tried React Native: Animate shrinking header with tabs but I can't get it to work because I gonna integrate flat list in to tab.
This article is using scrollview in tab panel.
Certainly, I am looking for solution for using flatlist.
The Yelp app for iOS is designed such that after you enter and send a search query, something like this comes up:
The screen consists of a map control in the background, with a screen on top displaying a list view that you can swipe up/down depending on whether you want to see the list/map (respectively).
How would something like this be accomplished using React Native? For example, would the React Navigation or React Native Swiper libraries help me superimpose a list view on top of the map control?
You can use PanResponder.
Here is a good article which ay help you. Click here.