[Expo] Updated React Native example (#8376)

* Created a new example for React Native web

- use the latest `react-native-web`
- remove unused `react-art`
- remove redundant `babel-plugin-module-resolver`
- remove unused `.babelrc`
- add missing `app.json` (standard in React Native)
- added example for rendering an `<a />`
- added header examples

* `yarn lint-fix`

examples/with-react-native-web/.babelrc

@@ -1,16 +0,0 @@
-{
-  "presets": [
-    "next/babel"
-  ],
-  "plugins": [
-    [
-      "module-resolver",
-      {
-        "root": ["./"],
-        "alias": {
-          "^react-native$": "react-native-web"
-        }
-      }
-    ]
-  ]
-}

examples/with-react-native-web/app.json

@@ -0,0 +1,4 @@
+{
+  "name": "with-react-native-web",
+  "displayName": "with-react-native-web"
+}

examples/with-react-native-web/next.config.js

@@ -1,11 +1,10 @@
 module.exports = {
   webpack: config => {
-    // Alias all `react-native` imports to `react-native-web`
     config.resolve.alias = {
       ...(config.resolve.alias || {}),
+      // Transform all direct `react-native` imports to `react-native-web`
       'react-native$': 'react-native-web'
     }
-
     return config
   }
 }

examples/with-react-native-web/package.json

@@ -6,11 +6,9 @@
     "start": "next start"
   },
   "dependencies": {
-    "babel-plugin-module-resolver": "^3.1.2",
     "next": "latest",
     "react": "^16.7.0",
-    "react-art": "^16.5.2",
     "react-dom": "^16.7.0",
-    "react-native-web": "^0.9.3"
+    "react-native-web": "^0.11.6"
   }
 }

examples/with-react-native-web/pages/_document.js

@@ -1,7 +1,7 @@
 import Document, { Head, Main, NextScript } from 'next/document'
 import React from 'react'
 import { AppRegistry } from 'react-native-web'
-
+import config from '../app.json'
 // Force Next-generated DOM elements to fill their parent's height
 const normalizeNextElements = `
   #__next {
@@ -13,8 +13,8 @@ const normalizeNextElements = `
 
 export default class MyDocument extends Document {
   static async getInitialProps ({ renderPage }) {
-    AppRegistry.registerComponent('Main', () => Main)
-    const { getStyleElement } = AppRegistry.getApplication('Main')
+    AppRegistry.registerComponent(config.name, () => Main)
+    const { getStyleElement } = AppRegistry.getApplication(config.name)
     const page = renderPage()
     const styles = [
       <style dangerouslySetInnerHTML={{ __html: normalizeNextElements }} />,

examples/with-react-native-web/pages/alternate.js

@@ -0,0 +1,30 @@
+import * as React from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+
+export default () => (
+  <View style={styles.container}>
+    <Text accessibilityRole='header' style={styles.text}>
+      Alternate Page
+    </Text>
+
+    <Text style={styles.link} accessibilityRole='link' href={`/`}>
+      Go Back
+    </Text>
+  </View>
+)
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    flexGrow: 1,
+    justifyContent: 'center'
+  },
+  text: {
+    alignItems: 'center',
+    fontSize: 24,
+    marginBottom: 24
+  },
+  link: {
+    color: 'blue'
+  }
+})

examples/with-react-native-web/pages/index.js

@@ -1,20 +1,42 @@
-import React from 'react'
+import * as React from 'react'
 import { StyleSheet, Text, View } from 'react-native'
 
+export default function App (props) {
+  return (
+    <View style={styles.container}>
+      <Text accessibilityRole='header' style={styles.text}>
+        React Native for Web & Next.js
+      </Text>
+
+      <Text style={styles.link} accessibilityRole='link' href={`/alternate`}>
+        A universal link
+      </Text>
+
+      <View style={styles.textContainer}>
+        <Text accessibilityRole='header' aria-level='2' style={styles.text}>
+          Subheader
+        </Text>
+      </View>
+    </View>
+  )
+}
+
 const styles = StyleSheet.create({
   container: {
     alignItems: 'center',
     flexGrow: 1,
     justifyContent: 'center'
   },
+  link: {
+    color: 'blue'
+  },
+  textContainer: {
+    alignItems: 'center',
+    marginTop: 16
+  },
   text: {
     alignItems: 'center',
-    fontSize: 24
+    fontSize: 24,
+    marginBottom: 24
   }
 })
-
-export default props => (
-  <View style={styles.container}>
-    <Text style={styles.text}>Welcome to Next.js!</Text>
-  </View>
-)