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 = () => ( ]} /> + +