diff --git a/packages/react-native-web/src/exports/View/ViewPropTypes.js b/packages/react-native-web/src/exports/View/ViewPropTypes.js
index 9289c99d6..2d36c910c 100644
--- a/packages/react-native-web/src/exports/View/ViewPropTypes.js
+++ b/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,
diff --git a/packages/react-native-web/src/modules/createDOMProps/__tests__/index-test.js b/packages/react-native-web/src/modules/createDOMProps/__tests__/index-test.js
index 921231ed0..9385c1cdc 100644
--- a/packages/react-native-web/src/modules/createDOMProps/__tests__/index-test.js
+++ b/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 });
diff --git a/packages/react-native-web/src/modules/createDOMProps/index.js b/packages/react-native-web/src/modules/createDOMProps/index.js
index 9e5a45585..1dce93cb3 100644
--- a/packages/react-native-web/src/modules/createDOMProps/index.js
+++ b/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;
}
diff --git a/packages/website/storybook/1-components/View/ViewScreen.js b/packages/website/storybook/1-components/View/ViewScreen.js
index 6ca74c776..effa0e7ee 100644
--- a/packages/website/storybook/1-components/View/ViewScreen.js
+++ b/packages/website/storybook/1-components/View/ViewScreen.js
@@ -119,6 +119,12 @@ const ViewScreen = () => (
]}
/>
+
+