Skip to content

Commit 4b11bd8

Browse files
feat: Add tabIndex prop to View component
1 parent f3def13 commit 4b11bd8

File tree

2 files changed

+26
-7
lines changed

2 files changed

+26
-7
lines changed

Libraries/Components/View/View.js

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -26,13 +26,19 @@ export type Props = ViewProps;
2626
const View: React.AbstractComponent<
2727
ViewProps,
2828
React.ElementRef<typeof ViewNativeComponent>,
29-
> = React.forwardRef((props: ViewProps, forwardedRef) => {
30-
return (
31-
<TextAncestor.Provider value={false}>
32-
<ViewNativeComponent {...props} ref={forwardedRef} />
33-
</TextAncestor.Provider>
34-
);
35-
});
29+
> = React.forwardRef(
30+
({tabIndex, focusable, ...otherProps}: ViewProps, forwardedRef) => {
31+
return (
32+
<TextAncestor.Provider value={false}>
33+
<ViewNativeComponent
34+
focusable={tabIndex !== undefined ? !tabIndex : focusable}
35+
{...otherProps}
36+
ref={forwardedRef}
37+
/>
38+
</TextAncestor.Provider>
39+
);
40+
},
41+
);
3642

3743
View.displayName = 'View';
3844

Libraries/Components/View/ViewPropTypes.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -352,6 +352,19 @@ type AndroidViewProps = $ReadOnly<{|
352352
*/
353353
focusable?: boolean,
354354

355+
/**
356+
* Indicates whether this `View` should be focusable with a non-touch input device, eg. receive focus with a hardware keyboard.
357+
* See https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
358+
* for more details.
359+
*
360+
* Supports the following values:
361+
* - -1 (View is focusable)
362+
* - 0 (View is not focusable)
363+
*
364+
* @platform android
365+
*/
366+
tabIndex?: 0 | -1,
367+
355368
/**
356369
* The action to perform when this `View` is clicked on by a non-touch click, eg. enter key on a hardware keyboard.
357370
*

0 commit comments

Comments
 (0)