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.
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
The problem seems easier but not working, im working over a spa on webview for apps.
So for example, in some cases I start the web with a main route, like 'localhost/path1/path2'.
So if they press a custom button in topbar (custom component), it goes to 'localhost/path1', here perfect.
The problem is when they press the native back button, or the back arrow in desktop (native).
What happen here is the app is closed or the url is empty in desktop.
I tried to force a push in many ways on load vue with many paths, but not working, I tried to intercept native back and force push to avoid close first time with many paths, but not working anyways.
If someone understand what Im saying and a solve for urls with path/id, and after native back just keep path, instead of close I hope you can help.
Thanks
I have been trying to fix this weird problem I am facing with React Native/Expo. I was working on an Authentication page. It is a simple username and password input form. It was going okay for a few weeks until yesterday when the TextInput component started lagging. The weird part is it only lags in my device (Iphone X). When I use a virtual device, it runs fine and there is no lagging when I input something in the TextInput.
I also want to mention that it is not just my code but if a component has more than once TextInput, the TextInput becomes laggy and super slow when anything is typed.
I have tried:
Restarting my phone
Deleting the expo app and downloading it again
Running the app in production mode
Nothing seems to work and the component is still lagging. Has anyone else faced such problem? I have created this simple snack:
https://snack.expo.io/#ayushdev/9d2af8
The issue still persist in this simple snack too.
You should try state colocation here. Other things constant, that is expected to give you at least some speedup.
Separate out the different InputText components in your form, each updating their own states only. This ensures that the entire form is not re-rendered as you change the input in just one of those fields.
Has anyone else ran into this issue? I'm working on a react native app and hot reloading with state works fine using react native debugger and redux devtools, but once I make a change within a higher order component or make a change to a component that uses a higher order component, my redux state disappears from the devtools and everything needs a hard refresh. When I make changes to files without higher order components everything works as expected.
You need to make sure that the root of the app is wrapped in the store / hot-module
The live reload feature in react native is neat. But there's one problem. When my app reloads--every time I change the code--the route is reset and it navigates back to the home screen. This is especially annoying if I'm working on a feature that's five or six screens deep. And reloading manually does the same thing.
Is there any way to have it automatically reload the same route it was at before the reload? As a point of comparison, this is not an issue in ionic livereload.
Thanks.
Update: HMR (hot module reloading) shipped with RN 0.22 a few days ago, and this is now possible.
This is just the way the live reload works. It reloads all the js and thus you lose all your state. You could probably hack around it by saving state to disk or somewhere else that it will persist across reloads but I would recommend against that. I keep a close eye on commits in the react native repository and there has been a lot of activity around Hot Module Reloading (HMR) which allows components to reload themselves with new js without reloading the entire app. This will give the exact thing you are looking for. I am not sure if this will land in 0.18.0 that is about to release or come out in the next release after that.