Component Consistency between Platforms.

[JonnyBurger]

Introduction

Some React Native APIs have a different look and/or behavior on iOS and Android. It seems like the guideline is to emulate default behavior on each OS, but often developers override those defaults to have more consistent behavior. The question is whether React Native would consider PRs for more consistent cross-platform defaults.

The Core of It

Some examples:

• On Android, an alert is dismissable by tapping outside of the modal. On iOS, an alert is not dismissable by default.
• A multiline <TextInput/> has it's Text by default aligned on top on iOS but centered on Android.

This is consistent with the OS defaults, but users of RN often prefer the behavior to be the same when building their apps.

We have built a library which collects components and APIs to have the same behavior and looks cross-platform. https://github.com/kida007/react-native-normalized.

Discussion points

The discussion is about whether React Native would consider adapting some of the changes to components we have made in our project or if this is not the goal of the React Native Core Library.

[matt-oakes]

Honestly, I think the defaults should lean towards being consistent with other apps on the same platform, rather than the same app across different platforms.

It's only developers who will ever really compare the Android and iOS version of a single app directly and notice the differences. Users of the React Native app, however will always see it alongside the other apps on the same platform. Therefore, any differences from the platform defaults will be noticeable.

My advice would be to embrace the platform you are making the app for, rather than trying to make Android act like iOS (or vice-versa) or going for a lowest common denominator approach. If you learn about each platform, embrace the differences, and tweak your app for it, then you will end up with an app which feels much more at home on the platform 👍

[satya164]

I agree with @matt-oakes to some extent, but there are some inconsistencies that don't affect the UX according to the platform and just make the developer's life difficult, for example:

• Different default text color on iOS and Android
• Vertical alignment for text in TextInput
• More?

There are also components like Button which have the same API, but the same props affect completely different styles based on the platform which is confusing. We should address those inconsistencies. A few years back I actually worked on converging few components and providing consistent behavior and APIs across platforms, so it's something we definitely should address.

Some things are better being different, for example, the default picker styles, the default alert dialog styles etc. But for basic components like Text, it's better to have consistent styling imo.

[cpojer]

I added my thoughts here: facebook/react-native#24540 (review)

@JonnyBurger thanks so much for sending PRs to RN.

[slorber]

I've found dealing with Text/fonts and aligment quite hard with RN.

Text is a primitive component that we use a lot, and when using some fonts we often get top/bottom paddings that vary widely across fonts/platforms. Ensuring proper text aligment in a cross platform way between ios and android can be quite challenging. There are some platform specific text props to fine tune, and hacky workarounds in last resort.

Not sure exactly what can be done about that (don't really know the platform text primitives besides RN, this may be a problem for native ios/Android devs too?) but I think aligning some text next to an icon should be easy, and work out of the box in a cross platform way. I've seen countless hacks solving this by adding platform specific marginTops here and there in my customers apps. I usually build my own "AppText" comp on top of RN Text to solve this more reliably, but feel its a burden I'd like to not have to do.

See also
https://stackoverflow.com/questions/41525842/react-native-android-text-component-extra-padding
https://stackoverflow.com/questions/41570343/react-native-custom-font-renders-differently-on-android-and-ios