Skip to content

Commit

Permalink
feat: Add tabIndex prop to View component
Browse files Browse the repository at this point in the history
  • Loading branch information
gabrieldonadel committed Aug 23, 2022
1 parent b3e8c0f commit 7fea932
Show file tree
Hide file tree
Showing 2 changed files with 26 additions and 7 deletions.
20 changes: 13 additions & 7 deletions Libraries/Components/View/View.js
Original file line number Diff line number Diff line change
Expand Up @@ -26,13 +26,19 @@ export type Props = ViewProps;
const View: React.AbstractComponent<
ViewProps,
React.ElementRef<typeof ViewNativeComponent>,
> = React.forwardRef((props: ViewProps, forwardedRef) => {
return (
<TextAncestor.Provider value={false}>
<ViewNativeComponent {...props} ref={forwardedRef} />
</TextAncestor.Provider>
);
});
> = React.forwardRef(
({tabIndex, focusable, ...otherProps}: ViewProps, forwardedRef) => {
return (
<TextAncestor.Provider value={false}>
<ViewNativeComponent
focusable={tabIndex !== undefined ? !tabIndex : focusable}
{...otherProps}
ref={forwardedRef}
/>
</TextAncestor.Provider>
);
},
);

View.displayName = 'View';

Expand Down
13 changes: 13 additions & 0 deletions Libraries/Components/View/ViewPropTypes.js
Original file line number Diff line number Diff line change
Expand Up @@ -352,6 +352,19 @@ type AndroidViewProps = $ReadOnly<{|
*/
focusable?: boolean,

/**
* Indicates whether this `View` should be focusable with a non-touch input device, eg. receive focus with a hardware keyboard.
* See https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
* for more details.
*
* Supports the following values:
* - -1 (View is focusable)
* - 0 (View is not focusable)
*
* @platform android
*/
tabIndex?: 0 | -1,

/**
* The action to perform when this `View` is clicked on by a non-touch click, eg. enter key on a hardware keyboard.
*
Expand Down

0 comments on commit 7fea932

Please sign in to comment.