Some cross-platform tools (like Xamarin native and RubyMotion) allow the development of two separate views for Android and iOS, while keeping the business logic shared for both of them. Others (like Apache Cordova or Xamarin.Forms) share both UI and business layer, with the option to use platform-specific overrides when necessary.
What is the state of the interpreted JavaScript frameworks (NativeScript, React Native or Appcelerator)? Are they all focused on creating single UI with platform overrides, or do they allow creating two separate views for each platform? For example, is it possible to create a view using Fragments in Android, but a different view on iOS (since Fragments do not exist there)?
Cordova uses WebView, that mean GUI level will be the same for both Android and iOS but different per Device version. In case of Android each client has own Chronium version and it can break UI behaviour. So developers use Crosswalk to set fixed Chronium version. (extra 20M to your application).
BTW Ionic that uses Cordova architecture uses native behaviour per platform. For example for Android Tabs located at the top, on iOS - at the bottom
On other hand Xamarin (C#), React-Native(JS) and NativeScript(JS) call native APIs. They don't use WebView but generate Native code.
For example if you create button - it will look different: on Android - material theme, on iOS - iPhone theme
Anyways, the bottom line is: everything depends on resources and time. If you want to build application fast, with the same view - I would go on Ionic2+ Angular2 + Cordova.
If you you have more time - go on React-Native or NativeScript (Still has poor documentation) or Xamarin (C#).
React-native's slogan is Learn once, write everywhere. So, you can choose what suits your needs, you can:
Share UI between platforms.
Share Only business logic.
So, the answer for react-native is yes. You can create separate UIs or you can share it.
Since you are writing components, one way of separating this logic is to write component.android.js and component.ios.js and the platform loads the appropriate one for you. Note that you can also do that programmatically.
You can see that in action in the official f8 app made by facebook using react-native
Related
I built an application in React, is there a way that the same code will be used for a website?
I know Instagram is built on React and it also has a website, I wonder maybe you should add some link or something that it will open for me as a website?
Or maybe there is no such way and I have to build a website separately?
First off all, If you have written any code which is related to native functionality, then it can be challenging.
If you have only worked with views, images, and some of the basic functionality.
It can be done with react-native-web you can easily migrate your project to react-native-web.
If you project is created with expo they already provide react-native-web support.
Option 2: If you have some of the code you want to share and some is that you don't want to share or can't share.
You can use renderProp or customHooks pattern to reuse your logical code and seperate your view for react-native and react js apps.
If you want to reuse your views too, you can do those with primitives.
you can use styled-component primitives for that.
https://medium.com/react-native-training/sharing-code-between-react-web-and-react-native-applications-7f451af26378
You can get some idea here as well.
I have been trying my hands for POC on an idea and trying to find languages which can support Mobile app development (Android/IOS) via single source code.
I zeroed on React-Native and Flutter.
What I found that for React-Native you still have to write code which is platform specific. Components need to be written differently for IOS and Android.
Then I looked in FLutter and I found that - "Flutter's widgets, however, while there are more of them, aren't really adaptive".
I am not able to understand it and what it means.
It would be really helpful if someone can help me with example or guide me to good reference.
In Flutter you have different sets of Widget Collection:
Material Widgets: Android-style
Cupertino Widgets: iOS-style
And lots of Widgets which aren't bound to one of those styles.
With this you are able to create a application looking like any style on any of the available platform. Therefore you can also have iOS-style Widgets on Android and vice versa.
If you want to have iOS Widgets on iOS and Android Widgets on Android, you'll have to create some conditional rendering, which decides wether to render iOS or Android components.
Sidenote: The Material-style Widgets look also really good on iOS. Also you can use a ton of other Widgets to create an UI in your own style.
I've been evaluating React Native as a replacement for Cordova, and was wondering if there is a widely accepted solution for styled text inputs. I'd like to see text inputs rendered in Material Design on Android, and Apple style on iOS.
Do you have recommendations for a specific library, or will I have to write my own/combine multiple libraries? Thank you!
You could check out https://nativebase.io/ it supports platform specific default styling there are others as well like https://react-native-training.github.io/react-native-elements/ and http://www.xinthink.com/react-native-material-kit/ which has consistent styling regardless of platform.
Coming from a Cordova/Sencha Touch background I suggest you try to create your own style using only the default react native components, the reason is that before I was having the same question regarding component library that I could use so that I could target all platform at once, but react native isn't 100% cross platform and learning to style on different platform might give you an idea and feedback with your evaluation, unless your aiming to have a project as soon as possible and that is a different story.
There is some information here already: White labeling an iOS app
I was wondering if there any workflows for white labeling a React Native app?
Basically if I had a core app for the app store. I would like to create white labeled versions (iOS + Android) with some modifications.
I found the project a project called white-label-app in github, I believe you can inspire yourself looking this project closer (and use them as boilerplate).
I'll try to use the majorajs, the idea of this package is "Manage white-label or skinned versions of your React Native app", sounds good for me.
You can use a combination of the React Native Bridge & product-flavors/targets to achieve what you want.
The process is extensive to setup, but once you have it setup it is very easy to add new white labelled apps to it.
I wrote a blog post that goes over every detail if you need a step by step guide.
One approach would be to use Fastlane together with react-native-config to provide values from the environment.
I wrote up a more detailed blog post about it here that explains my approach:
A React Native White Labeling Journey
I'm building the app through the CI which runs my Fastlane script, which parses the unique git tags for each app, building the appropriate app and distributing it to AppStore / GooglePlay.
As I know the first priority of React Native is not cross platform. It claims "learn once use everywhere" instead of "write once use everywhere". So there are a few specific components like StatusBarIOS, NavigatorIOS, AlertIOS. Although there are some cross platform alternative components like Navigator, StatusBar, etc, Facebook suggest us to use platform specific version for better performance.
But my question is why don't just wrap the platform specific version inside the universal version in the first place? For example, Navigator, why don't just use NavigatorIOS internally in iOS? Wouldn't it be nicer to keep the performance and make it cross platform at the same time?
Depends on what you mean by
But my question is why don't just wrap the platform specific version inside the universal version in the first place?
I was trying to build a so called cross-platform app. But I ended up writing too many if-else blocks for rendering simplest of platform-specific components. I scrapped the whole app altogether, and tried using better folder structure instead.
I created an src folder in root of the application. And then divided the app into api, views, components. The views and components were further divided into android and ios folders. Inside src folder, I had a main.js which contained Navigator.
This is what I prefer to do! You might want to do something else. That's okay. At the end of this learning experience, I found that Facebook was right. it is not write once use everywhere. It is learn once apply however you want! As long as your app is delivering 60 FPS experience to your user, anything is valid in React Native.