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.
Related
I would like an update about this previous topic.
At the time, react-native-navigation seems to have way better performance than React Navigation.
How is it with newer version?
For exemple, the use of StackNavigator slows my App besause of the pushing views, I prefer use this.props.navigation.replace('NewPage') than this.props.navigation.navigate('NewPage') for better performance.
But I heard about react-native-navigation and was wondering if the difference in terms of performance was really relevant.
IMHO, react-navigation better than react-native-navigation. I did have a lot of chances to compare them (long 2 years in RN development). React-navigation now is pretty fast, and if you develop right with redux and etc, you will not see the problems with perfomance. BUT on other side react-native-navigation is more native and it will bring a lot of crashes to your application for sure, because underhood there a lot of native code with native problems. It is easy to mesure by count of issues on github pages.
For me react-native-navigation is better than react-navigation. And it is not just about performance. If you value native feel in your app, then there is no any other options for you, because RNN have built-in native features that your users will expect from you, like transition animation on back swipe, Peak and POP, or Shared transition (react-navigation have third party package for that, but third party means more issues). Without this stuff, your app will feel hybrid instantly. Not to mention that there is always a possibility that OS manufacturers might implement new native features that will be popular, and your react-navigation app will not be able to support it. Also I have an app with 100K downloads and RNN V2 never caused a crash in production.
For me developing with RNN is more enjoyable. RNN creates a new App Root for any screen or modal or overlay, so it is easy to implement and use components like snackbars or spreadsheets - you don't need insert a components everywhere you want to use it. You just imperatevely call a modal/overlay with navigation api from any part of the app and you don't need to worry about passing a redux method or reference to snackbar or modal.
From my experience with React Native - use native modules instead of JS whenever you can
I am creating React Native App for mobile on Expo.
When we try to make mobile Apps, we should usually manage state in this app.
However, I am using Expo. Of course, Expo is useful to start React Native App easily and quickly but sometimes Expo cannot accept modules.
So, in this case, I tried to use Realm to manage state but Expo can't follow this.
Could you teach me which way for state management is better in React Native on Expo?
There's a few ways to go about this, two of which I know and have used:
AsyncStorage: This is default with react-native and you won't need to install anything to use it, here's a few tutorials and documentation on it.
https://facebook.github.io/react-native/docs/asyncstorage
https://medium.com/building-with-react-native/what-is-asyncstorage-in-react-native-and-how-you-to-use-it-with-app-state-manager-1x09-b8c636ce5f6e
https://medium.com/#richardzhanguw/storing-and-retrieving-objects-using-asyncstorage-in-react-native-6bb1745fdcdd
React-Redux: This is something I use a lot more, it utilises AsyncStorage but allows you to create a better storage flow and a system of persisting data so when you close the app and reopen it, the data will still be there. I've found React-Redux to be a lot easier once properly learned, here's a few documentations on it.
http://www.reactnativeexpress.com/redux
https://alligator.io/react/react-native-redux/
https://medium.com/#relferreira/react-native-redux-react-navigation-ecec4014d648
A quick google search on either (react native using react redux or react native using async storage) will give you quite a few documentations/tutorials that is quite useful and you always have Stackoverflow, if you're ever stuck.
there are multiple ways
redux (https://redux.js.org/)
mobx (https://mobx.js.org/intro/overview.html)
react context API (https://reactjs.org/docs/context.html)
for small apps, i prefered use react context and for an app with a large scale I using redux
Is there any way to create a sample login page and a home page in React native without using stack Navigator?
Yes. You can create your own navigation. Even react-navigation is a library built by components. If you are building your own navigation it will take more time and effort.
There are several navigation solutions are available for react-native. You should use one of this unless it is not fitting your need.
Some of the popular navigation solutions,
ReactNavigation - Js implementation
ReactNativeNavigation - Native implementation
React Native Router - Js implementation
An advantage of using navigation solutions out there is they got 100s of contributors. The solution is made by more than one person. Unity is strength. These libraries are updated frequently by adding more features and fixing bugs.
Using one of these solutions(libs) is a wise choice up to me.
Still, you wanna build your own navigation. Please follow Build Your Own Navigation
The only reason I can think of using Native Navigation is when I have more screens & JS based solution like React Navigation will keep all the screens in memory. Now I am not a native developer so the above thing might be vague.
I'm one of the contributors of react-native-navigation. This question was a commonly asked, and I have written an answer before (as react-navigation VS react-native-navigation).
React-Navigation is Javascript-based navigation, that means all the navigate happen inside of single Activity (on Android and iOS counterpart).
The good part about Javascript based navigation is they will work on most platforms. But they usually suffer from performance issues due to stacks everything in the same activity.
React-Native-Navigation on another hand is actual native navigation. Every screen has its native container that handles native system. Better optimize better performance at the cost of deep integrate for each platform.
Hope this help.
I have a full blown mobile web app using the following:
React
Redux
Redux-React
React Router
Firebase
I eventually want to convert this mobile web app to a mobile app and I am looking into using React Native. There is a lot of literature on how to build React Native apps from scratch or to convert a native app in Objective-C to react native but I am struggling a bit to find some prior-art of how to approach taking a mobile web app towards native.
More specifically, what are the things that wont work out of the box? I am looking at React-Router.
Some thoughts around how to start transitioning, what to touch and what to not worry would be very helpful.
UPDATE:
Imagine the following app structure. Its already a lot of code. So, I am wondering if there are approaches to do this incrementally?
Many folks are porting their React applications to React Native incrementally by using Web View as an initial 'foot in the door', and then using React Native views on a flow-by-flow basis. With the recent availability of react-native-webview-bridge ( https://github.com/alinz/react-native-webview-bridge ), two-way communication between those web views and the react native components is now very easy.
There can be performance issues when using Web Views on iOS versus the regular Safari app, so that may force certain UI flows to be converted to React Native before you can ship.
I'd highly recommend translating any Selenium tests to Appium to keep your automated test coverage up. React Native is still a bit volatile, and being able to upgrade quickly and safely will be highly dependent on having an automated test suite.
Be sure to have your API (is you have one), your reducer and your action outside of your web folder, because you'll be able to use them in your mobile app.Most of your app structure will be the same, except for the react-router. Like Jan Fanz Palngipang, you could use react-native-router-flux (which is the one i'm using)
I would recommend you to check starter kit like nativebase, rReact Starter Pro to see how their drawer is working.(see how they change container)