Add with-react-native-web example (#3781)

* Add with-react-native-web example Showcase the required work to use [react-native-web](https://github.com/necolas/react-native-web) with Next.js. * Repair lint warnings
2024-01-19 02:48:18 +00:00 · 2018-02-13 10:42:31 -06:00 · 2018-02-13 10:42:31 -06:00 · 8b1458af4f
parent fc3b3a4101
commit 8b1458af4f
5 changed files with 128 additions and 0 deletions
--- a/examples/with-react-native-web/.babelrc
+++ b/examples/with-react-native-web/.babelrc
@ -0,0 +1,4 @@
+{
+  "presets": ["next/babel"],
+  "plugins": ["react-native-web"]
+}
--- a/examples/with-react-native-web/README.md
+++ b/examples/with-react-native-web/README.md
@ -0,0 +1,42 @@
+[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/with-react-native-web)
+
+## How to use
+
+### Using `create-next-app`
+
+Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example:
+
+```
+npm i -g create-next-app
+create-next-app --example with-react-native-web
+```
+
+### Download manually
+
+Download the example [or clone the repo](https://github.com/zeit/next.js):
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-emotion
+cd with-react-native-web
+```
+
+Install it and run:
+
+```bash
+npm install
+npm run dev
+```
+
+Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))
+
+```bash
+now
+```
+
+## The idea behind the example
+
+This example features how to use [react-native-web](https://github.com/necolas/react-native-web) to bring the platform-agnostic Components and APIs of React Native to the web.
+
+> **High-quality user interfaces**: React Native for Web makes it easy to create fast, adaptive web UIs in JavaScript. It provides native-like interactions, support for multiple input modes (touch, mouse, keyboard), optimized vendor-prefixed styles, built-in support for RTL layout, built-in accessibility, and integrates with React Dev Tools.
+>
+> **Write once, render anywhere**: React Native for Web interoperates with existing React DOM components and is compatible with the majority of the React Native API. You can develop new components for native and web without rewriting existing code. React Native for Web can also render to HTML and critical CSS on the server using Node.js.
--- a/examples/with-react-native-web/package.json
+++ b/examples/with-react-native-web/package.json
@ -0,0 +1,17 @@
+{
+  "name": "with-react-native-web",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "latest",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0",
+    "react-native-web": "^0.4.0"
+  },
+  "devDependencies": {
+    "babel-plugin-react-native-web": "^0.4.0"
+  }
+}
--- a/examples/with-react-native-web/pages/_document.js
+++ b/examples/with-react-native-web/pages/_document.js
@ -0,0 +1,45 @@
+import Document, { Head, Main, NextScript } from 'next/document'
+import React from 'react'
+import { AppRegistry } from 'react-native-web'
+
+let index = 0
+
+// Force Next-generated DOM elements to fill their parent's height.
+// Not required for using of react-native-web, but helps normalize
+// layout for top-level wrapping elements.
+const normalizeNextElements = `
+  body > div:first-child,
+  #__next {
+    height: 100%;
+  }
+`
+
+export default class MyDocument extends Document {
+  static async getInitialProps ({ renderPage }) {
+    AppRegistry.registerComponent('Main', () => Main)
+    const { getStyleElement } = AppRegistry.getApplication('Main')
+    const page = renderPage()
+    const styles = [
+      <style
+        key={index++}
+        dangerouslySetInnerHTML={{ __html: normalizeNextElements }}
+      />,
+      getStyleElement()
+    ]
+    return { ...page, styles }
+  }
+
+  render () {
+    return (
+      <html style={{ height: '100%', width: '100%' }}>
+        <Head>
+          <title>react-native-web</title>
+        </Head>
+        <body style={{ height: '100%', width: '100%', overflowY: 'scroll' }}>
+          <Main />
+          <NextScript />
+        </body>
+      </html>
+    )
+  }
+}
--- a/examples/with-react-native-web/pages/index.js
+++ b/examples/with-react-native-web/pages/index.js
@ -0,0 +1,20 @@
+import React from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    height: '100%',
+    justifyContent: 'center'
+  },
+  text: {
+    alignItems: 'center',
+    fontSize: 24
+  }
+})
+
+export default props => (
+  <View style={styles.container}>
+    <Text style={styles.text}>Welcome to Next.js!</Text>
+  </View>
+)