[zoontek]

Summary:

Deprecates Button as part of the effort to keep core lean. It offers very little customization, and you can build an equivalent button with Pressable. It could easily be replaced by a documentation page with some code (ping @Simek).

For an example with a design similar to Button:

import type { ComponentRef, Ref } from "react";
import {
  Platform,
  Pressable,
  StyleSheet,
  Text,
  type ColorValue,
  type PressableAndroidRippleConfig,
  type PressableProps,
} from "react-native";

type ButtonProps = Omit<PressableProps, "children" | "style"> & {
  title: string;
  color?: ColorValue;
  ref?: Ref<ComponentRef<typeof Pressable>>;
};

const androidRipple: PressableAndroidRippleConfig | undefined =
  Platform.OS === "android" ? {} : undefined;

export const Button = ({
  title,
  color,
  disabled: disabledProp,
  importantForAccessibility,
  ...props
}: ButtonProps) => {
  const disabled =
    disabledProp ??
    props["aria-disabled"] ??
    props.accessibilityState?.disabled ??
    false;

  return (
    <Pressable
      accessibilityRole="button"
      android_ripple={androidRipple}
      {...props}
      disabled={disabled}
      importantForAccessibility={
        importantForAccessibility === "no"
          ? "no-hide-descendants"
          : importantForAccessibility
      }
      style={({ pressed }) => [
        styles.button,
        Platform.OS === "android" && color != null && { backgroundColor: color },
        disabled && styles.buttonDisabled,
        pressed && Platform.OS === "ios" && styles.buttonPressed,
      ]}
    >
      <Text
        disabled={disabled}
        style={[
          styles.text,
          Platform.OS === "ios" && color != null && { color },
          disabled && styles.textDisabled,
        ]}
      >
        {Platform.OS === "android" ? title.toUpperCase() : title}
      </Text>
    </Pressable>
  );
};

const styles = StyleSheet.create({
  button: Platform.select({
    ios: {},
    android: {
      elevation: 4,
      backgroundColor: "#2196F3",
      borderRadius: 2,
    },
  }),
  buttonPressed: {
    opacity: 0.2,
  },
  buttonDisabled: Platform.select({
    ios: {},
    android: {
      elevation: 0,
      backgroundColor: "#dfdfdf",
    },
  }),
  text: {
    textAlign: "center",
    margin: 8,
    ...Platform.select({
      ios: {
        color: "#007AFF",
        fontSize: 18,
      },
      android: {
        color: "white",
        fontWeight: "500",
      },
    }),
  },
  textDisabled: Platform.select({
    ios: {
      color: "#cdcdcd",
    },
    android: {
      color: "#a1a1a1",
    },
  }),
});

Changelog:

[GENERAL] [DEPRECATED] - Deprecate Button, build your own button with Pressable instead

Test Plan:

• deprecated shows a strikethrough on Button in editors.
• Importing/rendering Button logs the deprecation warning once.
• yarn flow-check: 0 errors.
• yarn build-types: ReactNativeApi.d.ts is unchanged.
• yarn fantom packages/react-native/Libraries/Components/__tests__/Button-itest.js: 10/10 pass.

[Simek]

LGTM! 🎉