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

Compatibility with react-native-web #110

Closed
remon-nashid opened this Issue Dec 9, 2016 · 14 comments

Comments

Projects
None yet
8 participants
@remon-nashid

remon-nashid commented Dec 9, 2016

TL;DR
react-native-elements looks very promising on react-native-web. Check it out in this repo!

=====================================================
First, thank you all for your amazing work on this library!

I'm using react-native-web in order to accomplish a true cross-platform experience with React.js. I'm currently looking for a component library to make sure app UI is consistent. I gave react-native-elements a try and the results are great!
rnew-github

Here are the steps to get react-native-elements working on react-native-web:

  1. Installed react-native-elements, react-native-vector-icons, react-native-web and babel-preset-react-native.
  2. Downgraded react and react-dom to 15.3.x, which is the latest version supported by react-native-web.
  3. In webpack config, I let these modules be compiled by babel-loader: react-native-vector-icons, react-native-elements and react-native-tab-navigator.
  4. Also enabled url loader to load ttf files.

I haven't tried react-native-elements with an actual react-native display on a mobile device. However, things look good on web. There are few obvious issues, though. Button icon is missing, also raised styling isn't effective. Elements width seems to be unnecessarily narrow even though parent View is occupying 100% width.

There are few errors in chrome console, such as:

Warning: "tintColor" is not a valid style property.

Warning: Unknown props `underlayColor`, `onPress` on <div> tag. Remove these props from the element.

Warning: Unknown props `inlineImageLeft`, `inlineImagePadding`, `returnKeyLabel`, `underlineColorAndroid`, `clearButtonMode`, `selectionState`, `isFocused`, `clear` on <input> tag. Remove these props from the element. For details, see https://fb.me/react-unknown-prop

Warning: Unknown prop `shadowStyle` on <div> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop

I'll be testing this library on a real native application, then try to tweak my config/code until I reach 100% display parity between display of react-native and react-native-web.
I have a sample app in this repo. All changes required to make react-native-elements to work are in this commit. Would be great if you guys could check it out!

@ngduc

This comment has been minimized.

Show comment
Hide comment
@ngduc

ngduc Dec 14, 2016

@remon-georgy I have the same issue with "warnings". It'd be great if react-native-elements can detect Platform & use Platform-specific style properties (like on web, there is no "tintColor")

My repo is here: https://github.com/rhinos-app/rhinos-app-dev

ngduc commented Dec 14, 2016

@remon-georgy I have the same issue with "warnings". It'd be great if react-native-elements can detect Platform & use Platform-specific style properties (like on web, there is no "tintColor")

My repo is here: https://github.com/rhinos-app/rhinos-app-dev

@dabit3

This comment has been minimized.

Show comment
Hide comment
@dabit3

dabit3 Dec 22, 2016

Member

Hey, this is a great idea! @remon-georgy @ngduc I'll be looking into adding this to the immediate roadmap, but if someone has the time to jump on and submit a PR I can get it added asap.
Thanks so much!

Member

dabit3 commented Dec 22, 2016

Hey, this is a great idea! @remon-georgy @ngduc I'll be looking into adding this to the immediate roadmap, but if someone has the time to jump on and submit a PR I can get it added asap.
Thanks so much!

@Monte9 Monte9 referenced this issue Dec 24, 2016

Closed

More Elements? #55

@Monte9

This comment has been minimized.

Show comment
Hide comment
@Monte9

Monte9 Mar 13, 2017

Member

In an effort to streamline all RNE issues such that it is easier to get to solutions faster/ submit a new issue we have decided to close any enhancement/roadmap features as "issues".

Feel free to use this issue to talk about this feature and ping @binoy14 or me (@Monte9) if you feel like you can submit a PR for this. Thanks in advance.

Also you can track the status of this feature and all other roadmap features here.

Member

Monte9 commented Mar 13, 2017

In an effort to streamline all RNE issues such that it is easier to get to solutions faster/ submit a new issue we have decided to close any enhancement/roadmap features as "issues".

