Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

why split android and ios versions? #54

Open
ramsestom opened this issue Aug 23, 2016 · 4 comments
Open

why split android and ios versions? #54

ramsestom opened this issue Aug 23, 2016 · 4 comments

Comments

@ramsestom
Copy link

I saw that each field type has two different versions. One for ios and one for android (for example InputField.ios.js and InputField.android.js).
What is the reason for this? That seems to go completely against the philosophy of react-native (having a unified version of an app between different platforms) and is a potential source of inconsistencies (like 'right Icon' that appear on the same lime as the textfield on ios but on a different one on android due to different default stylesheets between the two classes...)
To me, it would make more sense to have android and ios share as much code as possible (same default stylesheets and templates...)

@MichaelCereda
Copy link
Owner

The fields have version for android and a version for ios just for styling purposes but the underlying component is unified.

@ramsestom
Copy link
Author

ramsestom commented Aug 23, 2016

Well it would make more sense to have the same default styling between both ios and android (and to provide android or ios specific styling in a platform conditional stylesheet that can be passed to the 'style' tag of the component if someone really wants to have a different style on the two platforms).
Because here the problem is that the default styling is inconsistent between the two platforms. So if you extend the default styling (by passing a new style to the style tag of your component), your component would inherit different parent style depending on which platform you are on...

Basically, what I propose is to have a default style that is exactly the same on android and ios (when possible) and then, you can also provide in the lib a platform dependent stylesheet for each component if you want. Like:

import { Platform, StyleSheet } from 'react-native';

const platform_styles = StyleSheet.create({
  inputfield : {
    flex: 1,
    ...Platform.select({
      ios: {
        backgroundColor: 'red',
      },
      android: {
        backgroundColor: 'blue',
      },
    }),
  },
}); 

and a user can choose or not to apply this platform specific style to a form component like:

<InputField style={platform_styles.inputfield} ... />

Or

<InputField style={[platform_styles.inputfield, mystyle.inputfield]} ... />

if he wants to extend/override the default platform specific style

And if he don't want a platform specific style, he could just do:

<InputField style={mystyle.inputfield} ... />

to extend/override the common default style

@MichaelCereda
Copy link
Owner

That's right, I'm also thinking to implement the same style for both.
The problem is that android and ios have a different style and unless
you're making a sort of game (and I would suggest to create custom
components for that) having the same style will easily make your form look
different from the whole ecosystem.

I'm about to submit another update that will fix the android
inconsistencies and will also expose the components to allow a complete
customization of the fields.

On Tue, Aug 23, 2016, 5:22 PM ramsestom [email protected] wrote:

Well it would make more sense to have the same default styling between
both ios and android (and to provide android or ios specific styling in a
platform conditional stylesheet that can be passed to the 'style' tag of
the component if someone really wants to have a different style on the two
platforms).
Because here the problem is that the default styling is inconsistent
between the two platforms. So if you extend the default styling (by passing
a new style to the style tag of your component), your component would
inherit different parent style depending on which platform you are on...


You are receiving this because you commented.

Reply to this email directly, view it on GitHub
#54 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAGjfk76VtCezAvBvNxAufXq51PiuSpKks5qi2SlgaJpZM4JrTDo
.

Michael Cereda
http://michaelcereda.com

@ramsestom
Copy link
Author

ramsestom commented Aug 23, 2016

The problem is that android and ios have a different style and unless
you're making a sort of game (and I would suggest to create custom
components for that) having the same style will easily make your form look
different from the whole ecosystem.

I think you should just propose ios or android styles as themes (with stylesheets), that the user can choose or not to apply to the component, and keep the default styling identical between both platforms.
Having a platform specific theme as stylesheets doesn't prevent from customizing these styles by overriding them when needed. And, at least, the user can choose or not to apply platform dependent styling and you won't have anymore inconsistencies when overriding the default styling....

What I would do:

  • a default styling common to all platforms and directly embedded into the component class
  • a styleesheet for components on ios, that match the ios ecosystem style
  • a styleesheet for components on android, that match the android ecosystem style
  • a platform_style stylesheet that simply call the ios or android stylesheet, depending on the platform you are one

This way, you can stick with the default common styling or have a platform specific one by simply applying the platform_style stylesheet to you component (then, on both case, you can extend/override this style to have your really personal style for your app)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants