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.
Related
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
Can anyone tell me why when I use my app, every boot up has a lag when loading my images and vector font icons? It probably only lags for a second, but it looks really bad.
It can't be the sizes of them because even the vector icons have about a second lag. Is there any way to prevent this
Would this have anything to do with it being connected to Expo?
You can resolve this by caching your assets while the app loading screen is still up: https://docs.expo.io/versions/latest/guides/preloading-and-caching-assets.html
Nevermind I found out it's an Expo thing. They strip all of the local images and put it in their cdn before building the app. Take note if you have an app in production using Expo
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.
What we want
We use react-native-router-flux in our application and find ourself in a situation where we need to reset the navigation stack (at least) for one tab. This is our scene structure:
tabs
listTab
listView
recordingView
creationTab
recordView
descriptionView
publishView
Concretely, our application lets users create and view recordings. There's a listTab, with two sub-scenes (list of recordings and view a single recording) and a tab for creating (creationTab) recordings with several steps (recordView, descriptionView, publishView). After the last step, the recording is published and we redirect to the viewRecording scene for that recording in the listTab.
When pressing the creationTab again, we would like to get back to the first scene of the creation process again, but instead we of course land on the last step (publishView) again.
What we tried
After reading through the documentation and issues connected to this, we figured the option reset might help us. However, if we try to add type='reset' to the props of creationTab, when pressing the tab, all other tab icons disappear (as documented in this issue).
So instead, we then tried to set the type of our push from publishView to recordingView to reset, but that also did not work (although the right action is dispatched and the back button is removed on the new scene, when hitting the recordingTab icon again, we still get back to our old publishView).
We also though about using Switches, to unmount the components but it doesn't seem like this is how they were intended to be used...
Versions
react-native: 0.30.0
react-native-router-flux: 3.32.0
We're now getting a bit desperate after days spent on issues like this and similar ones and I am not sure how we should proceed. Has anybody experienced similar problems or found a solution?
I faced the same issue. As a temporary workaround, I do not use the reset option but instead follow the redirection immediately with a pop action.
In my case, my view is only one level deep so this is not too dirty. I'll look for a cleaner solution but I hope it can help in the meantime.
react-native: 0.35.0-rc
react-native-router-flux: 3.35.0
I activated hot reloading and it's not hot-reloading. When I make a change to any Javascript file, the Packager re-runs and the simulator puts a gray bar at the top saying "Hot reloading..." for a few seconds.
But that is it. The behavior of the app doesn't change and the debugger (in Chrome) shows the unchanged file.
I'm somewhat at a loss. Any idea how I could track this down?
The hot reloading according to the developers is still in development phase and is quite buggy. You could always do a full re-run of the app but the hot reload works like a charm sometimes and not at all otherwise.
https://facebook.github.io/react-native/blog/2016/03/24/introducing-hot-reloading.html
Word of warning: because JavaScript is a very stateful language, hot reloading cannot be perfectly implemented. In practice, we found out that the current setup is working well for a large amount of usual use cases and a full reload is always available in case something gets messed up.