diff --git a/apps/storybook-react-native/.storybook/storybook.requires.js b/apps/storybook-react-native/.storybook/storybook.requires.js
index 599589f3e..a17029502 100644
--- a/apps/storybook-react-native/.storybook/storybook.requires.js
+++ b/apps/storybook-react-native/.storybook/storybook.requires.js
@@ -100,6 +100,7 @@ const getStories = () => {
     "./../../packages/design-system-react-native/src/components/Label/Label.stories.tsx": require("../../../packages/design-system-react-native/src/components/Label/Label.stories.tsx"),
     "./../../packages/design-system-react-native/src/components/ListItem/ListItem.stories.tsx": require("../../../packages/design-system-react-native/src/components/ListItem/ListItem.stories.tsx"),
     "./../../packages/design-system-react-native/src/components/MainActionButton/MainActionButton.stories.tsx": require("../../../packages/design-system-react-native/src/components/MainActionButton/MainActionButton.stories.tsx"),
+    "./../../packages/design-system-react-native/src/components/PickerBase/PickerBase.stories.tsx": require("../../../packages/design-system-react-native/src/components/PickerBase/PickerBase.stories.tsx"),
     "./../../packages/design-system-react-native/src/components/RadioButton/RadioButton.stories.tsx": require("../../../packages/design-system-react-native/src/components/RadioButton/RadioButton.stories.tsx"),
     "./../../packages/design-system-react-native/src/components/SensitiveText/SensitiveText.stories.tsx": require("../../../packages/design-system-react-native/src/components/SensitiveText/SensitiveText.stories.tsx"),
     "./../../packages/design-system-react-native/src/components/Skeleton/Skeleton.stories.tsx": require("../../../packages/design-system-react-native/src/components/Skeleton/Skeleton.stories.tsx"),
diff --git a/packages/design-system-react-native/src/components/PickerBase/PickerBase.constants.ts b/packages/design-system-react-native/src/components/PickerBase/PickerBase.constants.ts
new file mode 100644
index 000000000..4a7bc3bb0
--- /dev/null
+++ b/packages/design-system-react-native/src/components/PickerBase/PickerBase.constants.ts
@@ -0,0 +1,13 @@
+import { PickerBaseEndArrow } from '@metamask/design-system-shared';
+
+import { IconName } from '../../types';
+
+export const MAP_PICKERBASE_END_ARROW_TO_ICON_NAME: Record<
+  (typeof PickerBaseEndArrow)[keyof typeof PickerBaseEndArrow],
+  IconName
+> = {
+  [PickerBaseEndArrow.Up]: IconName.ArrowUp,
+  [PickerBaseEndArrow.Down]: IconName.ArrowDown,
+  [PickerBaseEndArrow.Left]: IconName.ArrowLeft,
+  [PickerBaseEndArrow.Right]: IconName.ArrowRight,
+};
diff --git a/packages/design-system-react-native/src/components/PickerBase/PickerBase.stories.tsx b/packages/design-system-react-native/src/components/PickerBase/PickerBase.stories.tsx
new file mode 100644
index 000000000..bfc277253
--- /dev/null
+++ b/packages/design-system-react-native/src/components/PickerBase/PickerBase.stories.tsx
@@ -0,0 +1,168 @@
+import {
+  PickerBaseEndArrow,
+  TextColor,
+  TextVariant,
+} from '@metamask/design-system-shared';
+import { useTailwind } from '@metamask/design-system-twrnc-preset';
+import type { Meta, StoryObj } from '@storybook/react-native';
+import type { ViewProps } from 'react-native';
+import { View } from 'react-native';
+
+import { Icon, IconName, IconSize } from '../Icon';
+
+import { PickerBase } from './PickerBase';
+import type { PickerBaseProps } from './PickerBase.types';
+
+const noopPress = () => undefined;
+
+const meta: Meta<PickerBaseProps> = {
+  title: 'Components/PickerBase',
+  component: PickerBase,
+  argTypes: {
+    endArrow: {
+      control: 'select',
+      options: [...Object.values(PickerBaseEndArrow), undefined],
+    },
+    isDisabled: {
+      control: 'boolean',
+    },
+    twClassName: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+const PickerBaseStoryWrapper: React.FC<ViewProps> = ({
+  children,
+  ...props
+}) => {
+  const tw = useTailwind();
+  return (
+    <View {...props} style={[tw`p-4`, props.style]}>
+      {children}
+    </View>
+  );
+};
+
+type Story = StoryObj<PickerBaseProps>;
+
+export const Default: Story = {
+  args: {
+    children: 'Select an option',
+    endArrow: PickerBaseEndArrow.Down,
+    isDisabled: false,
+    twClassName: '',
+    onPress: noopPress,
+  },
+  render: (args) => (
+    <PickerBaseStoryWrapper>
+      <PickerBase {...args} />
+    </PickerBaseStoryWrapper>
+  ),
+};
+
+export const StartAccessory: Story = {
+  render: () => (
+    <PickerBaseStoryWrapper style={{ gap: 16 }}>
+      <PickerBase
+        onPress={noopPress}
+        endArrow={PickerBaseEndArrow.Down}
+        startAccessory={<Icon name={IconName.Search} size={IconSize.Sm} />}
+      >
+        With start accessory
+      </PickerBase>
+    </PickerBaseStoryWrapper>
+  ),
+};
+
+export const EndArrow: Story = {
+  render: () => (
+    <PickerBaseStoryWrapper style={{ gap: 16 }}>
+      {(
+        Object.entries(PickerBaseEndArrow) as [
+          keyof typeof PickerBaseEndArrow,
+          (typeof PickerBaseEndArrow)[keyof typeof PickerBaseEndArrow],
+        ][]
+      ).map(([key, value]) => (
+        <PickerBase
+          key={key}
+          endArrow={value}
+          testID={`picker-end-${key}`}
+          onPress={noopPress}
+        >
+          {`End arrow: ${key}`}
+        </PickerBase>
+      ))}
+    </PickerBaseStoryWrapper>
+  ),
+};
+
+export const TextProps: Story = {
+  render: () => (
+    <PickerBaseStoryWrapper>
+      <PickerBase
+        onPress={noopPress}
+        endArrow={PickerBaseEndArrow.Down}
+        textProps={{
+          variant: TextVariant.BodySm,
+          color: TextColor.TextAlternative,
+        }}
+      >
+        Custom text variant and color
+      </PickerBase>
+    </PickerBaseStoryWrapper>
+  ),
+};
+
+export const EndArrowIconProps: Story = {
+  render: () => (
+    <PickerBaseStoryWrapper style={{ gap: 16 }}>
+      <PickerBase
+        onPress={noopPress}
+        endArrow={PickerBaseEndArrow.Down}
+        endArrowIconProps={{ size: IconSize.Sm }}
+      >
+        Small arrow
+      </PickerBase>
+      <PickerBase
+        onPress={noopPress}
+        endArrow={PickerBaseEndArrow.Down}
+        endArrowIconProps={{ size: IconSize.Lg }}
+      >
+        Large arrow
+      </PickerBase>
+    </PickerBaseStoryWrapper>
+  ),
+};
+
+export const IsDisabled: Story = {
+  render: () => (
+    <PickerBaseStoryWrapper style={{ gap: 16 }}>
+      <PickerBase onPress={noopPress} endArrow={PickerBaseEndArrow.Down}>
+        Enabled
+      </PickerBase>
+      <PickerBase
+        onPress={noopPress}
+        endArrow={PickerBaseEndArrow.Down}
+        isDisabled
+      >
+        Disabled
+      </PickerBase>
+    </PickerBaseStoryWrapper>
+  ),
+};
+
+export const EndAccessory: Story = {
+  render: () => (
+    <PickerBaseStoryWrapper style={{ gap: 16 }}>
+      <PickerBase
+        onPress={noopPress}
+        endAccessory={<Icon name={IconName.Close} size={IconSize.Sm} />}
+      >
+        Custom trailing content
+      </PickerBase>
+    </PickerBaseStoryWrapper>
+  ),
+};
diff --git a/packages/design-system-react-native/src/components/PickerBase/PickerBase.test.tsx b/packages/design-system-react-native/src/components/PickerBase/PickerBase.test.tsx
new file mode 100644
index 000000000..ec76d83eb
--- /dev/null
+++ b/packages/design-system-react-native/src/components/PickerBase/PickerBase.test.tsx
@@ -0,0 +1,306 @@
+import { PickerBaseEndArrow } from '@metamask/design-system-shared';
+import { useTailwind } from '@metamask/design-system-twrnc-preset';
+import { renderHook } from '@testing-library/react-hooks';
+import { fireEvent, render } from '@testing-library/react-native';
+import React from 'react';
+import { View } from 'react-native';
+
+import { IconColor, IconName, IconSize } from '../../types';
+import { TWCLASSMAP_ICON_SIZE_DIMENSION } from '../Icon/Icon.constants';
+
+import { PickerBase } from './PickerBase';
+import { MAP_PICKERBASE_END_ARROW_TO_ICON_NAME } from './PickerBase.constants';
+
+const ROOT_TEST_ID = 'picker-base';
+
+const noopPress = () => undefined;
+
+describe('PickerBase', () => {
+  let tw: ReturnType<typeof useTailwind>;
+
+  beforeAll(() => {
+    tw = renderHook(() => useTailwind()).result.current;
+  });
+
+  describe('label slot', () => {
+    it('renders string children', () => {
+      const { getByText } = render(
+        <PickerBase testID={ROOT_TEST_ID} onPress={noopPress}>
+          Select
+        </PickerBase>,
+      );
+
+      expect(getByText('Select')).toHaveTextContent('Select');
+    });
+
+    it('exposes testID on the root Pressable', () => {
+      const { getByTestId } = render(
+        <PickerBase testID="custom-picker" onPress={noopPress}>
+          Label
+        </PickerBase>,
+      );
+
+      expect(getByTestId('custom-picker')).toBeOnTheScreen();
+    });
+
+    it('renders startAccessory before the label', () => {
+      const { getByTestId } = render(
+        <PickerBase
+          testID={ROOT_TEST_ID}
+          onPress={noopPress}
+          startAccessory={<View testID="start-accessory" />}
+        >
+          With accessory
+        </PickerBase>,
+      );
+
+      expect(getByTestId('start-accessory')).toBeOnTheScreen();
+    });
+  });
+
+  describe('when endArrow is set', () => {
+    const cases: {
+      endArrow: (typeof PickerBaseEndArrow)[keyof typeof PickerBaseEndArrow];
+      iconName: IconName;
+    }[] = [
+      { endArrow: PickerBaseEndArrow.Up, iconName: IconName.ArrowUp },
+      { endArrow: PickerBaseEndArrow.Down, iconName: IconName.ArrowDown },
+      { endArrow: PickerBaseEndArrow.Left, iconName: IconName.ArrowLeft },
+      { endArrow: PickerBaseEndArrow.Right, iconName: IconName.ArrowRight },
+    ];
+
+    it.each(cases)(
+      'maps endArrow $endArrow to trailing icon $iconName',
+      ({ endArrow, iconName }) => {
+        const { getByTestId } = render(
+          <PickerBase
+            testID={ROOT_TEST_ID}
+            onPress={noopPress}
+            endArrow={endArrow}
+            endArrowIconProps={{ testID: 'end-arrow' }}
+          >
+            Label
+          </PickerBase>,
+        );
+
+        expect(getByTestId('end-arrow')).toHaveProp('name', iconName);
+      },
+    );
+  });
+
+  describe('when endArrow is omitted', () => {
+    it('does not render a trailing icon', () => {
+      const { queryByTestId } = render(
+        <PickerBase
+          testID={ROOT_TEST_ID}
+          onPress={noopPress}
+          endArrowIconProps={{ testID: 'end-arrow' }}
+        >
+          Label
+        </PickerBase>,
+      );
+
+      expect(queryByTestId('end-arrow')).toBeNull();
+    });
+  });
+
+  describe('when endAccessory is used', () => {
+    it('renders when endArrow is omitted', () => {
+      const { getByTestId } = render(
+        <PickerBase
+          testID={ROOT_TEST_ID}
+          onPress={noopPress}
+          endAccessory={<View testID="end-accessory" />}
+        >
+          With end accessory
+        </PickerBase>,
+      );
+
+      expect(getByTestId('end-accessory')).toBeOnTheScreen();
+    });
+
+    it('is ignored when endArrow is set', () => {
+      const { getByTestId, queryByTestId } = render(
+        <PickerBase
+          testID={ROOT_TEST_ID}
+          onPress={noopPress}
+          endArrow={PickerBaseEndArrow.Down}
+          endAccessory={<View testID="end-accessory" />}
+          endArrowIconProps={{ testID: 'end-arrow' }}
+        >
+          Label
+        </PickerBase>,
+      );
+
+      expect(getByTestId('end-arrow')).toHaveProp(
+        'name',
+        MAP_PICKERBASE_END_ARROW_TO_ICON_NAME[PickerBaseEndArrow.Down],
+      );
+      expect(queryByTestId('end-accessory')).toBeNull();
+    });
+  });
+
+  describe('root Pressable styles', () => {
+    it('applies default row layout', () => {
+      const { getByTestId } = render(
+        <PickerBase testID={ROOT_TEST_ID} onPress={noopPress}>
+          Label
+        </PickerBase>,
+      );
+
+      expect(getByTestId(ROOT_TEST_ID)).toHaveStyle(
+        tw`flex-row items-center gap-1`,
+      );
+    });
+
+    it('applies disabled opacity when isDisabled is true', () => {
+      const { getByTestId } = render(
+        <PickerBase testID={ROOT_TEST_ID} onPress={noopPress} isDisabled>
+          Label
+        </PickerBase>,
+      );
+
+      expect(getByTestId(ROOT_TEST_ID)).toHaveStyle(tw`opacity-50`);
+    });
+
+    it('does not apply disabled opacity when isDisabled is false', () => {
+      const { getByTestId } = render(
+        <PickerBase testID={ROOT_TEST_ID} onPress={noopPress}>
+          Label
+        </PickerBase>,
+      );
+
+      expect(getByTestId(ROOT_TEST_ID)).not.toHaveStyle(tw`opacity-50`);
+    });
+
+    it('merges twClassName onto the root', () => {
+      const { getByTestId } = render(
+        <PickerBase
+          testID={ROOT_TEST_ID}
+          onPress={noopPress}
+          twClassName="mt-4"
+        >
+          Label
+        </PickerBase>,
+      );
+
+      expect(getByTestId(ROOT_TEST_ID)).toHaveStyle(tw`mt-4`);
+    });
+
+    it('merges the style prop after tailwind styles', () => {
+      const customStyle = { marginBottom: 20 };
+
+      const { getByTestId } = render(
+        <PickerBase
+          testID={ROOT_TEST_ID}
+          onPress={noopPress}
+          style={customStyle}
+        >
+          Label
+        </PickerBase>,
+      );
+
+      expect(getByTestId(ROOT_TEST_ID)).toHaveStyle({ marginBottom: 20 });
+    });
+  });
+
+  describe('when pressed', () => {
+    it('invokes onPress', () => {
+      const onPress = jest.fn();
+
+      const { getByTestId } = render(
+        <PickerBase testID={ROOT_TEST_ID} onPress={onPress}>
+          Label
+        </PickerBase>,
+      );
+
+      fireEvent.press(getByTestId(ROOT_TEST_ID));
+
+      expect(onPress).toHaveBeenCalledTimes(1);
+    });
+
+    it('does not throw when onPress is omitted', () => {
+      const { getByTestId } = render(
+        <PickerBase testID={ROOT_TEST_ID}>Label</PickerBase>,
+      );
+
+      expect(() => {
+        fireEvent.press(getByTestId(ROOT_TEST_ID));
+      }).not.toThrow();
+    });
+
+    it('does not throw when isDisabled is true and onPress is omitted', () => {
+      const { getByTestId } = render(
+        <PickerBase testID={ROOT_TEST_ID} isDisabled>
+          Label
+        </PickerBase>,
+      );
+
+      expect(() => {
+        fireEvent.press(getByTestId(ROOT_TEST_ID));
+      }).not.toThrow();
+    });
+
+    it('does not invoke onPress when isDisabled is true', () => {
+      const onPress = jest.fn();
+
+      const { getByTestId } = render(
+        <PickerBase testID={ROOT_TEST_ID} onPress={onPress} isDisabled>
+          Label
+        </PickerBase>,
+      );
+
+      fireEvent.press(getByTestId(ROOT_TEST_ID));
+
+      expect(onPress).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('when isDisabled is true', () => {
+    it('disables the root Pressable', () => {
+      const { getByTestId } = render(
+        <PickerBase testID={ROOT_TEST_ID} onPress={noopPress} isDisabled>
+          Label
+        </PickerBase>,
+      );
+
+      expect(getByTestId(ROOT_TEST_ID)).toBeDisabled();
+    });
+  });
+
+  describe('Pressable prop forwarding', () => {
+    it('forwards hitSlop to the root', () => {
+      const hitSlop = { top: 4, bottom: 4, left: 4, right: 4 };
+
+      const { getByTestId } = render(
+        <PickerBase testID={ROOT_TEST_ID} onPress={noopPress} hitSlop={hitSlop}>
+          Label
+        </PickerBase>,
+      );
+
+      expect(getByTestId(ROOT_TEST_ID)).toHaveProp('hitSlop', hitSlop);
+    });
+  });
+
+  describe('when endArrowIconProps is provided', () => {
+    it('applies size to the trailing icon', () => {
+      const { getByTestId } = render(
+        <PickerBase
+          testID={ROOT_TEST_ID}
+          onPress={noopPress}
+          endArrow={PickerBaseEndArrow.Down}
+          endArrowIconProps={{ testID: 'end-arrow', size: IconSize.Sm }}
+        >
+          Label
+        </PickerBase>,
+      );
+
+      expect(getByTestId('end-arrow')).toHaveStyle(
+        tw.style(
+          IconColor.IconDefault,
+          TWCLASSMAP_ICON_SIZE_DIMENSION[IconSize.Sm],
+        ),
+      );
+    });
+  });
+});
diff --git a/packages/design-system-react-native/src/components/PickerBase/PickerBase.tsx b/packages/design-system-react-native/src/components/PickerBase/PickerBase.tsx
new file mode 100644
index 000000000..2b8a3f41a
--- /dev/null
+++ b/packages/design-system-react-native/src/components/PickerBase/PickerBase.tsx
@@ -0,0 +1,77 @@
+import { useTailwind } from '@metamask/design-system-twrnc-preset';
+import React, { forwardRef, useCallback } from 'react';
+import type { GestureResponderEvent } from 'react-native';
+import { Pressable } from 'react-native';
+
+import { Icon, IconSize } from '../Icon';
+import { TextOrChildren } from '../temp-components/TextOrChildren';
+
+import { MAP_PICKERBASE_END_ARROW_TO_ICON_NAME } from './PickerBase.constants';
+import type { PickerBaseProps } from './PickerBase.types';
+
+export const PickerBase = forwardRef<
+  React.ComponentRef<typeof Pressable>,
+  PickerBaseProps
+>(
+  (
+    {
+      children,
+      textProps,
+      startAccessory,
+      endArrow,
+      endAccessory,
+      isDisabled = false,
+      endArrowIconProps,
+      twClassName,
+      style,
+      testID,
+      onPress,
+      ...pressableRest
+    },
+    ref,
+  ) => {
+    const tw = useTailwind();
+
+    const handlePress = useCallback(
+      (event: GestureResponderEvent) => {
+        if (!isDisabled && onPress) {
+          onPress(event);
+        }
+      },
+      [isDisabled, onPress],
+    );
+
+    return (
+      <Pressable
+        ref={ref}
+        {...pressableRest}
+        accessibilityRole="button"
+        accessibilityState={{ disabled: isDisabled }}
+        disabled={isDisabled}
+        testID={testID}
+        style={[
+          tw.style(
+            'flex-row items-center gap-1',
+            isDisabled && 'opacity-50',
+            twClassName,
+          ),
+          style,
+        ]}
+        onPress={handlePress}
+      >
+        {startAccessory}
+        <TextOrChildren textProps={textProps}>{children}</TextOrChildren>
+        {endArrow && (
+          <Icon
+            size={IconSize.Sm}
+            {...endArrowIconProps}
+            name={MAP_PICKERBASE_END_ARROW_TO_ICON_NAME[endArrow]}
+          />
+        )}
+        {!endArrow && endAccessory}
+      </Pressable>
+    );
+  },
+);
+
+PickerBase.displayName = 'PickerBase';
diff --git a/packages/design-system-react-native/src/components/PickerBase/PickerBase.types.ts b/packages/design-system-react-native/src/components/PickerBase/PickerBase.types.ts
new file mode 100644
index 000000000..3ebd56642
--- /dev/null
+++ b/packages/design-system-react-native/src/components/PickerBase/PickerBase.types.ts
@@ -0,0 +1,28 @@
+import type { PickerBasePropsShared } from '@metamask/design-system-shared';
+import type { PressableProps, StyleProp, ViewStyle } from 'react-native';
+
+import type { IconProps } from '../Icon/Icon.types';
+import type { TextProps } from '../Text';
+
+/**
+ * PickerBase component props.
+ */
+export type PickerBaseProps = Omit<PressableProps, 'children' | 'disabled'> &
+  PickerBasePropsShared & {
+    /**
+     * Optional props passed to `Text` when `children` is a string.
+     */
+    textProps?: Omit<Partial<TextProps>, 'children'>;
+    /**
+     * Optional props passed to the trailing arrow `Icon` when `endArrow` is set (excluding `name`, which is derived from `endArrow`).
+     */
+    endArrowIconProps?: Partial<Omit<IconProps, 'name'>>;
+    /**
+     * Optional twrnc class names merged onto the root row.
+     */
+    twClassName?: string;
+    /**
+     * Optional style for the root `Pressable`.
+     */
+    style?: StyleProp<ViewStyle>;
+  };
diff --git a/packages/design-system-react-native/src/components/PickerBase/README.md b/packages/design-system-react-native/src/components/PickerBase/README.md
new file mode 100644
index 000000000..6972b78d9
--- /dev/null
+++ b/packages/design-system-react-native/src/components/PickerBase/README.md
@@ -0,0 +1,236 @@
+# PickerBase
+
+PickerBase is a presentational row used as the tap target for picker-style controls. It supports an optional `startAccessory`, a label (`Text` when `children` is a string), and an end slot: pass `endArrow` to show a mapped arrow icon, or omit `endArrow` and pass `endAccessory` for custom trailing content. The root is a `Pressable` with `accessibilityRole="button"` and `accessibilityState.disabled` when `isDisabled` is true—use `accessibilityLabel` or `accessibilityLabelledBy` on the root when the visible label is not enough for assistive technologies.
+
+```tsx
+import {
+  PickerBase,
+  PickerBaseEndArrow,
+} from '@metamask/design-system-react-native';
+
+<PickerBase endArrow={PickerBaseEndArrow.Down} onPress={() => {}}>
+  Select an option
+</PickerBase>;
+```
+
+## Props
+
+Shared props live in `@metamask/design-system-shared` as `PickerBasePropsShared`. The React Native component extends the root `Pressable` (excluding `children`, which is the label slot). Other `Pressable` props—such as `hitSlop` or `accessibilityLabel`—are forwarded to that root.
+
+### `children`
+
+The label content: a string (styled with `textProps`) or any `ReactNode`.
+
+| TYPE                  | REQUIRED | DEFAULT |
+| --------------------- | -------- | ------- |
+| `ReactNode \| string` | Yes      | N/A     |
+
+```tsx
+import {
+  PickerBase,
+  PickerBaseEndArrow,
+} from '@metamask/design-system-react-native';
+
+<PickerBase endArrow={PickerBaseEndArrow.Down} onPress={() => {}}>
+  Network
+</PickerBase>;
+```
+
+### `endArrow`
+
+When set, shows the trailing arrow icon. Maps to `IconName.ArrowUp`, `ArrowDown`, `ArrowLeft`, or `ArrowRight`. When `endArrow` is omitted, no arrow is rendered; use `endAccessory` for a custom trailing node instead. If both `endArrow` and `endAccessory` are passed, `endArrow` wins and `endAccessory` is ignored.
+
+Available values:
+
+- `PickerBaseEndArrow.Up`
+- `PickerBaseEndArrow.Down`
+- `PickerBaseEndArrow.Left`
+- `PickerBaseEndArrow.Right`
+
+| TYPE                 | REQUIRED | DEFAULT     |
+| -------------------- | -------- | ----------- |
+| `PickerBaseEndArrow` | No       | `undefined` |
+
+```tsx
+import {
+  PickerBase,
+  PickerBaseEndArrow,
+} from '@metamask/design-system-react-native';
+
+<PickerBase endArrow={PickerBaseEndArrow.Right} onPress={() => {}}>
+  Navigate
+</PickerBase>;
+```
+
+### `endAccessory`
+
+Optional node at the end of the row when `endArrow` is omitted (for example a custom icon or badge). Not rendered when `endArrow` is set.
+
+| TYPE        | REQUIRED | DEFAULT     |
+| ----------- | -------- | ----------- |
+| `ReactNode` | No       | `undefined` |
+
+```tsx
+import {
+  Icon,
+  IconName,
+  IconSize,
+  PickerBase,
+} from '@metamask/design-system-react-native';
+
+<PickerBase
+  onPress={() => {}}
+  endAccessory={<Icon name={IconName.Close} size={IconSize.Sm} />}
+>
+  With custom end
+</PickerBase>;
+```
+
+### `startAccessory`
+
+Optional node rendered before the label (for example an icon).
+
+| TYPE        | REQUIRED | DEFAULT     |
+| ----------- | -------- | ----------- |
+| `ReactNode` | No       | `undefined` |
+
+```tsx
+import {
+  Icon,
+  IconName,
+  IconSize,
+  PickerBase,
+  PickerBaseEndArrow,
+} from '@metamask/design-system-react-native';
+
+<PickerBase
+  endArrow={PickerBaseEndArrow.Down}
+  onPress={() => {}}
+  startAccessory={<Icon name={IconName.Search} size={IconSize.Sm} />}
+>
+  Search
+</PickerBase>;
+```
+
+### `textProps`
+
+Optional props passed to `Text` when `children` is a string.
+
+| TYPE                                   | REQUIRED | DEFAULT     |
+| -------------------------------------- | -------- | ----------- |
+| `Omit<Partial<TextProps>, 'children'>` | No       | `undefined` |
+
+```tsx
+import {
+  PickerBase,
+  PickerBaseEndArrow,
+  TextColor,
+  TextVariant,
+} from '@metamask/design-system-react-native';
+
+<PickerBase
+  endArrow={PickerBaseEndArrow.Down}
+  onPress={() => {}}
+  textProps={{ variant: TextVariant.BodySm, color: TextColor.TextAlternative }}
+>
+  Styled label
+</PickerBase>;
+```
+
+### `endArrowIconProps`
+
+Optional props forwarded to the trailing `Icon` when `endArrow` is set, except `name` (always derived from `endArrow`).
+
+| TYPE                               | REQUIRED | DEFAULT     |
+| ---------------------------------- | -------- | ----------- |
+| `Partial<Omit<IconProps, 'name'>>` | No       | `undefined` |
+
+```tsx
+import {
+  IconSize,
+  PickerBase,
+  PickerBaseEndArrow,
+} from '@metamask/design-system-react-native';
+
+<PickerBase
+  endArrow={PickerBaseEndArrow.Down}
+  onPress={() => {}}
+  endArrowIconProps={{ size: IconSize.Sm }}
+>
+  Compact arrow
+</PickerBase>;
+```
+
+### `isDisabled`
+
+When true, disables the `Pressable` and applies reduced opacity.
+
+| TYPE      | REQUIRED | DEFAULT |
+| --------- | -------- | ------- |
+| `boolean` | No       | `false` |
+
+```tsx
+import {
+  PickerBase,
+  PickerBaseEndArrow,
+} from '@metamask/design-system-react-native';
+
+<PickerBase endArrow={PickerBaseEndArrow.Down} onPress={() => {}} isDisabled>
+  Disabled
+</PickerBase>;
+```
+
+### `twClassName`
+
+Use the `twClassName` prop to add Tailwind CSS classes to the root `Pressable`. These classes will be merged with the component's default classes using `twMerge`, allowing you to:
+
+- Add new styles that don't exist in the default component
+- Override the component's default styles when needed
+
+| TYPE     | REQUIRED | DEFAULT     |
+| -------- | -------- | ----------- |
+| `string` | No       | `undefined` |
+
+```tsx
+import { PickerBase } from '@metamask/design-system-react-native';
+
+// Add additional styles
+<PickerBase onPress={() => {}} twClassName="mt-4">
+  With margin
+</PickerBase>
+
+// Override default styles
+<PickerBase onPress={() => {}} twClassName="px-6">
+  Wider horizontal padding
+</PickerBase>
+```
+
+### `style`
+
+Use the `style` prop to customize the root `Pressable` with React Native styles. For consistent styling, prefer using `twClassName` with Tailwind classes when possible. Use `style` with `tw.style()` for conditionals or dynamic values.
+
+| TYPE                   | REQUIRED | DEFAULT     |
+| ---------------------- | -------- | ----------- |
+| `StyleProp<ViewStyle>` | No       | `undefined` |
+
+```tsx
+import { useTailwind } from '@metamask/design-system-twrnc-preset';
+import { PickerBase } from '@metamask/design-system-react-native';
+
+export const ConditionalExample = ({ isActive }: { isActive: boolean }) => {
+  const tw = useTailwind();
+
+  return (
+    <PickerBase
+      onPress={() => {}}
+      style={tw.style('bg-transparent', isActive && 'bg-muted')}
+    >
+      Conditional styling
+    </PickerBase>
+  );
+};
+```
+
+## References
+
+[MetaMask Design System Guides](https://www.notion.so/MetaMask-Design-System-Guides-Design-f86ecc914d6b4eb6873a122b83c12940)
diff --git a/packages/design-system-react-native/src/components/PickerBase/index.ts b/packages/design-system-react-native/src/components/PickerBase/index.ts
new file mode 100644
index 000000000..061e3a5a9
--- /dev/null
+++ b/packages/design-system-react-native/src/components/PickerBase/index.ts
@@ -0,0 +1,3 @@
+export { PickerBaseEndArrow } from '@metamask/design-system-shared';
+export { PickerBase } from './PickerBase';
+export type { PickerBaseProps } from './PickerBase.types';
diff --git a/packages/design-system-react-native/src/components/index.ts b/packages/design-system-react-native/src/components/index.ts
index e057985d2..6d104aee4 100644
--- a/packages/design-system-react-native/src/components/index.ts
+++ b/packages/design-system-react-native/src/components/index.ts
@@ -173,6 +173,9 @@ export type { MaskiconProps } from './temp-components/Maskicon';
 export { MainActionButton } from './MainActionButton';
 export type { MainActionButtonProps } from './MainActionButton';
 
+export { PickerBase, PickerBaseEndArrow } from './PickerBase';
+export type { PickerBaseProps } from './PickerBase';
+
 export { Skeleton } from './Skeleton';
 export type { SkeletonProps } from './Skeleton';
 
diff --git a/packages/design-system-shared/src/index.ts b/packages/design-system-shared/src/index.ts
index 3868af23e..0597bf763 100644
--- a/packages/design-system-shared/src/index.ts
+++ b/packages/design-system-shared/src/index.ts
@@ -58,6 +58,12 @@ export {
   type KeyValueRowPropsShared,
 } from './types/KeyValueRow';
 
+// PickerBase types (ADR-0003 + ADR-0004)
+export {
+  PickerBaseEndArrow,
+  type PickerBasePropsShared,
+} from './types/PickerBase';
+
 // ButtonFilter types (ADR-0004)
 export { type ButtonFilterPropsShared } from './types/ButtonFilter';
 
diff --git a/packages/design-system-shared/src/types/PickerBase/PickerBase.types.ts b/packages/design-system-shared/src/types/PickerBase/PickerBase.types.ts
new file mode 100644
index 000000000..03cff059e
--- /dev/null
+++ b/packages/design-system-shared/src/types/PickerBase/PickerBase.types.ts
@@ -0,0 +1,41 @@
+import type { ReactNode } from 'react';
+
+import type { TextOrChildrenPropsShared } from '../TextOrChildren';
+
+/**
+ * PickerBase — trailing arrow direction (maps to platform arrow icons).
+ * Convert from enum to const object (ADR-0003).
+ */
+export const PickerBaseEndArrow = {
+  Up: 'up',
+  Down: 'down',
+  Left: 'left',
+  Right: 'right',
+} as const;
+export type PickerBaseEndArrow =
+  (typeof PickerBaseEndArrow)[keyof typeof PickerBaseEndArrow];
+
+/**
+ * PickerBase component shared props (ADR-0004).
+ */
+export type PickerBasePropsShared = TextOrChildrenPropsShared & {
+  /**
+   * Optional node rendered before the label (for example an icon).
+   */
+  startAccessory?: ReactNode;
+  /**
+   * When set, the mapped trailing arrow icon is shown at the end of the row.
+   * When omitted, use `endAccessory` for a custom trailing node instead.
+   */
+  endArrow?: PickerBaseEndArrow;
+  /**
+   * Optional node at the end of the row when `endArrow` is omitted (for example a custom icon or badge).
+   */
+  endAccessory?: ReactNode;
+  /**
+   * When true, disables the root control and applies disabled presentation.
+   *
+   * @default false
+   */
+  isDisabled?: boolean;
+};
diff --git a/packages/design-system-shared/src/types/PickerBase/index.ts b/packages/design-system-shared/src/types/PickerBase/index.ts
new file mode 100644
index 000000000..d6e6a36fa
--- /dev/null
+++ b/packages/design-system-shared/src/types/PickerBase/index.ts
@@ -0,0 +1,4 @@
+export {
+  PickerBaseEndArrow,
+  type PickerBasePropsShared,
+} from './PickerBase.types';