As shown above, I want to create this two-part screen where I can click onto both the A component and B component on the first view provided here. When a user scrolls B component, it may take up the entire screen and move over the A component. (A component does not move with the FlatList).
I'm new to react native and was wondering how I could create such behavior? I tried using absolute positioning and ListHeaderComponent inside the FlatList but didn't really get anywhere. Let me know if anyone has an idea.
Thanks!
I would try something like the following screen structure:
View
Image
ScrollView w/ trans background that goes to the top of screen
FlatList with top padding to push it below the image
Items in list
/FlatList
/ScrollView
/View
You could also see if react-native-parallax-scroll-view works for you as it looks somewhat similar to what you describe
https://github.com/jaysoo/react-native-parallax-scroll-view
Related
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.
how to move a view from left to right ( intially the view should be hidden and on first button click the view should come from left to right with animation ) partially (30%) and then on second click it should open complete .How to acheive this in react native ??
Not sure I completely understand what you are asking but it sounds like a custom navigation might be possible with the library react-navigation . Here is a detailed blog post that shows possible customizations: https://medium.com/async-la/custom-transitions-in-react-navigation-2f759408a053
Solution lays in your approach. Having a View with screen's width doubled, render your two react components, and take a look on how to animate the hidden screen. TranslateX would do the trick.
It would be better for you if you learn Animated. But if you have a deadline or something, react-navigation has drawer navigation. Or if you don't need navigation, there is a library called react-native-gesture-handler which has Drawer created for you.
I am creating a Listview with pagination. If i put the ListView within KeyboardAwareScrollView then onEndReached not called properly. But if i don't put the ListView within any kind of Scrollview it is working perfectly.
My problem is that the content above the ListView is quite big. If i don't put it entire view within any scrollview the bottom content will not be shown.
How to solve this issue?
Thanks in advance.
Sorry I can't put comment because my rep is below 50.
I'm trying to imagine ur situation based on the description because there's no snapshot of ur desired outcome and current outcome. What I understood is this:
If i don't put it entire view within any scrollview the bottom content
will not be shown
This may be just the problem of not putting {flex:1} in the outtermost container view
If i put the ListView within KeyboardAwareScrollView then onEndReached
not called properly
ListView is deprecated as per React Native 0.55 documentation. I don't really understand your scenario, but you might wanna consider just using Scrollview or Flatlist, they might have the solution that ur looking for in a different form. If you are looking for a solution so that your view would avoid keyboard, u could simply use KeyboardAvoidingView from react native instead of using a third party lib, because sometimes they could be restrictive.
All the best! :)
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.
react native, like the pictures below, the left part and right part is both scrollable, and when left tab is tab and right part follows, it's like 'react-native-scrollable-tab-view', but vertically, any suggestions will be helpful, thanks~
example pic1
example pic2
Have a look as this PR which gives vertical tab bar capability to react-native-tab-view.
Since it's created long ago and not merged, you might have to apply those changes on top of the current master branch to start using.
Maybe how you break down the UI in mind is clouding your judgement.
Seeing the example pics, I think they are more like two components.
The right component is a SectionList.
The left component is a ScrollView with just buttons with labels of section titles of the right component. The onPress() of these buttons just calls scrollToLocation() of the SectionList to programmatically scroll to the the respective section.