Ionic & Angular - Ion Datetime Design on iOS - android

Context
I am facing a problem with Ionic + Angular + Capacitor + iOS. It's related with the ion-datetime iOS component design and according to my research there is a possible workaround to match it like Android devices.
Problem
The problems starts when the ion-datetime is implemented and apllied to iOS devices. If we want this component iOS design to match the Android design the documentation tell us to pass a mode attibute with the value md. Here's HTML an example:
<ion-datetime mode="md">/ion-datetime>
And another example for both HTML and TS:
pickerOptions: any = {
mode: "md",
};
<ion-datetime [pickerOptions]="pickerOptions"></ion-datetime>
However this documented approach it's not having the desirable outcome. Therefore the iOS component still haves a curved wheel instead of a flat sheet. Let's take a look on a visual explanation.
Visual Explanation
As explained before both iOS and Android devices should now have the exact same design because we have setted the mode attribute to md. As we can see on the example image this is clearly not the case. iOS component design is still acting like some sort of curved wheel. Continuing to be very different from the android device.

(Posted on behalf of the question author, in order to move it to the answer space).
The solution to fix this issue is quite simple. However it will impact all Ionic components design because we are going to set the full Ionic Module to be just and only md (Material Design). So please be aware that everything related to frontend will be overwritten to possess Android design. To make this solution/workaround happen we will have just to manipulate the file "app.module.ts".
#1 App Module TS (Ionic Project)
...
#NgModule({
imports: [
IonicModule.forRoot({
mode: 'md',
}),
]
})
export class AppModule {}
And that's it! The iOS ion-datetime component design will now become exactly like Android component design. Please don't forget that this will cause all ionic components to be overwritten with a material design.
References
https://ionicframework.com/docs/api/datetime
https://ionicframework.com/docs/api/picker#pickeroptions
https://github.com/ionic-team/ionic-framework/issues/16717

Related

Moving from android to ios react-native

I have an app completed using Android and react-native and I am starting to work on the ios version with react-native. Are there going to be any new road blocks with this change? And is it most likely that I should be able to reuse most - if not all of my react-native code while working on the ios version, Cheers.
Well, the main purpose of react-native is to write "Almost" the same code which for both platforms. However, there are probably going to be several differences in the way, including:
StatusBar
It is probably going to be the first thing that you notice. In Android, you do not need to handle the status bar and the app automatically starts below the status bar, However in IOS, the app starts from the top of the screen, and you will probably see the time and battery in the middle of your header.
you probably need to give a paddingTop to your header or use, "StatusBar" Module from react-native to handle this issue.
https://facebook.github.io/react-native/releases/0.31/docs/statusbar.html
Shadow and Elevation
As you might have noticed, there are some shadow stylings, which do not have any effect on the shape and appearance of your components. In Android devices "Elevation" is used to make an illusion of 3d Effects on layers. However, in IOS you need to use shadow properties such as, shadow radius, shadow color and ... to make a good looking component.
https://facebook.github.io/react-native/docs/shadow-props.html
UI-UX Design
There are some structural differences between Android and IOS platforms, which will result in a slight (or sometimes major) UI-UX differences.
For example, there is no physical back button in iPhones. As a result, you cannot rely on a physical back button and you need to put a go back button on every page.
Additionally, generally speaking, IOS apps do not have a drawer, and you need to think about this.
Several modules are built specifically for one platform, such as datepickerios. The original picker in IOS platform is a smooth wheelpicker, and the datepicker is also different with android, so u have to have these modules in mind.
Moreover, if you installed any other npm modules, check their github page to see, if there is any special guide on linking and usage in different platforms
Ps. I think it is better to take a look at the app and check for possible bugs, then try to have on eye on API sections in the react-native web page for platform specific codes.
Yes you can reuse most of your js code. If you are using native libraries you will have to run "react-native link" to link with the native code.

Can I externalize the Ionic2 components in another project?

I'm working on a project where one requirement is to use the Google's Material design. The other requirement is Angular2. Unfortunately the material design for NG2 isn't fully ready yet. Since in the past I've worked with Ionic2, I've seen that it has a huge library of components already set up with the material design (for android). I was wondering if there's some way to extract those components and re-use them inside another angular2 project...
Is it witchcraft? Thanks for any suggestion.
Is it a web project or a mobile project?
In any case you can't just extract a component, what you can do is use PWA Ionic 2 - PWA forum post, set you application mode to 'md' in you app.modules imports and then edit the remaining css to look more like material design

How to migrate a multi-platform app in React Native?

