Need to reuse the react-navigation code from mobile to react-native-web. But I could not able to get it work in web.
Should we need to use react-router for web separately?
How can we configure navigation commonly for both platform?
I would love to see an example of this! It would be super helpful. Thank you!!
The above answers are quite old now I'd say as react-navigation has upgraded itself quite a bit since then.
react-navigation v4 has intensive support for react native web, now you don't need to maintain two separate navigation objects for web and app.
This blog explains it in detail. https://codersera.com/blog/how-to-do-navigation-in-react-native-web-in-2020/
Maybe you can check this implementation
Using React Native, React Native Web and React Navigation in a single project
Related
I am working with designers on UI components. I am trying to find the best way for them to check React Native components without the need to use actual devices or simulators. Ideally, it will be web-based solutions.
I did some research I found the following solutions.
Expo snack - the issue is that the components are not publicly available (private npm registry)
React Native for Web - My concern is that component will not render correctly.
I am also considering using BrowserStack. But I can have similar issues as with the Expo snack.
Amazon Private devices I don't have a lot of experience with AWS. I need to check is posible to interact with the device using the web.
Any help with this will be very helpful. Is there some open-source solution that I can check?
Thanks.
I am looking into hybrid development. After some googling, it points to me that there are some potential in investing some time learning React and React native. Dont ask me about Angular, hated Angular due to its complexity. My question is does learning React helps in developing mobile apps with React native?
Regards,
Xing
React-native : This is Mobile Application Development(Hybrid mobile Apps)
React: This is Web Application Development.
Now in this Case those React and React-native Component life cycle Same.
but your using Some methods and components are Different then react to react-native. But mostly both are same. Except Components.
So , Finally if you are learned react and react native Definitely you will develop in this both.
But If you learned React you will Develop Only WebApps
Yes, when I started learning React Native, I had to get the concepts used in React. Basically you will take on React first, before proceeding into any offshoots. A solid foundation in the React style of programming will help a lot in React Native.
The following link is a good guideline. Read this for a start. And also the Facebook documentation for React. This may take some time, so if you have the time, you can proceed. Else try to cut it short when it comes to maybe webpack and stuff like that.
https://github.com/petehunt/react-howto
And then there are many tutorials in React Native. You can again start with the Facebook documentation for that.
I converted React Native app to web app using react-native-web, but there is a problem to convert Navigator. Does anyone know how to convert it or replace it with something familiar so I can use it on my web app ?
The only thing we've found that provides a single navigation interface across all three platforms is React-Navigation. Otherwise, you're looking at using one router for web and another for native. Possible, but very sub-optimal.
The downside is that to support all three platforms, you sort-of have to work from the lowest-common-denominator, which is the native style of creating imperative navigation stacks. If you're used to react-router, or the Angular router, you won't love it. And... it's still an early project, with some gaps in docs, api, etc. On the other hand, it's backed by some central players behind React-Native, and is progressing quickly. And it works.
I am going to develop a web + mobile application using React and React Native. I'd like to share as much code as possible between React and React Native. I was looking for some starter kits, but found only este. However, for me, it seems to be an overkill as it has too many dependencies (also I wasn't able to make it work for Android - when I fix some error, I run into another one).
I'd like to have just React + React Native + Redux + web bundling etc. Are there any other alternatives? Or at least very simple example apps that I could use?
Did you check the awesome React-native list ?
As I said in this thread, as long as you follow the component / container pattern with Redux; you are able to reuse a lot of code.
The pattern encourages you to separate every presentational code into the comopnent. The container holds all the logic.
Then when you want to reuse the code, you just have to rewrite the component.
Here is a great explanation on how to implement it.
Also, you may want to check React-native-web. It allows you to code in react-native for the .... browser.
Update: I now know why there aren't almost any starter kits that would combine React + React Native. The reason is that it is not a good idea to combine web React and React Native. Just create two separate apps, you'll save yourself a lot of headaches. For those still interested in combining the two platforms, have a look at React Native for Web instead.
So in the end, I've created my own started kit. You can find it here: https://github.com/gina-system/react-starter
why do not you check out https://github.com/teallabs/react-native-init
pretty amazing react-native starter kit with codepush, google signin, sentry, react-navigations and all setup steps.
Im trying to create an application targettng both web and mobile. The idea is to create react components that differ on how they render but share the logic.
React v.014 blog post stated "we’re splitting the main react package into two: react and react-dom. This paves the way to writing components that can be shared between the web version of React and React Native.
The react package contains React.createElement, .createClass, .Component, .PropTypes, .Children, and the other helpers related to elements and component classes. We think of these as the isomorphic or universal helpers that you need to build components."
I've found a great example (http://blog.benoitvallon.com/projects/a-mobile-desktop-and-website-app-with-the-same-code/) that uses the same concept and accomplished the result (react-native 0.13.6 and react 0.14.2).
In this code, you will see nothing special just a smart idea on how to extend react-native naming conventions system to include a web version. The minute I upgrade to latest react-native, it complaints about any component that uses React.Component from the react package instead of react-native.
This is confusing since 0.14 release seem to indicate that was exactly the point moving fw. Let React create components, let react-dom deal with the DOM and let react-native deal with ios/android views.
I think this is a brilliant idea but I cant seem to pass this particular problem. Any thoughts, ideas will be greatly appreciated.
Thanks
The transition to make react native work this way is underway but incomplete. See AMA.
We are working hard to stop using our fork such that people can use require('react') and work the same as require('react-native'), this will make it possible for all the third party plugins to work on both places without doing anything.
Right now we can't use relay on the open source version of react-native without forking it, which is a huge shame and we're working on fixing that.