Applying Browser History to a ReactStudio Project


#1

I have been using React Studio for about 2 months now and it is amazing. It saves me so much time than manually coding and converting designs as well.

One thing that I haven’t done with React Studio is to implement browser history. I know there are modules like react-history (https://www.npmjs.com/package/react-history-router) that can wrap components…but is there an inherent feature in React Studio to enable browser history. A lot of users are more familiar with hitting their browser back button than pressing the back button in the app.

Any help with this would be appreciated.

Thanks,
M


#2

Hi, thanks for the kudos.

Unfortunately we haven’t done anything experiments regarding React Studio and React routing or browser history.


#3

Hi Antti. I’m sorry for the sincerity but you guys really should care about this issue. This will make RS more powerful. This is not only a simple technical issue, far beyond, we are also talking about delivering the best user experience. Otherwise, app build with React Studio will give users an unfamiliar, inconsistent, and fragile experience. When a user presses the browser’s back button they expect to navigate just like any other app or web app.

Some other problems you can have not been able to have url for your screens - If plan to use Facebook login, Facebook will ask you to provide the url for Privacy and Terms to go live. Otherwise, you see “You must provide a valid Privacy Policy URL to take your app Live.”

Best wishes, Marcos


#4

Hi Antti. Thank you for the quick response. I exported my project to React Code and it seems like you have comments in the code that state and routes can be added in through plugins. Do you have any suggestions that work with the React Studio framework? Easily applied rather than gut and switch?

So recommendations I am looking for would be like redux for state management and react-history for routes. I am thinking of trying to make a plugin to manage at least of these scenarios.


#5

Hi,

Just a heads up on this matter! We’re working on this and will publish beta build for Studio with React Router for you guys to test out.


#6

Awesome! You guys rock. Thank you RS team!


#7

Sounds Great! Let me know how else I can help with the beta test.


#8

Here’s a link to the beta build that implements React Router:

https://s3.amazonaws.com/sc.neonto.com/ReactStudio_v1712_build376.zip

If you are using Firebase in your project you need to update the Firebase plugin too:

https://s3.amazonaws.com/sc.neonto.com/Firebase_ReactStudio.plugin_ver22.zip

Please note that this is a quite big change and it might break something. We recommend you to backup your project file before starting to use the beta build!


#9

when you will release a new official build?


#10

We’d like to give a little time for React Router before we release it officially. We’d appreciate if you could try the beta build with your projects and let us know if something breaks. Just remember to backup your files!


#11

Have you had time to test your projects with the demo build?


#12

Yes, at the moment i have no problems…


#13

Me too. So far, so good :slight_smile: Great job React Studio Team. You can use it, and it will work effortlessly and seamlessly.


#14

Important: It makes sense. Avoid naming screens with spaces, otherwise, it won’t properly.


#15

Hi. Apparently changing component’s own state is not working in this beta version.
this.setState({visualStateIndexOverride: 1})
Has anyone seen the same bug?


#17

At least on my demo projects Change state works. Could you zip and send (here or via email) an light example demo project where it doesn’t work?


#18

I’ve checked it again, and it was tested on a screen, not a component. Maybe this is what’s happening, I guess.


#19

Antti,
is it possible to choose if this feature can be enabled or no?


#20

We’ll probably force enable it because I don’t see many reasons when one would not want the router and leaving the option available would probably make the code generation much more complex. The free version is something which should work for most use cases and if someone wants some special use cases then we build custom versions.