From cf2612663b7ff5a5b5ccc12f59c12c2eb6cc17da Mon Sep 17 00:00:00 2001
From: Nicolas Gallagher <nicolasgallagher@gmail.com>
Date: Sun, 15 Apr 2018 15:03:34 -0700
Subject: [PATCH] [fix] createElement uses provided function component

If the component provided to 'createElement' is not a string alias for a
DOM component, it will no longer attempt to replace that component with
a DOM component inferred from the 'accessibility{Component,Role,Traits}'
prop.

Fix #895
---
 .../src/exports/AppRegistry/index.js           |  2 +-
 .../createElement/__tests__/index-test.js      | 18 +++++++++++++++---
 .../src/exports/createElement/index.js         |  5 ++++-
 3 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/packages/react-native-web/src/exports/AppRegistry/index.js b/packages/react-native-web/src/exports/AppRegistry/index.js
index f7f5aa70..3804c1c3 100644
--- a/packages/react-native-web/src/exports/AppRegistry/index.js
+++ b/packages/react-native-web/src/exports/AppRegistry/index.js
@@ -67,7 +67,7 @@ export default class AppRegistry {
           appParameters.initialProps || emptyObject,
           appParameters.rootTag,
           wrapperComponentProvider && wrapperComponentProvider(appParameters),
-          appParameters.callback,
+          appParameters.callback
         )
     };
     return appKey;
diff --git a/packages/react-native-web/src/exports/createElement/__tests__/index-test.js b/packages/react-native-web/src/exports/createElement/__tests__/index-test.js
index c42bfde8..bf75e2a9 100644
--- a/packages/react-native-web/src/exports/createElement/__tests__/index-test.js
+++ b/packages/react-native-web/src/exports/createElement/__tests__/index-test.js
@@ -1,7 +1,8 @@
 /* eslint-env jasmine, jest */
 
 import createElement from '..';
-import { shallow, render } from 'enzyme';
+import React from 'react';
+import { render, shallow } from 'enzyme';
 
 describe('modules/createElement', () => {
   test('it renders different DOM elements', () => {
@@ -23,9 +24,20 @@ describe('modules/createElement', () => {
     });
   });
 
-  describe('when ARIA role is "button"', () => {
+  describe('prop "accessibilityRole"', () => {
+    test('and string component type', () => {
+      const component = shallow(createElement('span', { accessibilityRole: 'link' }));
+      expect(component.find('a').length).toBe(1);
+    });
+
+    test('and function component type', () => {
+      const Custom = () => <div />;
+      const component = shallow(createElement(Custom, { accessibilityRole: 'link' }));
+      expect(component.find('div').length).toBe(1);
+    });
+
     [{ disabled: true }, { disabled: false }].forEach(({ disabled }) => {
-      describe(`and disabled is "${disabled}"`, () => {
+      describe(`value is "button" and disabled is "${disabled}"`, () => {
         [{ name: 'Enter', which: 13 }, { name: 'Space', which: 32 }].forEach(({ name, which }) => {
           test(`"onClick" is ${disabled ? 'not ' : ''}called when "${name}" is pressed`, () => {
             const onClick = jest.fn();
diff --git a/packages/react-native-web/src/exports/createElement/index.js b/packages/react-native-web/src/exports/createElement/index.js
index 727469e8..1501fb2a 100644
--- a/packages/react-native-web/src/exports/createElement/index.js
+++ b/packages/react-native-web/src/exports/createElement/index.js
@@ -83,7 +83,10 @@ const adjustProps = domProps => {
 
 const createElement = (component, props, ...children) => {
   // use equivalent platform elements where possible
-  const accessibilityComponent = AccessibilityUtil.propsToAccessibilityComponent(props);
+  let accessibilityComponent;
+  if (component && component.constructor === String) {
+    accessibilityComponent = AccessibilityUtil.propsToAccessibilityComponent(props);
+  }
   const Component = accessibilityComponent || component;
   const domProps = createDOMProps(Component, props);
   adjustProps(domProps);