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
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 have a StackNavigator, and I have a screen for creating new content on my app. Once the content is created I push to the screen for the content. At this point I can still create new content from that screen, so it's possible to push a new create content screen. But if the user does a GO_BACK, or swipes i.e. POPs back, I want them to skip the previous create content screen.
I think it's fairly common behaviour where you want to selectively skip screens on the way back. I've looked at the docs to try and figure this out. The easiest looking fix was the auth-flow. That skips the screen going back, but it also stops you pushing the screen if you take it out of the navigator.
The current best approach I have is to use a custom stack router, and in getStateForAction remove the create content screen from the routes whenever the user is pushing away from it. The downside on this is that there's a janky animation on iOS pushes from the create content screen, as the create content screen is sliding out it's also sliding up (I guess because it's being removed).
Is there a recommended best way to do this?
On the previous create screen use navigation.replace("ScreenName", {params})
I have used text input in creating a search bar on the 'HomeScreen'. Whenever I click on the search bar, it takes me to the 'SearchScreen' where text input is focussed.
In both screens, I have placeholder "Search" in the text input. The problem I am facing is that the placeholder flickers whenever screens are changed. This happens all the time if/when text input is re-rendered.
I want the placeholder to remain static there for smooth transition between screens. Please let me know if you have any idea on how to erect it or if you have any suggested workaround.
Take a look at this library Fluid Transitions. This library helps to create smooth transitions between screens and shared components. Thus, you can go from screen A to screen B maintaining you search bar input intact or at least keep it with a smooth transition.
Another idea is... Do you really need to move to another screen when focusing the search bar? Is it possible if you just create an SearchList component that "shows/hides" a FlatList (for example), when the user focus the search bar, it will change to another screen when the user clicks on a specific result.
I am using react-native-router-flux and here's some observation, previously I was using .replace() for switching scenes, this time I used .push(), customizing it to not show any animation and now search does not flicker when popping the search screen, however, it does flicker on pushing search screen onto the stack, seems like the re-render is causing flickering (as pop does not trigger a render but push does).
It's best to avoid using the placeholder as for now until the problem is sorted in react-native itself.
I am trying to find StackNavigator's to UINavigationContoller's popToViewController(_ viewController: UIViewController, animated: Bool).
According to the docs goBack() only ever goes back one position, the argument you pass in is where you are going back from rather than where you want to go back to.
There are no tabs or nesting of navigators just a simple A->B->C->D->E with the ability to go back to any of the previous screens from E.
You could actually make use of the navigation.navigate function
Another common requirement is to be able to go back multiple screens
-- for example, if you are several screens deep in a stack and want to dismiss all of them to go back to the first screen. In this case, we
know that we want to go back to Home so we can use navigate('Home')
https://reactnavigation.org/docs/en/navigating.html
As per docs react navigation doesn't provide a way to pop to a desired screen. For that you can refere this hack
https://medium.com/handlebar-labs/replace-a-screen-using-react-navigation-a503eab207eb
I recently implemented navigation in my app using NavigatorIOS in React Native. However, I think I've encountered a problem. Say I have 10 nav buttons on my home screen. Correct me if I'm wrong but I'm assuming (since I haven't done the backend yet) that if I use the first button to navigate to the next screen (let's call it Second.js), wrote/saved some data, and then went back and navigated to Second.js with the second button, that data from before would still be there? If so, is there a way for each button to navigate to a different "version" of the same screen? For example, could each button go to its own version of Second.js so that each button has its own local data in its Second screen, or would I have to make Second1.js, Second2.js, Second3.js, etc.? If the former isn't possible, I'd need a fixed number of nav buttons, plus a lot of memory is wasted with all these new classes that are basically replicas of each other. Thank you!