Merge branch 'master' into feature/tv-support

Author: dev-seb

.eslintrc

@@ -17,35 +17,24 @@
     "sourceType": "module"
   },
   "extends": [
+    "plugin:flowtype/recommended",
     "prettier",
     "prettier/react"
   ],
   "plugins": [
+    "flowtype",
     "promise",
-    "react"
+    "react",
+    "react-hooks"
   ],
   "env": {
+    "browser": true,
     "es6": true,
+    "jest": true,
     "node": true
   },
   "globals": {
-    "document": false,
-    "navigator": false,
-    "window": false,
-    // Flow global types,
-    "$Enum": false,
-    "$PropertyType": false,
-    "$ReadOnly": false,
-    "$ReadOnlyArray": false,
-    "CSSStyleSheet": false,
-    "HTMLInputElement": false,
-    "ReactClass": false,
-    "ReactComponent": false,
-    "ReactElement": false,
-    "ReactPropsChainableTypeChecker": false,
-    "ReactPropsCheckType": false,
-    "ReactPropTypes": false,
-    "SyntheticEvent": false
+
   },
   "rules": {
     "camelcase": 0,
@@ -135,6 +124,10 @@
     "valid-typeof": 2,
     "yoda": [2, "never"],
 
+    // flow
+    "flowtype/generic-spacing": 0,
+    "flowtype/space-after-type-colon": 0,
+
     // promise
     "promise/param-names": 2,
 
@@ -159,6 +152,10 @@
     "react/self-closing-comp": 2,
     "react/sort-comp": 0,
     "react/sort-prop-types": 2,
-    "react/wrap-multilines": 0
+    "react/wrap-multilines": 0,
+
+    // react-hooks
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn"
   }
 }

.flowconfig

@@ -5,6 +5,7 @@
 <PROJECT_ROOT>/.*/__tests__/.*
 <PROJECT_ROOT>/packages/.*/dist/.*
 <PROJECT_ROOT>/packages/docs/.*
+.*/node_modules/@emotion/css/*
 .*/node_modules/babel-plugin-transform-react-remove-prop-types/*
 
 [include]

.github/workflows/performance.yml

@@ -0,0 +1,15 @@
+name: performance
+
+on: [pull_request]
+
+jobs:
+  compressed-size:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v2
+    - uses: necolas/compressed-size-action@master
+      with:
+        build-script: "compile"
+        exclude: "./packages/react-native-web/dist/cjs/{index.js,**/*.js}"
+        pattern: "./packages/react-native-web/dist/{index.js,**/*.js}"
+        repo-token: "${{ secrets.GITHUB_TOKEN }}"

.github/workflows/test.yml

@@ -0,0 +1,53 @@
+name: test
+
+on:
+  push:
+    branches:
+      - "master"
+  pull_request:
+    types: [opened, synchronize, reopened]
+
+jobs:
+  format:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v2
+    - uses: actions/setup-node@v1
+      with:
+        node-version: '14.x'
+    - run: npm install -g yarn
+    - run: yarn install
+    - run: yarn fmt:report
+
+  type-check:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v2
+    - uses: actions/setup-node@v1
+      with:
+        node-version: '14.x'
+    - run: npm install -g yarn
+    - run: yarn install
+    - run: yarn flow
+
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v2
+    - uses: actions/setup-node@v1
+      with:
+        node-version: '14.x'
+    - run: npm install -g yarn
+    - run: yarn install
+    - run: yarn lint:report
+
+  unit-test:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v2
+    - uses: actions/setup-node@v1
+      with:
+        node-version: '14.x'
+    - run: npm install -g yarn
+    - run: yarn install
+    - run: yarn jest

.travis.yml