I’ve started to dig into integrating React Native in existing apps, and I mean real industrialized apps (iOS and Android version of a same app) that we wish to refactor with as much RN as we can for bringing code bases together (there is also an existing web version).
We are pretty convinced that including multiple RCTRootView sharing the same bridge is the best approach for us, starting from the basic content views (where sharing code bases is easier and more profitable) and iterating to turn more and more parts of app in RN (Animation, Navigation, …).
But when we’ve investigated this approach, several questions popped out, both technical and organizational.
First of all, although we don’t want to be iOS-first or Android-first, the Android platform doesn’t seem to have the same maturity of the iOS platform for this kind of work. We faced some problems like:
The ReactRootView doesn’t follow the React lifecycle, unlike iOS’s RCTRootView, there is no API to update props : https://github.com/facebook/react-native/issues/6303
It’s impossible to include a ReactRootView inside a native scrollview. This limitation exists from the day one of the Android release (see https://github.com/facebook/react-native/issues/9022)
The following is not really a “problem” but it adds some doubts about the Android support.
The iOS part of the integrating doc clearly mentions that it’s possible to init a view using an existing bridge (initWithBridge, the API is explicit too).
On Android, the same doc mentions that multiple views can share the same ReactInstanceManager, but if you expose 2 components in your bundle and use it, you have to call twice startReactApplication and you’ll see 2 lines in Chrome console
Running application "XXX" with appParams
Running application "YYY" with appParams
Sounds not very optimized to me… Did I really create 2 entire “RN apps” here ?
That being said, we are looking for feedbacks and answers :
About the Android platform, is it reasonable to synchronize the refactor on both platforms or we’d better turn the iOS app into RN and then the Android one ?
How far can we go in RN views displayed simultaneously ? 10, 20 views at a time ?
Our app is “data-oriented”. Is it a good idea to move the data-fetching in a Redux app in the RN world first ? I guess we have to expose data and notify store updates to the native world: what is the most efficient way to do this ? (Native modules makes the communication in the other side easy, native toward RN, but they seem not helpful for this purpose).
Also, how to organize the VCS ? Is moving the 4 code bases (iOS, Android, Web and the RN bundle) in a mono-repository a necessary move ?

How to include Angular Material Design in an Android App

I was wondering if it was possible to include AngularJS to design certain elements of my Android App and how one could go about doing so. More specifically, how could I apply this angular api: https://material.angularjs.org/#/material.components.radioButton/directive/materialRadioGroup to a radio group in my android app.
Thanks for your help.
It's possible but I wouldn't recommend it for an app yet. If your making a hybrid app I'd recomend taking a look at ionic they basicly intend to fix all the headaches people have with cordova. Their design isn't exactly material but it looks decent and they have plans to switch to material design once angular-material is ready. In fact they are the ones working on angular material.

Android UI framework

I have some issues in working with Android layouts and make them adapt for all screen sizes..
I have found that there is an alternative solution : Android Bootstrap http://www.androidbootstrap.com/ for that and provide nice UI components (buttons etc...).
Since I'm developing natively, is this kind of frameworks won't make the App runs slower ?
Is this only a UI framework like for the web (Bootstrap from twitter) ? if not, can we use with it everything in Android (Camera, micro etc...) and Can we include some Jars like Zbar ?
Thank you.
I have found that there is an alternative solution : Android Bootstrap
It is not an "alternative solution". You still will need to be "working with Android layouts and make them adapt for all screen sizes", because Android Bootstrap does not change much related to that.
and provide nice UI components (buttons etc...)
It uses the same Android widget set that all other Android apps use.
is this kind of frameworks won't make the App runs slower ?
There is nothing in an Android Bootstrap project that would necessarily make the app significantly slower.
Is this only a UI framework like for the web (Bootstrap from twitter) ?
It is not even that. It is a starter project that demonstrates how to tie together a dozen or so open source libraries for Android app development. You can think of it as an extended version of the templates used to create new applications and activities in Eclipse or Android Studio.
This is not to say that Android Bootstrap is bad -- far from it. However, it does not resemble your description.
can we use with it everything in Android (Camera, micro etc...)
I have no idea what "micro" is with respect to Android. Since you are writing an Android application, just like any other Android application, you can use it with whatever parts of Android you choose to.
Can we include some Jars like Zbar ?
I see no reason why not.
It is very common for such templating engines not to have exactly most components you need. for android it is basicallly about adding support third party libraries to get the exact experience you need.
Thus you may want to consider adding more or lacking parts by leveraging some external libraries like those from HERE

Categories

Resources