diff --git a/website/core/HeaderLinks.js b/website/core/HeaderLinks.js index 8934dd4fb..c70b3c92d 100644 --- a/website/core/HeaderLinks.js +++ b/website/core/HeaderLinks.js @@ -16,7 +16,8 @@ var HeaderLinks = React.createClass({ {section: 'docs', href: '/react-native/docs/getting-started.html', text: 'Docs'}, {section: 'support', href: '/react-native/support.html', text: 'Support'}, {section: 'releases', href: 'https://github.com/facebook/react-native/releases', text: 'Releases'}, - {section: 'newsletter', href: 'http://reactnative.cc', text: 'Newsletter'} + {section: 'newsletter', href: 'http://reactnative.cc', text: 'Newsletter'}, + {section: 'showcase', href: '/react-native/showcase.html', text: 'Showcase'}, ], linksExternal: [ {section: 'github', href: 'https://github.com/facebook/react-native', text: 'GitHub'}, diff --git a/website/src/react-native/css/react-native.css b/website/src/react-native/css/react-native.css index cee9a1307..bf0d50817 100644 --- a/website/src/react-native/css/react-native.css +++ b/website/src/react-native/css/react-native.css @@ -992,6 +992,17 @@ div[data-twttr-id] iframe { display: none; } +.showcase { + margin: 40px 40px 40px 0px; + width: 25%; + display: inline-block; +} + +.showcase img { + width: 175px; + border-radius: 20px; +} + @media only screen and (max-device-width : 1024px) { #content { display: inline; diff --git a/website/src/react-native/showcase.js b/website/src/react-native/showcase.js new file mode 100644 index 000000000..7b2f2cde8 --- /dev/null +++ b/website/src/react-native/showcase.js @@ -0,0 +1,138 @@ +/** + * Copyright (c) 2015-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + */ + +var React = require('React'); +var Site = require('Site'); +var center = require('center'); + +var apps = [ + { + 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: '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: 'FB 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: 'FB Ads Manager - ios', + icon: 'http://is5.mzstatic.com/image/pf/us/r30/Purple5/v4/9e/16/86/9e1686ef-cc55-805a-c977-538ddb5e6832/mzl.gqbhwitj.png', + link: 'https://itunes.apple.com/us/app/facebook-ads-manager/id964397083?mt=8', + author: 'Facebook', + }, + { + 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', + link: 'https://itunes.apple.com/us/app/react-native-playground/id1002032944?mt=8', + author: 'Joshua Sierles', + }, + { + name: 'Beetroot', + icon: 'http://is1.mzstatic.com/image/pf/us/r30/Purple5/v4/66/fd/dd/66fddd70-f848-4fc5-43ee-4d52197ccab8/pr_source.png', + link: 'https://itunes.apple.com/us/app/beetroot/id1016159001?ls=1&mt=8', + author: 'Alex Duckmanton', + }, + { + name: 'FB Ads Manager - Android', + icon: 'https://lh3.googleusercontent.com/ODKlFYm7BaNiLMEEDO2b4DOCU-hmS1-Fg3_x_lLUaJZ0ssFsxciSoX1dYERaWDJuEs8=w300-rw', + link: 'https://play.google.com/store/apps/details?id=com.facebook.adsmanager', + author: 'Facebook', + }, + { + name: 'Night Light', + icon: 'http://is3.mzstatic.com/image/pf/us/r30/Purple7/v4/5f/50/5f/5f505fe5-0a30-6bbf-6ed9-81ef09351aba/mzl.lkeqxyeo.png', + link: 'https://itunes.apple.com/gb/app/night-light-feeding-light/id1016843582?mt=8', + author: 'Tian Yuan', + }, + { + 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', + link: 'https://itunes.apple.com/us/app/lumpen-radio/id1002193127?mt=8', + author: 'Joshua Habdas', + }, + { + name: 'Mr. Dapper', + icon: 'http://is5.mzstatic.com/image/pf/us/r30/Purple4/v4/e8/3f/7c/e83f7cb3-2602-f8e8-de9a-ce0a775a4a14/mzl.hmdjhfai.png', + link: 'https://itunes.apple.com/us/app/mr.-dapper-men-fashion-app/id989735184?ls=1&mt=8', + author: 'wei ping woon', + }, + { + name: 'HSK Level 1 Chinese Flashcards', + icon: 'http://is2.mzstatic.com/image/pf/us/r30/Purple1/v4/b2/4f/3a/b24f3ae3-2597-cc70-1040-731b425a5904/mzl.amxdcktl.jpg', + link: 'https://itunes.apple.com/us/app/hsk-level-1-chinese-flashcards/id936639994', + author: 'HS Schaaf', + }, + { + name: 'youmeyou', + icon: 'http://is1.mzstatic.com/image/pf/us/r30/Purple7/v4/7c/42/30/7c423042-8945-7733-8af3-1523468706a8/mzl.qlecxphf.png', + link: 'https://itunes.apple.com/us/app/youmeyou/id949540333?mt=8', + author: 'youmeyou, LLC', + }, + { + name: 'MinTrain', + icon: 'http://is5.mzstatic.com/image/pf/us/r30/Purple5/v4/51/51/68/51516875-1323-3100-31a8-cd1853d9a2c0/mzl.gozwmstp.png', + link: 'https://itunes.apple.com/us/app/mintrain/id1015739031?mt=8', + author: 'Peter Cottle', + }, + { + name: 'Ncredible', + icon: 'http://a3.mzstatic.com/us/r30/Purple2/v4/a9/00/74/a9007400-7ccf-df10-553b-3b6cb67f3f5f/icon350x350.png', + link: 'https://itunes.apple.com/ca/app/ncredible/id1019662810?mt=8', + author: 'NBC News Digital, LLC', + }, + { + name: 'ReactTo36', + icon: 'http://is2.mzstatic.com/image/pf/us/r30/Purple5/v4/e3/c8/79/e3c87934-70c6-4974-f20d-4adcfc68d71d/mzl.wevtbbkq.png', + link: 'https://itunes.apple.com/us/app/reactto36/id989009293?mt=8', + author: 'Jonathan Solichin', + }, +]; + +var showcase = React.createClass({ + render: function() { + return ( + +
+
+

Apps using React Native

+
+

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

+
+ { + apps.map((app, i) => { + return ( +
+
+ {app.name} +

{app.name}

+

By {app.author}

+
+
+ ); + }) + } +
+
+ ); + } +}); + +module.exports = showcase;