0.9.3

Remove component instances from the layout registry when umounting views
that are using ResizeObserver.

Fix #1133
Close #1134

package.json

@@ -1,6 +1,6 @@
 {
   "private": true,
-  "version": "0.9.2",
+  "version": "0.9.3",
   "name": "react-native-web-monorepo",
   "scripts": {
     "clean": "del ./packages/*/dist",

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

@@ -1,6 +1,6 @@
 {
   "name": "babel-plugin-react-native-web",
-  "version": "0.9.2",
+  "version": "0.9.3",
   "description": "Babel plugin for React Native for Web",
   "main": "index.js",
   "devDependencies": {

packages/benchmarks/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "benchmarks",
-  "version": "0.9.2",
+  "version": "0.9.3",
   "scripts": {
     "build": "mkdir -p dist && cp -f index.html dist/index.html && ./node_modules/.bin/webpack-cli --config ./webpack.config.js",
     "release": "yarn build && git checkout gh-pages && rm -rf ../../benchmarks && mv dist ../../benchmarks && git add -A && git commit -m \"Benchmarks deploy\" && git push origin gh-pages && git checkout -"
@@ -18,7 +18,7 @@
     "react-dom": "^16.5.1",
     "react-fela": "^7.3.1",
     "react-jss": "^8.6.1",
-    "react-native-web": "0.9.2",
+    "react-native-web": "0.9.3",
     "reactxp": "^1.3.0",
     "styled-components": "^3.3.3",
     "styled-jsx": "^2.2.7",
@@ -26,7 +26,7 @@
     "styletron-react": "^4.3.1"
   },
   "devDependencies": {
-    "babel-plugin-react-native-web": "0.9.2",
+    "babel-plugin-react-native-web": "0.9.3",
     "css-loader": "^1.0.0",
     "style-loader": "^0.21.0",
     "url-loader": "^1.0.1",

packages/examples/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "react-native-examples",
-  "version": "0.9.2",
+  "version": "0.9.3",
   "scripts": {
     "build": "mkdir -p dist && cp -f src/index.html dist/index.html && ./node_modules/.bin/webpack-cli --config ./webpack.config.js",
     "release": "yarn build && git checkout gh-pages && rm -rf ../../examples && mv dist ../../examples && git add -A && git commit -m \"Examples deploy\" && git push origin gh-pages && git checkout -"
@@ -10,10 +10,10 @@
     "babel-runtime": "^6.26.0",
     "react": "^16.5.1",
     "react-dom": "^16.5.1",
-    "react-native-web": "0.9.2"
+    "react-native-web": "0.9.3"
   },
   "devDependencies": {
-    "babel-plugin-react-native-web": "0.9.2",
+    "babel-plugin-react-native-web": "0.9.3",
     "babel-plugin-transform-runtime": "^6.23.0",
     "file-loader": "^1.1.11",
     "webpack": "^4.8.1",

packages/react-native-web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-web",
-  "version": "0.9.2",
+  "version": "0.9.3",
   "description": "React Native for Web",
   "module": "dist/index.js",
   "main": "dist/cjs/index.js",

packages/react-native-web/src/exports/Text/TextPropTypes.js

@@ -21,6 +21,7 @@ const TextPropTypes = {
   accessible: bool,
   children: any,
   importantForAccessibility: oneOf(['auto', 'no', 'no-hide-descendants', 'yes']),
+  nativeID: string,
   numberOfLines: number,
   onBlur: func,
   onContextMenu: func,

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

@@ -38,6 +38,7 @@ export type ViewProps = {
   children?: any,
   hitSlop?: EdgeInsetsProp,
   importantForAccessibility?: 'auto' | 'yes' | 'no' | 'no-hide-descendants',
+  nativeID?: string,
   onBlur?: Function,
   onClick?: Function,
   onClickCapture?: Function,
@@ -87,6 +88,7 @@ const ViewPropTypes = {
   children: any,
   hitSlop: EdgeInsetsPropType,
   importantForAccessibility: oneOf(['auto', 'no', 'no-hide-descendants', 'yes']),
+  nativeID: string,
   onBlur: func,
   onClick: func,
   onClickCapture: func,

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

@@ -63,14 +63,15 @@ const observe = instance => {
 };
 
 const unobserve = instance => {
-  delete registry[instance._layoutId];
   if (resizeObserver) {
     const node = findNodeHandle(instance);
     if (node) {
+      delete registry[node._layoutId];
       delete node._layoutId;
       resizeObserver.unobserve(node);
     }
   } else {
+    delete registry[instance._layoutId];
     delete instance._layoutId;
   }
 };

packages/react-native-web/src/modules/createDOMProps/__tests__/index-test.js

@@ -183,6 +183,12 @@ describe('modules/createDOMProps', () => {
     expect(props['aria-hidden']).toEqual(true);
   });
 
+  test('prop "nativeID" becomes "id"', () => {
+    const nativeID = 'Example.nativeID';
+    const props = createProps({ nativeID });
+    expect(props.id).toEqual(nativeID);
+  });
+
   test('prop "testID" becomes "data-testid"', () => {
     const testID = 'Example.testID';
     const props = createProps({ testID });

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

@@ -77,6 +77,7 @@ const createDOMProps = (component, props, styleResolver) => {
     accessibilityLabel,
     accessibilityLiveRegion,
     importantForAccessibility,
+    nativeID,
     placeholderTextColor,
     pointerEvents,
     style: providedStyle,
@@ -164,10 +165,15 @@ const createDOMProps = (component, props, styleResolver) => {
   }
 
   // OTHER
+  // Native element ID
+  if (nativeID && nativeID.constructor === String) {
+    domProps.id = nativeID;
+  }
   // Link security and automation test ids
   if (component === 'a' && domProps.target === '_blank') {
     domProps.rel = `${domProps.rel || ''} noopener noreferrer`;
   }
+  // Automated test IDs
   if (testID && testID.constructor === String) {
     domProps['data-testid'] = testID;
   }

packages/website/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "website",
-  "version": "0.9.2",
+  "version": "0.9.3",
   "scripts": {
     "build": "build-storybook -o ./dist -c ./storybook/.storybook",
     "start": "start-storybook -p 9001 -c ./storybook/.storybook",
@@ -12,10 +12,10 @@
     "@storybook/react": "^3.4.3",
     "react": "^16.5.1",
     "react-dom": "^16.5.1",
-    "react-native-web": "0.9.2"
+    "react-native-web": "0.9.3"
   },
   "devDependencies": {
-    "babel-plugin-react-native-web": "0.9.2",
+    "babel-plugin-react-native-web": "0.9.3",
     "url-loader": "^1.0.1",
     "webpack": "^4.8.1"
   }

packages/website/storybook/1-components/Text/TextScreen.js

@@ -116,6 +116,12 @@ const TextScreen = () => (
         ]}
       />
 
+      <DocItem
+        name="nativeID"
+        typeInfo="?string"
+        description="Used to locate this view from any native DOM code, or to define accessibility relationships. This is rendered to the native 'id' DOM attribute"
+      />
+
       <DocItem
         name="numberOfLines"
         typeInfo="?number"

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

@@ -119,6 +119,12 @@ const ViewScreen = () => (
         ]}
       />
 
+      <DocItem
+        name="nativeID"
+        typeInfo="?string"
+        description="Used to locate this view from any native DOM code, or to define accessibility relationships. This is rendered to the native 'id' DOM attribute"
+      />
+
       <DocItem name="onBlur" typeInfo="?function" />
       <DocItem name="onContextMenu" typeInfo="?function" />
       <DocItem name="onFocus" typeInfo="?function" />