diff --git a/website/src/react-native/css/react-native.css b/website/src/react-native/css/react-native.css index 54e3930f9..034d52e26 100644 --- a/website/src/react-native/css/react-native.css +++ b/website/src/react-native/css/react-native.css @@ -701,6 +701,10 @@ figure { width: 650px; } +.showcaseSection .inner-content { + width: 800px; +} + .nosidebar .inner-content { float: none; margin: 0 auto; @@ -1084,18 +1088,17 @@ div[data-twttr-id] iframe { } .showcaseHeader { - text-align: center; padding-bottom: 15px; padding-top: 15px; + text-align: center; } .showcase { - margin: 30px auto; + margin: 30px auto 10px auto; width: 100%; display: inline-block; text-align: center; vertical-align: top; - transition: 0.2s opacity ease-in; } @media only screen @@ -1109,7 +1112,7 @@ div[data-twttr-id] iframe { @media only screen and (min-device-width: 1024px) { .showcase { - width: 25%; + width: 20%; } } diff --git a/website/src/react-native/showcase.js b/website/src/react-native/showcase.js index 706615c45..987580237 100644 --- a/website/src/react-native/showcase.js +++ b/website/src/react-native/showcase.js @@ -11,13 +11,111 @@ var React = require('React'); var Site = require('Site'); var center = require('center'); -var apps = [ +var featured = [ { - name: 'AIGA Design Conference 2015: New Orleans', + name: 'Facebook Groups', + icon: 'http://is4.mzstatic.com/image/pf/us/r30/Purple69/v4/57/f8/4c/57f84c0c-793d-5f9a-95ee-c212d0369e37/mzl.ugjwfhzx.png', + link: 'https://itunes.apple.com/us/app/facebook-groups/id931735837?mt=8', + author: 'Facebook', + }, + { + name: 'Facebook Ads Manager', + icon: 'http://is5.mzstatic.com/image/pf/us/r30/Purple5/v4/9e/16/86/9e1686ef-cc55-805a-c977-538ddb5e6832/mzl.gqbhwitj.png', + linkAppStore: 'https://itunes.apple.com/us/app/facebook-ads-manager/id964397083?mt=8', + linkPlayStore: 'https://play.google.com/store/apps/details?id=com.facebook.adsmanager', + author: 'Facebook', + blogs: [ + "https://code.facebook.com/posts/1014532261909640/react-native-bringing-modern-web-techniques-to-mobile/", + "https://code.facebook.com/posts/1189117404435352/react-native-for-android-how-we-built-the-first-cross-platform-react-native-app/", + "https://code.facebook.com/posts/435862739941212/making-react-native-apps-accessible/", + ], + }, + { + name: 'AIGA Design Conference 2015', icon: 'http://a5.mzstatic.com/us/r30/Purple69/v4/b0/4b/29/b04b2939-88d2-f61f-dec9-24fae083d8b3/icon175x175.png', link: 'https://itunes.apple.com/us/app/aiga-design-conference-2015/id1038145272?ls=1&mt=8', author: 'W&Co', }, + { + name: 'Discord', + icon: 'http://a5.mzstatic.com/us/r30/Purple5/v4/c1/2f/4c/c12f4cba-1d9a-f6bf-2240-04085d3470ec/icon175x175.jpeg', + link: 'https://itunes.apple.com/us/app/discord-chat-for-gamers/id985746746?mt=8', + author: 'Hammer & Chisel', + }, + { + name: 'Discovery VR', + icon: 'http://a2.mzstatic.com/us/r30/Purple6/v4/d1/d5/f4/d1d5f437-9f6b-b5aa-5fe7-47bd19f934bf/icon175x175.png', + link: 'https://itunes.apple.com/us/app/discovery-vr/id1030815031?mt=8', + author: 'Discovery Communications', + blog: [ + "https://medium.com/ios-os-x-development/an-ios-developer-on-react-native-1f24786c29f0", + ], + }, + { + name: 'Exponent', + icon: 'http://a4.mzstatic.com/us/r30/Purple2/v4/3a/d3/c9/3ad3c96c-5e14-f988-4bdd-0fdc95efd140/icon175x175.png', + link: 'http://exponentjs.com/', + author: 'Exponent', + }, + { + name: 'Lrn', + icon: 'http://is4.mzstatic.com/image/pf/us/r30/Purple1/v4/41/a9/e9/41a9e9b6-7801-aef7-2400-2eca14923321/mzl.adyswxad.png', + link: 'https://itunes.apple.com/us/app/lrn-learn-to-code-at-your/id1019622677', + author: 'Lrn Labs, Inc', + }, + { + name: 'Myntra', + icon: 'http://a5.mzstatic.com/us/r30/Purple6/v4/9c/78/df/9c78dfa6-0061-1af2-5026-3e1d5a073c94/icon350x350.png', + link: 'https://itunes.apple.com/in/app/myntra-fashion-shopping-app/id907394059', + author: 'Myntra Designs', + }, + { + name: 'React Native Playground', + icon: 'http://is5.mzstatic.com/image/pf/us/r30/Purple1/v4/20/ec/8e/20ec8eb8-9e12-6686-cd16-7ac9e3ef1d52/mzl.ngvuoybx.png', + linkAppStore: 'https://itunes.apple.com/us/app/react-native-playground/id1002032944?mt=8', + linkPlayStore: 'https://play.google.com/store/apps/details?id=org.rnplay.playground', + author: 'Joshua Sierles', + }, + { + name: 'Running', + icon: 'http://a1.mzstatic.com/us/r30/Purple3/v4/33/eb/4f/33eb4f73-c7e3-8659-9285-f758e403485b/icon175x175.jpeg', + link: 'https://gyrosco.pe/running/', + author: 'Gyroscope Innovations', + blogs: [ + 'https://blog.gyrosco.pe/the-making-of-gyroscope-running-a4ad10acc0d0', + ], + }, + { + name: 'Squad', + icon: 'http://a4.mzstatic.com/us/r30/Purple69/v4/e8/5b/3f/e85b3f52-72f3-f427-a32e-a73efe2e9682/icon175x175.jpeg', + link: 'https://itunes.apple.com/us/app/squad-snaps-for-groups-friends/id1043626975?mt=8', + author: 'Tackk Inc.', + }, + { + name: 'Start - medication manager for depression', + icon: 'http://a1.mzstatic.com/us/r30/Purple49/v4/de/9b/6f/de9b6fe8-84ea-7a12-ba2c-0a6d6c7b10b0/icon175x175.png', + link: 'https://itunes.apple.com/us/app/start-medication-manager-for/id1012099928?mt=8', + author: 'Iodine Inc.', + }, + { + name: 'Townske', + icon: 'http://a3.mzstatic.com/us/r30/Purple69/v4/8b/42/20/8b4220af-5165-91fd-0f05-014332df73ef/icon175x175.png', + link: 'https://itunes.apple.com/us/app/townske-stunning-city-guides/id1018136179?ls=1&mt=8', + author: 'Townske PTY LTD', + }, + { + name: 'Tucci', + icon: 'http://a3.mzstatic.com/us/r30/Purple3/v4/c0/0c/95/c00c95ce-4cc5-e516-db77-5c5164b89189/icon175x175.jpeg', + link: 'https://itunes.apple.com/app/apple-store/id1039661754?mt=8', + author: 'Clay Allsopp & Tiffany Young', + blogs: [ + 'https://medium.com/@clayallsopp/making-tucci-what-is-it-and-why-eaa2bf94c1df#.lmm3dmkaf', + 'https://medium.com/@clayallsopp/making-tucci-the-technical-details-cc7aded6c75f#.wf72nq372', + ], + }, +]; + +var apps = [ { name: 'Beetroot', icon: 'http://is1.mzstatic.com/image/pf/us/r30/Purple5/v4/66/fd/dd/66fddd70-f848-4fc5-43ee-4d52197ccab8/pr_source.png', @@ -44,54 +142,17 @@ var apps = [ author: 'The Formations Factory Ltd', }, { - name: 'DareU - dare your friends, dare the world', + name: 'DareU', icon: 'http://a3.mzstatic.com/us/r30/Purple6/v4/10/fb/6a/10fb6a50-57c8-061a-d865-503777bf7f00/icon175x175.png', link: 'https://itunes.apple.com/us/app/dareu-dare-your-friends-dare/id1046434563?mt=8', author: 'Rishabh Mehan', }, - { - name: 'Discord', - icon: 'http://a5.mzstatic.com/us/r30/Purple5/v4/c1/2f/4c/c12f4cba-1d9a-f6bf-2240-04085d3470ec/icon175x175.jpeg', - link: 'https://itunes.apple.com/us/app/discord-chat-for-gamers/id985746746?mt=8', - author: 'Hammer & Chisel', - }, - { - name: 'Discovery VR', - icon: 'http://a2.mzstatic.com/us/r30/Purple6/v4/d1/d5/f4/d1d5f437-9f6b-b5aa-5fe7-47bd19f934bf/icon175x175.png', - link: 'https://itunes.apple.com/us/app/discovery-vr/id1030815031?mt=8', - author: 'Discovery Communications', - }, { name: 'DropBot', icon: 'http://a2.mzstatic.com/us/r30/Purple69/v4/fb/df/73/fbdf73e0-22d2-c936-3115-1defa195acba/icon175x175.png', link: 'https://itunes.apple.com/us/app/dropbot-phone-replacement/id1000855694?mt=8', author: 'Peach Labs', }, - { - name: 'Exponent', - icon: 'http://a4.mzstatic.com/us/r30/Purple2/v4/3a/d3/c9/3ad3c96c-5e14-f988-4bdd-0fdc95efd140/icon175x175.png', - link: 'https://itunes.apple.com/ca/app/exponent/id982107779?mt=8', - author: 'Exponent', - }, - { - name: 'F8', - icon: 'http://is4.mzstatic.com/image/pf/us/r30/Purple5/v4/bf/d9/50/bfd9504e-a1bd-67c5-b50b-24e97016dae9/pr_source.jpg', - link: 'https://itunes.apple.com/us/app/f8/id853467066?mt=8', - author: 'Facebook', - }, - { - name: 'Facebook Groups', - icon: 'http://is4.mzstatic.com/image/pf/us/r30/Purple69/v4/57/f8/4c/57f84c0c-793d-5f9a-95ee-c212d0369e37/mzl.ugjwfhzx.png', - link: 'https://itunes.apple.com/us/app/facebook-groups/id931735837?mt=8', - author: 'Facebook', - }, - { - name: 'Facebook Ads Manager', - icon: 'http://is5.mzstatic.com/image/pf/us/r30/Purple5/v4/9e/16/86/9e1686ef-cc55-805a-c977-538ddb5e6832/mzl.gqbhwitj.png', - linkAppStore: 'https://itunes.apple.com/us/app/facebook-ads-manager/id964397083?mt=8', - linkPlayStore: 'https://play.google.com/store/apps/details?id=com.facebook.adsmanager', - author: 'Facebook', - }, { name: 'Fan of it', icon: 'http://a4.mzstatic.com/us/r30/Purple3/v4/c9/3f/e8/c93fe8fb-9332-e744-f04a-0f4f78e42aa8/icon350x350.png', @@ -159,12 +220,6 @@ var apps = [ link: 'https://itunes.apple.com/us/app/loaddocs/id1041596066', author: 'LoadDocs', }, - { - name: 'Lrn', - icon: 'http://is4.mzstatic.com/image/pf/us/r30/Purple1/v4/41/a9/e9/41a9e9b6-7801-aef7-2400-2eca14923321/mzl.adyswxad.png', - link: 'https://itunes.apple.com/us/app/lrn-learn-to-code-at-your/id1019622677', - author: 'Lrn Labs, Inc', - }, { name: 'Lumpen Radio', icon: 'http://is5.mzstatic.com/image/pf/us/r30/Purple1/v4/46/43/00/464300b1-fae3-9640-d4a2-0eb050ea3ff2/mzl.xjjawige.png', @@ -180,13 +235,8 @@ var apps = [ { name: 'MaxReward - Android', icon: 'https://lh3.googleusercontent.com/yynCUCdEnyW6T96xCto8KzWQr4Yeiy0M6c2p8auYMIyFgAZVBsjf4JCEX7QkPijhBg=w175-rw', - link: 'https://play.google.com/store/apps/details?id=com.bitstrek.maxreward&hl=en', - author: 'Neil Ma', - }, - { - name: 'MaxReward - iOS', - icon: 'https://lh3.googleusercontent.com/yynCUCdEnyW6T96xCto8KzWQr4Yeiy0M6c2p8auYMIyFgAZVBsjf4JCEX7QkPijhBg=w175-rw', - link: 'https://itunes.apple.com/us/app/maxreward/id1050479192?ls=1&mt=8', + linkAppStore: 'https://itunes.apple.com/us/app/maxreward/id1050479192?ls=1&mt=8', + linkPlayStore: 'https://play.google.com/store/apps/details?id=com.bitstrek.maxreward&hl=en', author: 'Neil Ma', }, { @@ -201,12 +251,6 @@ var apps = [ link: 'https://itunes.apple.com/us/app/mr.-dapper-men-fashion-app/id989735184?ls=1&mt=8', author: 'wei ping woon', }, - { - name: 'Myntra', - icon: 'http://a5.mzstatic.com/us/r30/Purple6/v4/9c/78/df/9c78dfa6-0061-1af2-5026-3e1d5a073c94/icon350x350.png', - link: 'https://itunes.apple.com/in/app/myntra-fashion-shopping-app/id907394059', - author: 'Myntra Designs', - }, { name: 'Nalathe Kerala', icon: 'https://lh3.googleusercontent.com/5N0WYat5WuFbhi5yR2ccdbqmiZ0wbTtKRG9GhT3YK7Z-qRvmykZyAgk0HNElOxD2JOPr=w300-rw', @@ -267,13 +311,6 @@ var apps = [ link: 'https://itunes.apple.com/us/app/repairshopr-payments-lite/id1023262888?mt=8', author: 'Jed Tiotuico', }, - { - name: 'RN Playground', - icon: 'http://is5.mzstatic.com/image/pf/us/r30/Purple1/v4/20/ec/8e/20ec8eb8-9e12-6686-cd16-7ac9e3ef1d52/mzl.ngvuoybx.png', - linkAppStore: 'https://itunes.apple.com/us/app/react-native-playground/id1002032944?mt=8', - linkPlayStore: 'https://play.google.com/store/apps/details?id=org.rnplay.playground', - author: 'Joshua Sierles', - }, { name: 'Rota Employer - Hire On Demand', link: 'https://itunes.apple.com/us/app/rota-employer-hire-on-demand/id1042270305?mt=8', @@ -298,18 +335,6 @@ var apps = [ link: 'https://geo.itunes.apple.com/us/app/spero-for-cancer/id1033923573?mt=8', author: 'Spero.io', }, - { - name: 'Squad', - icon: 'http://a4.mzstatic.com/us/r30/Purple69/v4/e8/5b/3f/e85b3f52-72f3-f427-a32e-a73efe2e9682/icon175x175.jpeg', - link: 'https://itunes.apple.com/us/app/squad-snaps-for-groups-friends/id1043626975?mt=8', - author: 'Tackk Inc.', - }, - { - name: 'Start - medication manager for depression', - icon: 'http://a1.mzstatic.com/us/r30/Purple49/v4/de/9b/6f/de9b6fe8-84ea-7a12-ba2c-0a6d6c7b10b0/icon175x175.png', - link: 'https://itunes.apple.com/us/app/start-medication-manager-for/id1012099928?mt=8', - author: 'Iodine Inc.', - }, { name: 'Tabtor Parent', icon: 'http://a1.mzstatic.com/us/r30/Purple4/v4/80/50/9d/80509d05-18f4-a0b8-0cbb-9ba927d04477/icon175x175.jpeg', @@ -322,12 +347,6 @@ var apps = [ link: 'https://itunes.apple.com/cn/app/tong-xing-wang/id914254459?mt=8', author: 'Ho Yin Tsun Eugene', }, - { - name: 'Townske - Stunning City Guides Made By Locals & Traveller', - icon: 'http://a3.mzstatic.com/us/r30/Purple69/v4/8b/42/20/8b4220af-5165-91fd-0f05-014332df73ef/icon175x175.png', - link: 'https://itunes.apple.com/us/app/townske-stunning-city-guides/id1018136179?ls=1&mt=8', - author: 'Townske PTY LTD', - }, { name: 'WOOP', icon: 'http://a4.mzstatic.com/us/r30/Purple6/v4/b0/44/f9/b044f93b-dbf3-9ae5-0f36-9b4956628cab/icon350x350.jpeg', @@ -366,39 +385,102 @@ var apps = [ }, ]; -var showcase = React.createClass({ - renderLinks: function(app) { +var AppList = React.createClass({ + + render: function() { return ( -

iOS - Android

+
+ {this.props.apps.map(this._renderApp)} +
+ ) + }, + + _renderApp: function(app, i) { + var inner = ( +
+ {app.name} +

{app.name}

+ {app.linkAppStore && app.linkPlayStore ? this._renderLinks(app) : null} +

By {app.author}

+ {this._renderBlogPosts(app)} +
+ ); + + if (app.linkAppStore && app.linkPlayStore) { + return (
{inner}
); + } + + return ( +
+ + {inner} + +
); }, + + _renderBlogPosts: function(app) { + if (!app.blogs) { + return; + } + + if (app.blogs.length === 1) { + return ( +

Blog post

+ ); + } else if (app.blogs.length > 1) { + return ( +

Blog posts: {app.blogs.map(this._renderBlogPost)}

+ ); + } + }, + + _renderBlogPost: function(url, i) { + return ( + + {i + 1}  + + ); + }, + + _renderLinks: function(app) { + return ( +

+ iOS - + Android +

+ ); + }, +}); + +var showcase = React.createClass({ render: function() { return ( -
+
-

Apps using React Native

+

Apps using React Native

-

- Here is a list of apps using React Native. Submit a pull request on GitHub to list your app. -

+

The following is a list of some of the public apps using React Native and are published on the Apple App Store or the Google Play Store. Not all are implemented 100% in React Native -- many are hybrid native/React Native. Can you tell which parts are which? :)

+

Want to add your app? Found an app that no longer works or no longer uses React Native? Please submit a pull request on GitHub to update this page!

+
+ +
+

Featured Apps

+
+

These are some of the most well-crafted React Native apps that we have come across.
Be sure to check them out to get a feel for what React Native is capable of!

+
+
+ +
+ +
+

All Apps

+

Not all apps can be featured, otherwise we would have to create some other category like "super featured" and that's just silly. But that doesn't mean you shouldn't check these apps out!

+
+
+
- { - apps.map((app, i) => { - var inner = ( -
- {app.name} -

{app.name}

- {app.linkAppStore && app.linkPlayStore ? this.renderLinks(app) : null} -

By {app.author}

-
- ); - if (app.linkAppStore && app.linkPlayStore) { - return (
{inner}
); - } - return ({inner}); - }) - }
);