React Native Web support #1664

haruelrovix · 2018-12-13T10:01:29Z

Implements #1423

Write docs for React Native Web support
Create a compelling demo/example app for RNE + RNW

The example app LIVE here: gitphone.surge.sh.
For the source code: haruelrovix/gitphone.

I think it's better if the example source moved under react-native-training. Also, I'm planning to publish the RNE x RNW documentation on Medium as well. So it can reach more audience. Draft

Create a React Native Web support section on the main Readme.md

using React Native Web and React Native Elements

codecov · 2018-12-13T10:05:41Z

Codecov Report

Merging #1664 into next will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##             next    #1664   +/-   ##
=======================================
  Coverage   87.74%   87.74%           
=======================================
  Files          33       33           
  Lines         555      555           
  Branches       68       68           
=======================================
  Hits          487      487           
  Misses         57       57           
  Partials       11       11

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 940c407...732b761. Read the comment docs.

iRoachie · 2018-12-13T13:03:08Z

YES YES YES!!!! :D I am so excited

Monte9 · 2018-12-13T14:52:24Z

OMG!! This is what we have been waiting for. I ❤️ it!! And the app looks really clean too! 😍

Also this PR is awesome in every way!! It's got an in-detail readme guide, a blog post, an awesome example app. 💯 🔥

Great job @haruelrovix and thanks again for contributing! I'll review it in a day or so and then let's get this merged in!

xavier-villelegier · 2018-12-13T14:58:02Z

This is amazing !! Thanks for your help on this @haruelrovix. Would be dope to write "Compatible with React Native Web" on the home page 🔥

We have an old branch trying to make RNE compatible with RNW but there was a lot of changes necessary, so we didn't want to merge it into master. Looking at your app (really clean btw !!) it seems to work out of the box ? Did you find some components of RNE that doesn't work with RNW ? If so, is it easy to make them compatible ? 🤔

Looking forward to merge it ! 💯

iRoachie · 2018-12-13T15:01:44Z

@xavier-villelegier Also remember that the many changes from the old branch were done as separate changes by @piu130

xavier-villelegier · 2018-12-13T15:06:52Z

Actually I was talking about this big PR https://github.com/react-native-training/react-native-elements/pull/759

iRoachie · 2018-12-13T15:10:36Z

I wouldn't really compare the two cause they aren't the same. That PR also added storybook as well as added web specific tests for each component and their snapshots.

This Pr is more a "how to get started with react-native-web and react-native-elements"

xavier-villelegier · 2018-12-13T15:44:33Z

Yea but looking at the PR there was many changes to the components to make them compatible with RNW, that's why I ask if @haruelrovix found some incompatible components

haruelrovix · 2018-12-15T00:53:30Z

@xavier-villelegier after did extra setup on the webpack configuration: 8c0e603 4fa1a4a, I can say that RNE works out of the box with RNW!

Had to use platform specific style in ListItem, L22

marginRight: Platform.OS === 'web' ? 10 : 0

to achieve the same feel on native and web. But it's really acceptable.

Last year I was in RNW project. We used platform specific style for web, android, iOS and iPhone X. Yes. We had to give iPhone X a special styling. 😆

This simple gitphone app uses 7 RNE components only, out of 20. Don't know the other RNE components, work out of the box with RNW or not.

andangrd · 2018-12-17T10:41:55Z

@haruelrovix Awesome..... 👏 👏 👏

README.md

Monte9 · 2019-01-13T19:09:05Z

docs/rnw_support.md

@@ -0,0 +1,618 @@
+# Comprehensive Guide to create simple app using React Native Web and React Native Elements


this is one of the most detailed and step by step instructions I have seen. Fantastic job on this! 👏 💯

Monte9 · 2019-01-13T19:09:53Z

docs/rnw_support.md

