Usually cross-platform frameworks support a subset of native controls but never all. For example, Xamarin.Forms supports a set of native controls on IOS/Android/UWP but not all.
In order to add a native control to a Xamarin.Forms, we need to convert the native UI control into a compatible Xamarin.Forms control.
How is this in React-Native? Does React-Native support all native controls or only a subset?
React Native has most native UI components ported, but not all. Just like with Xamarin.Forms, in order to make the code cross-platform, some primitives has been renamed: https://facebook.github.io/react-native/docs/components-and-apis.html
If there are custom or third party components which you want available, then you will have to wrap it for each platform. Guides for iOS and Android. This includes creating a ViewManager for each platform which lets you control the native UI view via a bridge to the JavaScript.
In short, it can support all.
Related
I am using react-native-mapbox-gl/maps extensively in my react native app and I wanted to add dynamic style icons to the chart style.
The javascript mapbox library has a nice event called styleimagemissing with which we can check which image for a style is missing and construct it.
Is there something similar in the react-native mapbox gl library?
In other words, I would line to achieve something like this using the react native mapbox-gl library.
This is implemented in react native mapbox gl 8.0 and later. See Images#onImageMissing
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
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.
I need to make a picker like this in the picture below:
What you see is a TimePicker and I took it just to give you an example. I would like to have one with about 200 numbers on the left and 100 on the right (for example). How can I do it in a Xamarin.Forms PCL project?
The first problem you'll face is that the picker control you see here is a native iOS control. The Xamarin.Forms TimePicker is basically not a physical control in itself but it translates to a native control on each platform. That's why it will look different on Android and UWP devices because they provide their own picker controls, as seen in the picture below.
Now, if you're ok with the controls looking different, you could use custom renderers to modify each native control or even replace them to provide the functionality you need. I thought I'd outline the basic steps for you to get you started:
Create a new Xamarin.Forms control called CustomPicker or something.
Create custom renderers for each platform.
On iOS, you can use the UIPickerView and specify numberOfComponents, numberOfRows and the data source.
On Android, you might want to use a 3rd party control since by default, there are no scrolling picker controls like the one on iOS. WheelPicker looks promising.
On UWP, you might be able to work something out using the PickerFlyoutBase. I have limited knowledge on the platform but you should be able to find something quite easily.
As you can see, it's going to be quite an effort to get the scroll picker working on each platform.
Edit: You could also look into native embedding, which lets you embed native controls into Xamarin.Forms app's pages.
Native Embedding
Embedding native controls into Xamarin.Forms
We've developed a two-column picker for Xamarin.Forms (Android and iOS).
Sample:
https://github.com/HorusSoftwareUY/MaterialDesignControlsPlugin#materialdoublepicker
Screenshots:
Android
iOS
We added this control to MaterialDesignControls NuGet (https://www.nuget.org/packages/Plugin.MaterialDesignControls/), where you can find other interesting controls with the material design look and feel.
Contributions are welcome!
Is Titanium appcelerator worth it for developing a complex application on ipad, iphone and android? Which can support charts, grids, widgets and schedule control?
Mr.Seyal, Titanium Appcelerator support all the native controls(upto iPhone 4). I think charts, grids, widgets and schedule controls are only third party controls. It is very difficult to use those controls in Titanium. You have an option to use the webview. You need to draw graphs using html and need to load it using the webview. But you can't use it for other purposes like, creating grid or for using other controls
You have another choice to use Phonegap, which is a cross-platfrom, which supports all your requirement(plugins are available for your requirement).
No, it doesn't support all the native features of each device.
For example, user interface in Android would need a widget. No support for that in Appcelerator, as it's specific to Android.