diff --git a/packages/react-native/Libraries/Components/Button.js b/packages/react-native/Libraries/Components/Button.js index a2d00cd70ec..e52feb8e520 100644 --- a/packages/react-native/Libraries/Components/Button.js +++ b/packages/react-native/Libraries/Components/Button.js @@ -280,7 +280,13 @@ type ButtonProps = $ReadOnly<{| ``` */ -const Button: React.AbstractComponent = (props: ButtonProps) => { +const Touchable: typeof TouchableNativeFeedback | typeof TouchableOpacity = + Platform.OS === 'android' ? TouchableNativeFeedback : TouchableOpacity; + +const Button: React.AbstractComponent< + ButtonProps, + React.ElementRef, +> = React.forwardRef((props: ButtonProps, ref) => { const { accessibilityLabel, accessibilityState, @@ -345,8 +351,6 @@ const Button: React.AbstractComponent = (props: ButtonProps) => { ); const formattedTitle = Platform.OS === 'android' ? title.toUpperCase() : title; - const Touchable = - Platform.OS === 'android' ? TouchableNativeFeedback : TouchableOpacity; // If `no` is specified for `importantForAccessibility`, it will be changed to `no-hide-descendants` because the text inside should not be focused. const _importantForAccessibility = @@ -374,7 +378,8 @@ const Button: React.AbstractComponent = (props: ButtonProps) => { testID={testID} disabled={disabled} onPress={onPress} - touchSoundDisabled={touchSoundDisabled}> + touchSoundDisabled={touchSoundDisabled} + ref={ref}> {formattedTitle} @@ -382,7 +387,7 @@ const Button: React.AbstractComponent = (props: ButtonProps) => { ); -}; +}); Button.displayName = 'Button'; diff --git a/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap b/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap index e03ee16acd6..33509f9a56a 100644 --- a/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap +++ b/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap @@ -1677,7 +1677,13 @@ exports[`public API should not change unintentionally Libraries/Components/Butto accessibilityHint?: ?string, accessibilityLanguage?: ?Stringish, |}>; -declare const Button: React.AbstractComponent; +declare const Touchable: + | typeof TouchableNativeFeedback + | typeof TouchableOpacity; +declare const Button: React.AbstractComponent< + ButtonProps, + React.ElementRef, +>; declare export default typeof Button; " `;