Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
Compatibility with react-native-web #110
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!
Here are the steps to get react-native-elements working on react-native-web:
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:
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.
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".
Also you can track the status of this feature and all other roadmap features here.
referenced this issue
Mar 13, 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. (
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.
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.
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:
@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