I've been digging deep in React Native for the past week to decide if I and the team should adopt it. And I gotta say it seems promising. I've also learned about its ability to integrate with existing native projects and its incremental adoption to change existing native projects.
My question is what are the cases/reasons that would make me wanna convert my completed old native projects (iOS/Android) into React Native?
Edit: Just to clarify, our team is currently building native apps only.
It depends on what type of app you are building. But you can always use bits of code from native or react native. Since you all can code in native, anything you cannot find you could make a native component.
The advantages of React Native show up with code reuse between iOS and Android so that your team can iterate faster working together. Many big apps have achieved 80% or more code reuse.
You will find flexbox so easy to quickly create views to specs and to change quickly with styles. Plus they are all in code and that plays nice with git.
See edit below:
Now in saying this I have never used React Native inside a native project but to call actions and such you would need to expose functions to call from the JavaScript side. I don't know if a singleton is generally used or just an import of the controller functions or delegated you want to expose but it has to call back to the native application . It is easy to use a native component inside a React native application and I have done this so I am sure it can work the other way.
Edit: Out of curiosity I added some react native views to a test project and it works surprisingly well. No singleton needed Javascript maps the view tag and the exported functions. Crazy. The concerns below still exist but I think if you are changing to change that is wrong but if you have UI changes you want to make then it could definitely benefit as your reuse can grow across your platforms.
Drawbacks I have seen- sometimes transition animations can be laggy if you are not using the native navigation methods. Using both native and React Native adds size to your app so you would need to keep an eye on that. Also start up time can hurt and so monitor that as well.
With all that said I have built a fair bit with React Native lately and it is, at times, beautiful and frustrating for a native developer.
Here is a great article on Instagram and React Native.
Also AirBnb heavily uses RN. They may be completely RN now but I am not sure. They do drive a lot of the outside frameworks in RN for example the maps component in RN. They also just released Lottie and it is very cool. Here is an article about AirBnb.
Related
I know that react native convert the element to their primitives in ios and android.
for example Button converts to UIButton in IOS and Widget.Button in Android.
but flutter control every pixel in the app and not convert elements to their primitives.
So what is the pros and cons of using primitives?
Haven't used React Native, but I've heard many horror stories about being able to get the same "look and feel" across platforms, and even working around bugs in same.
Flutter builds the widgets from pixels, and doesn't seem to have that same issue.
I'm looking for a navigation library for a new React Native project. I've read information on this 3 main libraries:
react-native-router-flux
react-native-navigation
"Standard" react native navigation system
I have read that the "standard" system is very buggy, is it true?
What is your favorite navigation library to date?
The most used navigation library for react is react-navigation as it is kind of simple to use, has a lot of features and can be customise at will.
react-native-router-flux is a wrapper over react-navigation, it is really simple to use and allows you to write a lot less code than with react-navigation, however if you want to implement complex features it might not be the best choice.
react-native-navigation aims to do the same things as react-navigation but... misses the point, as it clearly lakes some complex features that react-navigation has.
I suggest you to read https://medium.com/#ian.mundy/choosing-a-routing-library-for-react-native-604f97e58729 if you can, although that article is from 2017 it is still relevant !
You should give the Navigation router a try. It provides 100% native navigation on iOS and Android. It isn’t like React Native Navigation because it doesn’t require any native setup and has a JavaScript array representation of the native stack of screens.
I am writing a custom component for a Windows 8.1 tablet application our team are mostly developing in React Native.
I've realised that some of the custom code we need doesn't naturally belong to any specific UI element. For example, we want a button to trigger the native Camera UI dialog (as in this CameraUICapture element sample). However, there's no reason this would necessarily be triggered from a button. It could be a callback from something else, it could be a click event on an image. I don't want to lock the function calls to a specific UI piece.
All the tutorials and demos I have managed to find so far for React Custom Components are explicitly for UI pieces, and require implementing a React View manager subclass to interact with React when the piece is loaded. Is this the only way to write native code accessible from a React page? Do I need at least a dummy UI element even to hook into functional code in the native layer, or is there another way?
It turns out the phrase I'm yearning for is "Native Modules".
iOS:
https://facebook.github.io/react-native/docs/native-modules-ios.html
Android:
https://facebook.github.io/react-native/docs/native-modules-android.html
Windows:
https://github.com/Microsoft/react-native-windows/blob/master/docs/NativeModulesWindows.md
can I use native base component along with shoutem animation , I have , without speeding down the application ? (I don't know how to compare the performance of different code in react native so any suggestion in this matter could help me a lot)
You can use it. #shoutem/animation should not impact your app's performance. It just wraps React Native Animated API and exposes it in a declarative way.
I'm curious why React Native doesn't utilize the native platform list components such as RecyclerView for Android and UITableView (CollectionView) for iOS.
This could ideally provide a lot more feature support and improved performance then what is currently available.
Is there a reason the React Native lists are solely backed by ScrollViews instead?
I couldn't personally tell you but quoting the Author.
UITableView API is not well suited for the asynchronous nature of ReactNative, and the resulting code was pretty gross, especially when trying to do smooth animations to grow the heights of rows, which we do in the groups app.
Source: Early discussion on the very point.
For Recycler View in Android. Try this.
react-native-recycler-listview
Works ! Some gradle setup required though.