{"action":"created","issue":{"url":"https://api.github.com/repos/material-native/material-native/issues/36","repository_url":"https://api.github.com/repos/material-native/material-native","labels_url":"https://api.github.com/repos/material-native/material-native/issues/36/labels{/name}","comments_url":"https://api.github.com/repos/material-native/material-native/issues/36/comments","events_url":"https://api.github.com/repos/material-native/material-native/issues/36/events","html_url":"https://github.com/material-native/material-native/issues/36","id":261925779,"number":36,"title":"Parity/compatibility: material-ui react components?","user":{"login":"jpaas","id":1231716,"avatar_url":"https://avatars2.githubusercontent.com/u/1231716?v=4","gravatar_id":"","url":"https://api.github.com/users/jpaas","html_url":"https://github.com/jpaas","followers_url":"https://api.github.com/users/jpaas/followers","following_url":"https://api.github.com/users/jpaas/following{/other_user}","gists_url":"https://api.github.com/users/jpaas/gists{/gist_id}","starred_url":"https://api.github.com/users/jpaas/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jpaas/subscriptions","organizations_url":"https://api.github.com/users/jpaas/orgs","repos_url":"https://api.github.com/users/jpaas/repos","events_url":"https://api.github.com/users/jpaas/events{/privacy}","received_events_url":"https://api.github.com/users/jpaas/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2017-10-01T15:55:48Z","updated_at":"2017-10-01T17:52:30Z","closed_at":null,"author_association":"NONE","body":"Have you considered parity or at least interface compatibility with [material-ui for React](https://github.com/callemall/material-ui)?\r\n\r\nThis library has been around a while and is very well established.\r\n\r\nAlso for anyone who is trying to build a react-native app for ios/android and the web using something like [react-native-web](https://github.com/necolas/react-native-web), it would be soooo nice to be able to drop in components with compatible interfaces.\r\n\r\nOn our current project, we have created wrapper components that use the React components on the web, and use `react-native-material-kit` components for mobile. We mostly try to uphold the React component interfaces, and our wrapper components adapt the react-native-material-kit components to that interface.\r\n\r\nThe dream would be to not have to create these wrapper components at all, but to simply alias `material-native` for `material-ui` in a native build, or vice versa for a web build."},"comment":{"url":"https://api.github.com/repos/material-native/material-native/issues/comments/333394024","html_url":"https://github.com/material-native/material-native/issues/36#issuecomment-333394024","issue_url":"https://api.github.com/repos/material-native/material-native/issues/36","id":333394024,"user":{"login":"dantman","id":53399,"avatar_url":"https://avatars2.githubusercontent.com/u/53399?v=4","gravatar_id":"","url":"https://api.github.com/users/dantman","html_url":"https://github.com/dantman","followers_url":"https://api.github.com/users/dantman/followers","following_url":"https://api.github.com/users/dantman/following{/other_user}","gists_url":"https://api.github.com/users/dantman/gists{/gist_id}","starred_url":"https://api.github.com/users/dantman/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/dantman/subscriptions","organizations_url":"https://api.github.com/users/dantman/orgs","repos_url":"https://api.github.com/users/dantman/repos","events_url":"https://api.github.com/users/dantman/events{/privacy}","received_events_url":"https://api.github.com/users/dantman/received_events","type":"User","site_admin":false},"created_at":"2017-10-01T17:52:30Z","updated_at":"2017-10-01T17:52:30Z","author_association":"CONTRIBUTOR","body":"I am at least using material-ui as one of the sources of ideas for the API (I look at react-native-material-kit, react-native-material-design, react-native, material-ui) and then do what I think looks like the best way to do it for react-native.\r\n\r\nI'm not sure if a material-ui based API worthwhile to do for react-native-web. IIRC react-native-web translates react-native's View, Text, etc... components to web components. So theoretically material-native components might just be usable on the web (might need some compatibility fixes), instead of having to bother switching to material-ui.\r\n\r\nBut I did contemplate about matching the material-ui API, however I decided not to because of a few IMHO poor picks for the API and numerous ways that react-native's API is different than the API on the web \r\n\r\n* A huge portion of the material-ui API are css based props (`classes`, `*ClassName`, `fullWidth`) which are completely different to the way react-native does it.\r\n* `<input>` and react-native's `<TextInput>` are almost nothing alike, so it doesn't make sense to try and use material-ui's API for this.\r\n* Components like Drawers, AppBars, and BottomNavigation aren't really relevant since in the react-native context these are primarily the job of navigation libraries. material-native's role in these would be different, extending some of them to provide slightly more material versions and providing some interior components for things like navigation drawer items and headers.\r\n* `<Image source>` works differently than `<img src srcSet>` so that part of `<Avatar>` doesn't translate.\r\n* material-ui's `<Avatar>` doesn't bother handling icon or initial/text avatars directly, they use css and `children` for that. Which is more verbose and doesn't really work under react-native.\r\n* material-ui's `<Avatar>` also doesn't have a `size` property, presumably they expect you to change the size with css, but that doesn't work in react-native because `borderRadius` doesn't have percentages in react-native so the component has to be responsible for setting the `width`, `height`, and `borderRadius` styles.\r\n* IMHO Button and FAB should not be the same component like they are in material-ui, they are fairly different components.\r\n* I don't like the use of `<FormControl>`, `<InputLabel>`, and `<Input>` instead of just a singular `<TextField>`, nor do I like the boolean `error` prop. It makes that code more verbose than it needs to be. I think material-ui does it because it's a holdover of the web where there are separate `<label>` and `<input>` elements underneath, which is irrelevant to react-native where we have to build 80% of this ourselves.\r\n* react-native doesn't have underlying html components like tables for the numerous Grid/Table components in material-ui.\r\n* The material-ui `<Typography>` component doesn't make any sense in react-native as opposed to the `typo` module and `<MaterialText>`.\r\n* material-ui doesn't seem to bother implementing some of the Material Design spec, like handling for tall/dense typography for certain locales.\r\n* `<Subheader/>` also appears to be missing.\r\n* I wanted to make my components smarter than the components in all the other libraries, in particular you may notice that instead of expecting you to define a light or dark text color my components use the wcag's rules about contrast (which Material Design references) to automatically decide the text color based on the background.\r\n* MuiTheme works differently than MaterialTheme, in ways that I don't believe are helpful for handling themes in react-native."}}
{"actor":{"display_login":"dantman"}}