I know theres a lot of similar questions/answers about Fast Refresh being broken. Mine's a little different I believe. I can point to the line that causing it to be broken, and I'm trying to understand why.
Package.js:
"react": "^18",
"react-native": "0.70.3",
"#react-navigation/bottom-tabs": "^6.4.0",
"#react-navigation/elements": "^1.3.6",
"#react-navigation/native": "^6.0.13",
"#react-navigation/stack": "^6.3.2",
In the app we have three layers navigation stacks (using react-navigation)
• Parent Stack Navigator
• Authenticated Stack < Problem is here
• Tab Navigator
• All other stacks
useState() or some form of state management exists in all three of the stack/tab navigators. and fast refresh is currently broken. However, if I remove ALL of the useState() calls from the Authenticated Stack then fast refresh works throughout the app as expected.
I've go so far as to delete all state calls except for the one below, AND it's not even referenced in the file and its still causing fast refresh to be broken. If I comment it out, everything works as expected.
const [isChatClientReady, setIsChatClientReady] = useState(false)
Has anyone experienced anything like this? Or have some advice on where to look?
Thanks!
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 wanted to start updating my react-navigation dependency from version 5.X to version 6.x but I'm running into problems regarding an accessibility setting that is hardcoded in the codebase for their bottom tab bar.
In their BottomTabBar.tsx they have a view that looks like the following
<View accessibilityRole="tablist" style={styles.content}>
And this results in the error below
It made me think it was a bug in the library but somehow I was not able to reproduce the same issue in a expo snack. Changing the value for something else like "button" solves the issue but I don't like to mess around in the node_modules. Another solution would be to override the tab bar and write a custom implementation (I've tried this when worrying not to much about styling) but this kind of is a big overhead for something that appears to be simple
A new update to the library has fixed the issue for me, at the time of writing the answer the combination of packages below is what appears to work for me
"#react-navigation/bottom-tabs": "^6.2.0",
"#react-navigation/native": "^6.0.8",
"#react-navigation/stack": "^6.1.1",
This is my first attempt in react-native project, Does react-native-navigation have drawer inbuild? If so please share the documentation link please? Am confused to use react-navigation or react-native-navigation.
My requirement is all about navigation, drawer, tabber for screens.
Note: I need a native navigation to attract the users.
I used react-native-router-flux which have not much documentation but have quite good answers for all the workarounds. Also its not maintained now. SO indeed to select a new one.
For your first question, I should say that I always use react-Navigation and I like it. To hightlight one of my reasons I should say that "Being a JS-based navigator allows React Navigation to integrate smoothly with any of the third-party libraries, while RNN may suffer from libraries that are tightly coupled with native platforms or need to be wrapped around the whole app." You can check this link:
https://blog.logrocket.com/react-navigation-vs-react-native-navigation-which-is-right-for-you-3d47c1cd1d63/
For the drawer, I highly recommended this one, because it give you any option that you want and it is working perfectly on both iOS and android for me, while others always make troubles for me in one of mentioned platforms.
https://github.com/GeekyAnts/NativeBase-KitchenSink
Also if you want other elements and tools with a good performance, check this link:
https://react-native-training.github.io/react-native-elements/docs/overview.html
I hope I could help you.
I have seen a new bug in my app but can not get any solution.
In the app, ListView' data shown blank when running longtime in background mode. Though I did not use anything in setInterval().
Is there any solution?
I am using:
"react": 15.3.2,
"react-native": 0.37.0
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?