@@ -2,7 +2,7 @@
 
 [![npm version][package-badge]][package-url] [![Build Status][ci-badge]][ci-url] [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://reactjs.org/docs/how-to-contribute.html#your-first-pull-request)
 
-**Compatibility: React Native >= 0.60**.
+**Compatibility: React Native >= 0.63**.
 
 "React Native for Web" makes it possible to run [React
 Native][react-native-url] components and APIs on the web using React DOM.
@@ -20,8 +20,9 @@ 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.
 
-Who is using React Native in production web apps?
+Who is using React Native for Web in production?
 [Twitter](https://mobile.twitter.com),
+[Expo](https://docs.expo.io/workflow/web/),
 [Major League Soccer](https://matchcenter.mlssoccer.com),
 [Flipkart](https://twitter.com/naqvitalha/status/969577892991549440),
 [Uber](https://www.youtube.com/watch?v=RV9rxrNIxnY),
@@ -49,7 +50,11 @@ system](https://facebook.github.io/react-native/docs/gesture-responder-system.ht
 [animations](https://facebook.github.io/react-native/docs/animations.html), and
 other design details.
 
-## Integrations
+## Libraries and integrations
+
+List of React Native packages with known web compatibility:
+
+* [React Native Directory](https://reactnative.directory/?web=true)
 
 Examples of using React Native for Web with other web tools:
 
@@ -64,7 +69,7 @@ Examples of using React Native for Web with other web tools:
 
 ## Examples
 
-And here is a simple example to get you started. The documentation include
+And here is a simple example to get you started. The documentation includes
 interactive examples and the [source
 code](https://github.com/necolas/react-native-web/blob/master/packages/docs) is
 also available.
@@ -113,8 +118,9 @@ React Native v0.60
 | Image                    | ✓      | Missing multiple sources ([#515](https://github.com/necolas/react-native-web/issues/515)) and HTTP headers ([#1019](https://github.com/necolas/react-native-web/issues/1019)). |
 | ImageBackground          | ✓      |  |
 | KeyboardAvoidingView     | (✓)    | Mock. No equivalent web APIs. |
-| Modal                    | ✘      | Not started ([#1020](https://github.com/necolas/react-native-web/issues/1020)). |
+| Modal                    | ✓      |  |
 | Picker                   | ✓      |  |
+| Pressable                | ✓      |  |
 | RefreshControl           | ✘      | Not started ([#1027](https://github.com/necolas/react-native-web/issues/1027)). |
 | SafeAreaView             | ✓      |  |
 | ScrollView               | ✓      | Missing momentum scroll events ([#1021](https://github.com/necolas/react-native-web/issues/1021)). |
@@ -139,6 +145,7 @@ React Native v0.60
 | AccessibilityInfo        | (✓)    | Mock. No equivalent web APIs. |
 | Alert                    | ✘      | Not started ([#1026](https://github.com/necolas/react-native-web/issues/1026)). |
 | Animated                 | ✓      | Missing `useNativeDriver` support. |
+| Appearance               | ✓      |  |
 | AppRegistry              | ✓      | Includes additional support for server rendering with `getApplication`. |
 | AppState                 | ✓      |  |
 | BackHandler              | (✓)    | Mock. No equivalent web APIs. |
@@ -163,6 +170,8 @@ React Native v0.60
 | StyleSheet               | ✓      |  |
 | UIManager                | ✓      |  |
 | Vibration                | ✓      |  |
+| useColorScheme           | ✓      |  |
+| useWindowDimensions      | ✓      |  |
 
 ## Contributing
 
@@ -199,8 +208,8 @@ MIT license.
 
 [package-badge]: https://img.shields.io/npm/v/react-native-web.svg?style=flat
 [package-url]: https://yarnpkg.com/en/package/react-native-web
-[ci-badge]: https://travis-ci.org/necolas/react-native-web.svg?branch=master
-[ci-url]: https://travis-ci.org/necolas/react-native-web
+[ci-badge]: https://github.com/necolas/react-native-web/workflows/test/badge.svg
+[ci-url]: https://github.com/necolas/react-native-web/actions
 [react-native-url]: https://facebook.github.io/react-native/
 [contributing-url]: https://github.com/necolas/react-native-web/blob/master/.github/CONTRIBUTING.md
 [good-first-issue-url]: https://github.com/necolas/react-native-web/labels/good%20first%20issue

README.md

@@ -1,6 +1,6 @@
 {
   "private": true,
-  "version": "0.12.2",
+  "version": "0.14.10",
   "name": "monorepo",
   "scripts": {
     "clean": "del-cli ./packages/*/dist",
@@ -13,14 +13,15 @@
     "docs:release": "cd packages/docs && yarn release",
     "flow": "flow",
     "fmt": "prettier --write \"**/*.js\"",
+    "fmt:report": "prettier --check \"**/*.js\"",
     "jest": "jest --config ./scripts/jest/config.js",
-    "lint": "yarn lint:check --fix",
-    "lint:check": "eslint packages scripts",
+    "lint": "yarn lint:report --fix",
+    "lint:report": "eslint packages scripts",
     "precommit": "lint-staged",
     "prerelease": "yarn test && yarn compile && yarn compile:commonjs",
     "release": "node ./scripts/release/publish.js",
     "postrelease": "yarn benchmarks:release && yarn docs:release",
-    "test": "yarn flow && yarn lint:check && yarn jest --runInBand"
+    "test": "yarn flow && yarn lint:report && yarn jest --runInBand"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.4",
@@ -41,13 +42,12 @@
     "caniuse-api": "^3.0.0",
     "cross-env": "^6.0.3",
     "del-cli": "^3.0.0",
-    "enzyme": "^3.10.0",
-    "enzyme-adapter-react-16": "^1.14.0",
-    "enzyme-to-json": "^3.4.2",
     "eslint": "^6.5.1",
     "eslint-config-prettier": "^6.4.0",
+    "eslint-plugin-flowtype": "^4.7.0",
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-react": "^7.16.0",
+    "eslint-plugin-react-hooks": "^2.3.0",
     "flow-bin": "^0.109.0",
     "glob": "^7.1.4",
     "husky": "^3.0.8",

package.json

@@ -3,7 +3,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "name": "babel-plugin-react-native-web",
-  "version": "0.12.2",
+  "version": "0.14.10",
   "description": "Babel plugin for React Native for Web",
   "main": "index.js",
   "devDependencies": {

packages/babel-plugin-react-native-web/package.json

@@ -4,17 +4,20 @@ module.exports = {
   ActivityIndicator: true,
   Alert: true,
   Animated: true,
+  Appearance: true,
   AppRegistry: true,
   AppState: true,
   BackHandler: true,
   Button: true,
   CheckBox: true,
   Clipboard: true,
+  createElement: true,
   DeviceEventEmitter: true,
   DeviceInfo: true,
   Dimensions: true,
   DrawerLayoutAndroid: true,
   Easing: true,
+  findNodeHandle: true,
   FlatList: true,
   I18nManager: true,
   Image: true,
@@ -25,6 +28,7 @@ module.exports = {
   KeyboardAvoidingView: true,
   LayoutAnimation: true,
   Linking: true,
+  LogBox: true,
   Modal: true,
   NativeEventEmitter: true,
   NativeModules: true,
@@ -33,8 +37,11 @@ module.exports = {
   Picker: true,
   PixelRatio: true,
   Platform: true,
+  Pressable: true,
+  processColor: true,
   ProgressBar: true,
   RefreshControl: true,
+  render: true,
   SafeAreaView: true,
   ScrollView: true,
   SectionList: true,
@@ -44,26 +51,21 @@ module.exports = {
   StyleSheet: true,
   Switch: true,
   Systrace: true,
-  TVEventHandler: true,
-  TabBarIOS: true,
   Text: true,
   TextInput: true,
-  TimePickerAndroid: true,
   ToastAndroid: true,
   Touchable: true,
   TouchableHighlight: true,
   TouchableNativeFeedback: true,
   TouchableOpacity: true,
   TouchableWithoutFeedback: true,
+  TVEventHandler: true,
   UIManager: true,
+  unmountComponentAtNode: true,
+  useColorScheme: true,
+  useWindowDimensions: true,
   Vibration: true,
   View: true,
   VirtualizedList: true,
-  YellowBox: true,
-  createElement: true,
-  findNodeHandle: true,
-  processColor: true,
-  render: true,
-  unmountComponentAtNode: true,
-  useWindowDimensions: true
+  YellowBox: true
 };