I am making a website using react-router v4 to navigate between views. So my layout have nav and footer, use Switch to switch different views.
I already add scrollToTop function to make it scroll to top between different views.I used the function from here https://reacttraining.com/react-router/web/guides/scroll-restoration
Let's say I have views Home and Solution. The problem is that inside the Solution view, I added another Switch ( child routes), so the path will be like this http://localhost:3000/solution/solution1.
So now when I clicked the child routes in Solution page, the page scroll to top which makes sense because the layout is wrapped by ScrollToTop function. But it is a switch tab, I don't want it to scroll to top, I want it to remain unchanged.
I tried to use ScrollToTopOnMount but no success.
Any ideas how to achieve this ? Thank in advance.
Related
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.
So QML StackView provides a way to navigate back by usin the pop() function. I am looking for a way to go the previous page by simply swiping to the right with UI elements following the fingers of the user (kind of like a SwipeView). How can I achieve this? I have looked around and all I found was this https://github.com/alejoasotelo/SwipePageStackWindow which is an old project that does a similar thing with the old PageStack.
One possible way to do this is to create a custom element called swiper that has a swipeview with 3 pages. 1 and 3 are blank but 2 has content. When page 1 is active, it allows all events to pass through unless a left swipe is detected. Page 2 has a loader So you can change the contents.
If you create two of these on top of each other you can move the one in front of the other whenever you need to switch views. Two loaders means the content will never consume too much memory.
So you'll have a variable isBottomActive
And one method
function pushNewView(view) <- this will move whichever swiper is not active to the front, put the view into it's loader and change currentIndex to 2.
Now if you need to go backwards you just swipe to the right. The swipers view index changes (you can tie a method here to make the old swipeview move back to the bottom with a different view as well)
I have this use case which is a bit confusing compared to the norm , and Im not sure how to structure it. I have a screen (tabs) with 4 tabs .
The thing is that the contents of each tab (their screens) are actually in One big page, when scrolling down the page and it reaches the contents of Tab2 , the tab should change too to Tab2 (its not actually a screen change) .
Now initially I have used react-navigation and it's tab navigator. But here Im not sure if this should use tab navigator. The questions that arise to me (from the top of my head):
Q1) If we wrap the components (each tab's screen) in a parent one. How do we go about detecting where the scroll reached! (or something that notifies we are viewing contents of tab2 and so on...)
Q2) How can I handle the animation of the tabs (especially the line under them as shown in the image) to transition back and forth?
Q3) Is there a better way to do this! (better than my initial thoughts above)
Q1. You must use the TabNavigator to avoid the problem as you asking in Q1. So you don't need to worry about the Scroll.
Q2. I recommend using StyleSheet, create a CSS style for line bar then maybe you just need to call a function to set the CSS of current tab or use the navigation options.
Q3. TabNavigator is a good option here and it belongs to react-navigation.
TabNavigator
Animation example with custom function
--- Update ------
I have created an example project for you to solve the problem, I'm not sure if you're doing the same.
Check the Scroll.js, I added a function Callme that changes tabs when scroll reaches to end.
To detect the Scroll reaches to end or not, I have used the isCloseToBottom from another StackOverflow answer.
Follow the following link to Github project.
Change-Tabs-When-Scroll-End
Thanks
_Pradeep
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
I'm trying to implement scroll-then-fix using NavigationExperimental. (Medium android app implements this.)
First I need to make NavigationHeader scroll with the content instead of fixed at the top. And the Navigation fixed at the top when scrolling to certain position.
My first attempt is let NavigationHeader listen to the scroll event of the NavigationCard, here's the problem:
How do NavigationHeader/NavigationCard communicate each other? NavigationHeader needs to know the scroll position of the NavigationCard to change the state. But they are two separate components.
Or maybe there's an smarter way doing this? Thanks for your help!