Feel free to use this issue to talk about this feature and ping @binoy14 or me (@Monte9) if you feel like you can submit a PR for this. Thanks in advance.

Also you can track the status of this feature and all other roadmap features here.

@karsens

This comment has been minimized.

Show comment
Hide comment
@karsens

karsens Jul 5, 2017

GUYS THIS IS THE FUTURE. How cool would it be to have one code base for web, android, ios! man.. I really hope this is gonna take off!

karsens commented Jul 5, 2017

GUYS THIS IS THE FUTURE. How cool would it be to have one code base for web, android, ios! man.. I really hope this is gonna take off!

@Monte9

This comment has been minimized.

Show comment
Hide comment
@Monte9

Monte9 Jul 7, 2017

Member

Def pretty exciting @WwoeSsi.

@binoy14 I am opening this issue again to see if it can get some steam moving forward.

A good place to start is if someone can test it on web and attach screenshots of what's broken, what looks decent. ( 🤑 Open collective dollars to anyone willing to submit a PR)

Member

Monte9 commented Jul 7, 2017

Def pretty exciting @WwoeSsi.

@binoy14 I am opening this issue again to see if it can get some steam moving forward.

A good place to start is if someone can test it on web and attach screenshots of what's broken, what looks decent. ( 🤑 Open collective dollars to anyone willing to submit a PR)

@MillerGregor

This comment has been minimized.

Show comment
Hide comment
@MillerGregor

MillerGregor Nov 9, 2017

I'm going to take a shot at this. If anyone else is also, let's team up.

After very brief testing, it looks promising.

The warnings that @remon-georgy reports above can be easily avoided with minimal changes RNE. It's just a matter of being careful to only pass props that are needed by children. Vanilla react-native is tolerant to this, but RNW passes them along to the dom (by design).

I especially like the way this library's styling is vanilla react-native. Thanks to this, it's easy to integrate switch-on-demand themes using the method that @necolas suggests: https://github.com/necolas/react-native-web/blob/master/docs/guides/advanced.md. This method for styling and theming won't require any changes to the library, and works with react-native and react-native-web.

MillerGregor commented Nov 9, 2017

I'm going to take a shot at this. If anyone else is also, let's team up.

After very brief testing, it looks promising.

The warnings that @remon-georgy reports above can be easily avoided with minimal changes RNE. It's just a matter of being careful to only pass props that are needed by children. Vanilla react-native is tolerant to this, but RNW passes them along to the dom (by design).

I especially like the way this library's styling is vanilla react-native. Thanks to this, it's easy to integrate switch-on-demand themes using the method that @necolas suggests: https://github.com/necolas/react-native-web/blob/master/docs/guides/advanced.md. This method for styling and theming won't require any changes to the library, and works with react-native and react-native-web.

@Monte9

This comment has been minimized.

Show comment
Hide comment
@Monte9

Monte9 Nov 9, 2017

Member

That's great @Gregor1971! Appreciate you taking the lead on this. Please share your learnings as well as propose the changes you need on the RNE side to make it web compatible.

Also, from your initial findings how much effort would it be to get RNE to something like a 1.0 for web? Maybe a time frame for the PR depending on your availability might help too.

@iRoachie @xavier-villelegier are RNE core team members and rockstars contributors. Feel free to reach out to us in case you need any help along the way. Lastly, there's at least $100 of open collective funds dedicated to this issue, just fyi.

Member

Monte9 commented Nov 9, 2017

That's great @Gregor1971! Appreciate you taking the lead on this. Please share your learnings as well as propose the changes you need on the RNE side to make it web compatible.

Also, from your initial findings how much effort would it be to get RNE to something like a 1.0 for web? Maybe a time frame for the PR depending on your availability might help too.

@iRoachie @xavier-villelegier are RNE core team members and rockstars contributors. Feel free to reach out to us in case you need any help along the way. Lastly, there's at least $100 of open collective funds dedicated to this issue, just fyi.

@MillerGregor

This comment has been minimized.

Show comment
Hide comment
@MillerGregor

MillerGregor Nov 10, 2017

