0.3.1

An experimental CSS property to control the behavior when the scroll
position of a scroll container reaches the edge of the scrollport. This
allows web apps to get closer to native scrolling behaviour and
performance.

https://wicg.github.io/overscroll-behavior/
https://developers.google.com/web/updates/2017/11/overscroll-behavior

Fix #765

.flowconfig

@@ -1,5 +1,5 @@
 [version]
-^0.61.0
+^0.63.0
 
 [ignore]
 <PROJECT_ROOT>/.*/__tests__/.*
@@ -14,4 +14,4 @@
 <PROJECT_ROOT>/types
 
 [options]
-unsafe.enable_getters_and_setters=true
+

lerna.json

@@ -1,6 +1,6 @@
 {
   "lerna": "2.5.1",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "npmClient": "yarn",
   "useWorkspaces": true,
   "packages": [

package.json

@@ -33,18 +33,18 @@
     "babel-preset-react-native": "^4.0.0",
     "caniuse-api": "^2.0.0",
     "del-cli": "^1.1.0",
-    "enzyme": "^3.2.0",
+    "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.0",
     "enzyme-to-json": "^3.2.2",
     "eslint": "^4.12.1",
     "eslint-config-prettier": "^2.9.0",
     "eslint-plugin-promise": "^3.6.0",
     "eslint-plugin-react": "^7.5.1",
-    "flow-bin": "^0.61.0",
+    "flow-bin": "^0.63.1",
     "husky": "^0.14.3",
     "jest": "^21.2.1",
-    "lerna": "^2.5.1",
-    "lint-staged": "^4.1.3",
+    "lerna": "^2.6.0",
+    "lint-staged": "^6.0.0",
     "prettier": "^1.8.2",
     "raf": "^3.4.0",
     "react": "^16.2.0",

packages/babel-plugin-react-native-web/README.md

@@ -34,6 +34,6 @@ import { StyleSheet, View } from 'react-native';
 **After**
 
 ```js
-import StyleSheet from 'react-native-web/dist/apis/StyleSheet';
-import View from 'react-native-web/dist/components/View';
+import StyleSheet from 'react-native-web/dist/exports/StyleSheet';
+import View from 'react-native-web/dist/exports/View';
 ```

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

@@ -1,10 +1,10 @@
 {
   "name": "babel-plugin-react-native-web",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Babel plugin for React Native for Web",
   "main": "index.js",
   "devDependencies": {
-    "babel-plugin-tester": "^4.0.0"
+    "babel-plugin-tester": "^5.0.0"
   },
   "author": "Nicolas Gallagher",
   "license": "MIT",

packages/benchmarks/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "benchmarks",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "scripts": {
     "benchmark": "webpack --config ./webpack.config.js && open index.html"
   },
@@ -17,14 +17,14 @@
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
     "react-jss": "^8.2.0",
-    "react-native-web": "^0.3.0",
+    "react-native-web": "^0.3.1",
     "reactxp": "^0.46.6",
     "styled-components": "^2.3.2",
     "styletron-client": "^3.0.0-rc.5",
     "styletron-utils": "^3.0.0-rc.3"
   },
   "devDependencies": {
-    "babel-plugin-react-native-web": "^0.3.0",
+    "babel-plugin-react-native-web": "^0.3.1",
     "css-loader": "^0.28.7",
     "style-loader": "^0.19.1",
     "webpack": "^3.10.0",

packages/react-native-web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-web",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "React Native for Web",
   "main": "dist/index.js",
   "files": [

packages/react-native-web/src/exports/Image/index.js

@@ -87,6 +87,9 @@ type State = {
   shouldDisplaySource: boolean
 };
 
+const getAssetTimeout = source =>
+  typeof source === 'object' && source.timeout ? source.timeout : 1000;
+
 class Image extends Component<*, State> {
   static displayName = 'Image';
 
@@ -246,12 +249,16 @@ class Image extends Component<*, State> {
   }
 
   _createImageLoader() {
+    const { source } = this.props;
     this._destroyImageLoader();
-    this._loadRequest = requestIdleCallback(() => {
-      const uri = resolveAssetSource(this.props.source);
-      this._imageRequestId = ImageLoader.load(uri, this._onLoad, this._onError);
-      this._onLoadStart();
-    });
+    this._loadRequest = requestIdleCallback(
+      () => {
+        const uri = resolveAssetSource(source);
+        this._imageRequestId = ImageLoader.load(uri, this._onLoad, this._onError);
+        this._onLoadStart();
+      },
+      { timeout: getAssetTimeout(source) }
+    );
   }
 
   _destroyImageLoader() {

packages/react-native-web/src/exports/KeyboardAvoidingView/index.js

@@ -40,7 +40,7 @@ class KeyboardAvoidingView extends Component<*> {
 
   onKeyboardChange(event: Object) {}
 
-  onLayout(event: ViewLayoutEvent) {
+  onLayout = (event: ViewLayoutEvent) => {
     this.frame = event.nativeEvent.layout;
   }
 

packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/createReactDOMStyle-test.js.snap

@@ -34,5 +34,9 @@ Object {
   "marginLeft": "10px",
   "marginRight": "10px",
   "marginTop": "50px",
+  "overflowX": "hidden",
+  "overflowY": "hidden",
+  "overscrollBehaviorX": "contain",
+  "overscrollBehaviorY": "contain",
 }
 `;

packages/react-native-web/src/exports/StyleSheet/__tests__/createReactDOMStyle-test.js

@@ -143,7 +143,9 @@ describe('apis/StyleSheet/createReactDOMStyle', () => {
       borderWidth: 0,
       marginTop: 50,
       marginVertical: 25,
-      margin: 10
+      margin: 10,
+      overflow: 'hidden',
+      overscrollBehavior: 'contain'
     };
 
     expect(createReactDOMStyle(style)).toMatchSnapshot();

packages/react-native-web/src/exports/StyleSheet/createReactDOMStyle.js

@@ -35,6 +35,7 @@ const styleShortFormProperties = {
   marginHorizontal: ['marginRight', 'marginLeft'],
   marginVertical: ['marginTop', 'marginBottom'],
   overflow: ['overflowX', 'overflowY'],
+  overscrollBehavior: ['overscrollBehaviorX', 'overscrollBehaviorY'],
   padding: ['paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft'],
   paddingHorizontal: ['paddingRight', 'paddingLeft'],
   paddingVertical: ['paddingTop', 'paddingBottom'],

packages/react-native-web/src/exports/View/ViewStylePropTypes.js

@@ -17,6 +17,8 @@ import ShadowPropTypes from '../../modules/ShadowPropTypes';
 import TransformPropTypes from '../../modules/TransformPropTypes';
 import { number, oneOf, oneOfType, string } from 'prop-types';
 
+const overscrollBehaviorType = oneOf(['auto', 'contain', 'none']);
+
 const ViewStylePropTypes = {
   ...AnimationPropTypes,
   ...BorderPropTypes,
@@ -46,6 +48,9 @@ const ViewStylePropTypes = {
   filter: string,
   outline: string,
   outlineColor: ColorPropType,
+  overscrollBehavior: overscrollBehaviorType,
+  overscrollBehaviorX: overscrollBehaviorType,
+  overscrollBehaviorY: overscrollBehaviorType,
   perspective: oneOfType([number, string]),
   perspectiveOrigin: string,
   touchAction: string,

packages/react-native-web/src/modules/requestIdleCallback/index.js

@@ -10,7 +10,7 @@
 
 import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';
 
-const _requestIdleCallback = function(cb: Function) {
+const _requestIdleCallback = function(cb: Function, options: Object) {
   return setTimeout(() => {
     const start = Date.now();
     cb({
@@ -22,7 +22,8 @@ const _requestIdleCallback = function(cb: Function) {
   }, 1);
 };
 
-const _cancelIdleCallback = function(id: number) {
+// $FlowFixMe (TimeoutID type is not recognized by eslint)
+const _cancelIdleCallback = function(id) {
   clearTimeout(id);
 };
 

website/package.json

@@ -1,21 +1,21 @@
 {
   "private": true,
   "name": "website",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "scripts": {
     "build": "build-storybook -o ./dist -c ./storybook/.storybook",
     "start": "start-storybook -p 9001 -c ./storybook/.storybook",
     "release": "yarn build && git checkout gh-pages && rm -rf ../storybook && mv dist ../storybook && git add -A && git commit -m \"Storybook deploy\" && git push origin gh-pages && git checkout -"
   },
   "dependencies": {
-    "@storybook/addon-options": "^3.1.6",
-    "@storybook/react": "^3.2.18",
+    "@storybook/addon-options": "^3.3.6",
+    "@storybook/react": "^3.3.6",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
-    "react-native-web": "^0.3.0"
+    "react-native-web": "^0.3.1"
   },
   "devDependencies": {
-    "babel-plugin-react-native-web": "^0.3.0",
+    "babel-plugin-react-native-web": "^0.3.1",
     "url-loader": "^0.6.2",
     "webpack": "^3.10.0"
   }

website/storybook/1-components/View/ViewScreen.js

@@ -688,6 +688,21 @@ const stylePropTypes = [
     name: 'overflowY',
     typeInfo: 'string'
   },
+  {
+    label: 'web',
+    name: 'overscrollBehavior',
+    typeInfo: '"auto" | "contain" | "none"'
+  },
+  {
+    label: 'web',
+    name: 'overscrollBehaviorX',
+    typeInfo: '"auto" | "contain" | "none"'
+  },
+  {
+    label: 'web',
+    name: 'overscrollBehaviorY',
+    typeInfo: '"auto" | "contain" | "none"'
+  },
   {
     name: 'padding',
     typeInfo: 'number | string'

website/storybook/ui-explorer/UIExplorer.js

@@ -22,7 +22,7 @@ const Divider = () => <View style={styles.divider} />;
 
 const SourceLink = ({ uri }) => (
   <ExternalLink
-    href={`https://github.com/necolas/react-native-web/tree/master/docs/storybook/${uri}`}
+    href={`https://github.com/necolas/react-native-web/tree/master/website/storybook/${uri}`}
     style={styles.link}
   >
     View source code on GitHub