+
+For native, it’s easier. We can use `FlatList` `onEndReached` props. To give you an idea how, see this: [9d2e1f2](https://github.com/haruelrovix/rnw-github/pull/2/commits/9d2e1f2a3e8605f8184f1f8950eb0175045bb67a).
+
+## Troubleshooting 💺


wow. you even took the time to write a troubleshooting section. Impressive!! 🔥

Monte9

Fantastic!! 💯

Monte9 · 2019-01-13T19:14:17Z

@haruelrovix left a few comments. But overall really impressed by your efforts on this front and investing time & effort into making a really compelling RNE x RNW app. ❤️

We use OpenCollective to give back to contributors like yourself. Our initial budget for RNW docs for $50.. but seeing that you have gone above and beyond to make a fully functioning app is really impressive. So I'd be happy to send $100 your way for your efforts. Let me know if this sounds good to you and I can tell you how to submit your expense.

Monte9 · 2019-01-13T19:15:20Z

@iRoachie also looks like @piu130 submitted a few PR to help improve RNW support as well. How about we award him $50 on OpenCollective as well for his efforts.

haruelrovix · 2019-01-14T06:11:54Z

Thanks for the review @Monte9 ! 🤝

Related to the OpenCollective, isn't it $100 from the very beginning? 🤔

Write docs for React Native Web support $50
Create a compelling demo/example app for RNE + RNW $50

iRoachie · 2019-01-14T10:53:47Z

Can we update the copy on the home page?

https://github.com/react-native-training/react-native-elements/blob/next/website/pages/en/index.js#L109. Maybe it should say and web and a link to the page you added above.

haruelrovix · 2019-01-14T11:02:08Z

@iRoachie like this?

content: 'Consistent design across android, iOS and [web!](https://github.com/react-native-training/react-native-elements/tree/master/docs/rnw_support.md)'

iRoachie · 2019-01-17T04:25:27Z

Hey @haruelrovix, I updated the PR to host your setup as a blog post instead. If you want to preview it you can run the website locally.

# after clone
cd website
npm install
npm start

You can then click the blog tab at the top.

Let me know if everything is fine, here's a quick screenshot.

Monte9 · 2019-01-17T04:29:14Z

woah, we can have blog posts on the website?! 🔥 Docusaurus is really fantastic! 💯

haruelrovix · 2019-01-17T05:22:13Z

@iRoachie oh man~ why are you so cool? Thanks for the last two commits. It's awesomesauce! 🎆

iRoachie · 2019-01-17T05:26:11Z

Ha! I think we are a go 🚢

iRoachie · 2019-01-17T05:26:41Z

Thanks so much 💯

xavier-villelegier · 2019-01-17T08:47:26Z

@haruelrovix I just approved your expense on OpenCollective, thanks again man, what an awesome PR ! 🥇 I'm sure it'll be very helpful for everyone.

The blog posts are awesome, so many possibilities ! Thanks for letting us know that it exists @iRoachie

haruelrovix added 4 commits November 24, 2018 08:46

Update README.md

a066a04

Create a React Native Web support section on the main Readme.md

RNW docs placeholder

0452f3e

Comprehensive Guide to create simple app

59cc435

using React Native Web and React Native Elements

Merge branch 'next' into feature/RNExRNW

3bc2cc1

Add link to full documentation

65f4ae4

iRoachie added the 📖 Docs label Dec 13, 2018

Monte9 reviewed Jan 13, 2019

View reviewed changes

README.md Outdated Show resolved Hide resolved

Monte9 reviewed Jan 13, 2019

View reviewed changes

README.md Outdated Show resolved Hide resolved

Monte9 reviewed Jan 13, 2019

View reviewed changes

Monte9 approved these changes Jan 13, 2019

View reviewed changes

Update link and delete unnecessary part

c2d06e2

haruelrovix and others added 3 commits January 14, 2019 18:04

Update the copy on the home page

fb051e9

feat: Add react-native-web setup as a blog post

10b4e87

docs: Update home page link to react native web

732b761

iRoachie merged commit ee18171 into react-native-elements:next Jan 17, 2019

chris-rosney mentioned this pull request Jan 23, 2019

Consider publishing a transpiled dist folder for react-native-web support #1724

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

React Native Web support #1664

React Native Web support #1664

haruelrovix commented Dec 13, 2018 •

edited by iRoachie

Loading

codecov bot commented Dec 13, 2018 •

edited

Loading

iRoachie commented Dec 13, 2018

Monte9 commented Dec 13, 2018

xavier-villelegier commented Dec 13, 2018

iRoachie commented Dec 13, 2018

xavier-villelegier commented Dec 13, 2018

iRoachie commented Dec 13, 2018

xavier-villelegier commented Dec 13, 2018

haruelrovix commented Dec 15, 2018 •

edited

Loading

andangrd commented Dec 17, 2018

Monte9 Jan 13, 2019

Monte9 Jan 13, 2019

Monte9 left a comment

Monte9 commented Jan 13, 2019

Monte9 commented Jan 13, 2019

haruelrovix commented Jan 14, 2019

iRoachie commented Jan 14, 2019

haruelrovix commented Jan 14, 2019

iRoachie commented Jan 17, 2019

Monte9 commented Jan 17, 2019

haruelrovix commented Jan 17, 2019

iRoachie commented Jan 17, 2019

iRoachie commented Jan 17, 2019

xavier-villelegier commented Jan 17, 2019

		@@ -0,0 +1,618 @@
		# Comprehensive Guide to create simple app using React Native Web and React Native Elements


		For native, it’s easier. We can use `FlatList` `onEndReached` props. To give you an idea how, see this: [9d2e1f2](https://github.com/haruelrovix/rnw-github/pull/2/commits/9d2e1f2a3e8605f8184f1f8950eb0175045bb67a).

		## Troubleshooting 💺

React Native Web support #1664

React Native Web support #1664

Conversation

haruelrovix commented Dec 13, 2018 • edited by iRoachie Loading

codecov bot commented Dec 13, 2018 • edited Loading

Codecov Report

iRoachie commented Dec 13, 2018

Monte9 commented Dec 13, 2018

xavier-villelegier commented Dec 13, 2018

iRoachie commented Dec 13, 2018

xavier-villelegier commented Dec 13, 2018

iRoachie commented Dec 13, 2018

xavier-villelegier commented Dec 13, 2018

haruelrovix commented Dec 15, 2018 • edited Loading

andangrd commented Dec 17, 2018

Monte9 Jan 13, 2019

Choose a reason for hiding this comment

Monte9 Jan 13, 2019

Choose a reason for hiding this comment

Monte9 left a comment

Choose a reason for hiding this comment

Monte9 commented Jan 13, 2019

Monte9 commented Jan 13, 2019

haruelrovix commented Jan 14, 2019

iRoachie commented Jan 14, 2019

haruelrovix commented Jan 14, 2019

iRoachie commented Jan 17, 2019

Monte9 commented Jan 17, 2019

haruelrovix commented Jan 17, 2019

iRoachie commented Jan 17, 2019

iRoachie commented Jan 17, 2019

xavier-villelegier commented Jan 17, 2019

haruelrovix commented Dec 13, 2018 •

edited by iRoachie

Loading

codecov bot commented Dec 13, 2018 •

edited

Loading

haruelrovix commented Dec 15, 2018 •

edited

Loading