After a little more investigation, I'm optimistic that I can have a PR by the end of next week.

I'm tracking progress in my fork, under the "react-native-web" branch: rnw-progress.md

I've added React Styleguidist to help development and provide examples. RNE's docs are already beautiful, but maybe you'd like to add working components eventually? If you want to see it, clone my branch and: yarn styleguide

@necolas, the author of RNW, uses jest testing with enzyme snapshots so I'll have good examples for adding tests.

So far, the ugliest change is about ViewPropTypes.js. I'd be happy if someone could find a more elegant solution.

I'm planning to provide the theme and styling examples, but I see that some work is already being done. My stuff will be completely optional, and won't touch any component code... which has pros and cons.

Dollars are great 😃, but this really doesn't look difficult.

MillerGregor commented Nov 10, 2017

After a little more investigation, I'm optimistic that I can have a PR by the end of next week.

I'm tracking progress in my fork, under the "react-native-web" branch: rnw-progress.md

I've added React Styleguidist to help development and provide examples. RNE's docs are already beautiful, but maybe you'd like to add working components eventually? If you want to see it, clone my branch and: yarn styleguide

@necolas, the author of RNW, uses jest testing with enzyme snapshots so I'll have good examples for adding tests.

So far, the ugliest change is about ViewPropTypes.js. I'd be happy if someone could find a more elegant solution.

I'm planning to provide the theme and styling examples, but I see that some work is already being done. My stuff will be completely optional, and won't touch any component code... which has pros and cons.

Dollars are great 😃, but this really doesn't look difficult.

@MillerGregor

This comment has been minimized.

Show comment
Hide comment
@MillerGregor

MillerGregor Nov 20, 2017

quick update:

Still a few days away from a PR... testing for web needs a slightly different setup than what's already there.
All original tests are passing except for one.

MillerGregor commented Nov 20, 2017

quick update:

Still a few days away from a PR... testing for web needs a slightly different setup than what's already there.
All original tests are passing except for one.

@Monte9

This comment has been minimized.

Show comment
Hide comment
@Monte9

Monte9 Nov 26, 2017

Member

Sounds great @Gregor1971! Thanks for the update. 👍

Looking forward to the PR!

Member

Monte9 commented Nov 26, 2017

Sounds great @Gregor1971! Thanks for the update. 👍

Looking forward to the PR!

@MillerGregor

This comment has been minimized.

Show comment
Hide comment
@MillerGregor

MillerGregor Nov 28, 2017

PR coming soon. I did a bit of bikeshedding to integrate testing with the styleguide.

MillerGregor commented Nov 28, 2017

PR coming soon. I did a bit of bikeshedding to integrate testing with the styleguide.

@ReggaePanda

This comment has been minimized.

Show comment
Hide comment
@ReggaePanda

ReggaePanda Dec 11, 2017

@Gregor1971 that will be so nice if this works and thanks for your updates. I think than can I remove a lot of near duplicate files 💃

ReggaePanda commented Dec 11, 2017

@Gregor1971 that will be so nice if this works and thanks for your updates. I think than can I remove a lot of near duplicate files 💃

@MillerGregor

This comment has been minimized.

Show comment
Hide comment
@MillerGregor

MillerGregor Dec 11, 2017

@ReggaePanda I wanted to change the existing tests and their snapshots as little as possible to make the PR easier to review.

If you guys want to keep the styleguide in there, the existing tests and new tests can be easily combined.

MillerGregor commented Dec 11, 2017

@ReggaePanda I wanted to change the existing tests and their snapshots as little as possible to make the PR easier to review.

If you guys want to keep the styleguide in there, the existing tests and new tests can be easily combined.

@remon-nashid

This comment has been minimized.

Show comment
Hide comment
@remon-nashid

remon-nashid Jan 24, 2018

I'm closing this issue to keep everyone focused on @Gregor1971's awesome PR #759.

remon-nashid commented Jan 24, 2018

I'm closing this issue to keep everyone focused on @Gregor1971's awesome PR #759.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment