I am building a simple React Native app.
I was originally using navigator.push() to go to the next scene but felt like it was not quick enough.
I then decided to create a preset route stacks for each part of my app (i.e. login routes, settings routes, etc). This speed up the transitions really well within the route stacks; however, when I use immediatelyResetRouteStack when switching between the route stacks, it goes really slow.
(I also tried to do a really really big stack at the beginning but it took forever for my app to load.)
Is there a better way I should be doing this?
Related
I am fairly new to React Native and I am building an app that will be using navigation. I have a solution for navigating screens that seems to work just fine however I do not see many people using this approach. I am using state in a navigation component to render a specific screen(or component).
The main solution(the documented solution) I see is using this package
#react-navigation/native #react-navigation/native-stack
My current solution works like this:
const [screen, setScreen] = useState(0)
const returnScreen = () => {
switch (screen) {
case 0:
return <AccountScreen/>
}
}
When you click a menu icon, it would change the state to say 1, and render a different screen.
Can someone help me understand why this is a bad approach or an uncommon approach(if it is)? My app will only have 5-7 screens, I am mainly looking to understand why the library is the community approach and if I am missing something.
If you wanted the ability to navigate to other screens to exist outside your menu/drawer you will have to either prop drill your setScreen function or create a context to make it accessible to other components. While this isnt hard to do, it is something that all #react-navigation navigators do without requiring additional code.
If you wanted to enable going to the previous screen, your current navigation code becomes obsolete. Just returning a screen is no longer enough, as you need to track and modify navigation history. So you write more code that you have to test and debug (keep in mind that #react-navigation/stack already does this).
If you are certain that your app will remain small and your navigation features wont increase too much then your approach is completely fine. But if your app will increase in size then you probably will find yourself implementing, testing, and debugging features that have already been implemented, tested, and debugged by the #react-navigation community
I've been thinking of which long term solution navigation library to use for react native. I'm comparing react-navigation and react-native-navigation (both their version 2) as of the moment.
My criteria would be stability and performance. Any suggestion which one to use?
React Native Router Flux https://github.com/aksonov/react-native-router-flux offers great integration with Redux and I have never experienced any stability issues. The major issues I did encounter where though:
Customizing the Navbar was a pain
Handling the Android Back button required me to implement a routingUtility which checked the currentPage and then performed Navigation. It also has a lot more activity with far less issues and pull requests and is more frequently updated.
After transitioning from React Router V3 to V4 I can no longer get the React Transition Group Low-level API to work. The documentation of React Router shows an example of the High level API with CSS animations which do not work with the Low level JS flavor.
Anyone managed or knows to get this to work?
It's been a month so I guess you found your way around, but it may help others.
I created this : https://www.npmjs.com/package/react-router-v4-transition after I encountered the same problem.
It provides a kind of transition-group in a switch component. Appart from changing your Switch to TransitionSwitch, it shouldn't require big changes.
I'm going to publish an update in the following days, probably Monday, that solves a little issue with the components implementing the lifecycle hooks.
Navigation Experimental, Navigator, Flux-style Navigation etc. etc. There are so many theories and options out there. I know, this is a question with a very high "it depends" potential. But maybe some of you have already figured out an absolute favourite option to handle navigation for react native apps.
I'm a redux user and use https://github.com/aksonov/react-native-router-flux/ . You can integrate it with redux. React-native-router-flux is also usable without Redux.
The advantage is that the Navigation API doesn't change as much as React-native's does. There is also pretty good community support.
If you start application you can use this starter kit https://github.com/infinitered/ignite. This starter kit contain redux and React-native-router-flux. And more
features (Battle Tested, redux persist, ...)
I'm starting with react native and I have a little experience with React, Because of that I want to use redux, react-router, and react-router-redux, which I have used in the past for a web React app.
All those packages can be used in react-native, except for react-router, the closest I could find is react-router-native which seems to work much like the browser version. So far so good, I made a quick and dirty app to test the router, redux, etc.
But I'm having some issues I can't figure out how to solve or debug: When changing the visuals like the text or some styles, the HMR seems to work fine, applying the changes in real time, but when I change some other module/file, like the container element (where the redux connect() function is called) or some code on the reducers, the HMR doesn't change anything and I have to reload all the app to see the changes.
Here is my code: https://github.com/DenJohX/test-react-router-native It basically just changes the color of some text by toggling a variable in the redux store. Sorry for just linking it but I think its better to show you all the folders and project structure, maybe I'd just goofed something in there or didn't use the correct folder structure.
I'm using https://github.com/jhen0409/react-native-debugger to debug the app, and by the console messages, the HMR does run and patches something but without affecting the current loaded code.
To test the problem, try to edit the colors in src/screens/pageOneContainer.js, the HMR should change the code, re-render the screen, and show the new colors, but they just stays the same.
Thanks in advance.