feat: add SplitButton component

docs/docusaurus.config.js

@@ -160,6 +160,9 @@ const config = {
             SegmentedButtons: 'SegmentedButtons/SegmentedButtons',
           },
           Snackbar: 'Snackbar',
+          SplitButton: {
+            SplitButton: 'SplitButton/SplitButton',
+          },
           Surface: 'Surface',
           Switch: {
             Switch: 'Switch/Switch',

docs/src/data/themeColors.js

@@ -307,6 +307,32 @@ const themeColors = {
       iconColor: 'theme.colors.inverseOnSurface',
     },
   },
+  SplitButton: {
+    active: {
+      filled: {
+        backgroundColor: 'theme.colors.primary',
+        textColor: 'theme.colors.onPrimary',
+      },
+      tonal: {
+        backgroundColor: 'theme.colors.secondaryContainer',
+        textColor: 'theme.colors.onSecondaryContainer',
+      },
+      elevated: {
+        backgroundColor: 'theme.colors.surfaceContainerLow',
+        textColor: 'theme.colors.primary',
+      },
+      outlined: {
+        textColor: 'theme.colors.onSurfaceVariant',
+        borderColor: 'theme.colors.outline',
+      },
+    },
+    disabled: {
+      '-': {
+        backgroundColor: 'theme.colors.onSurface',
+        textColor: 'theme.colors.onSurface',
+      },
+    },
+  },
   Surface: {
     flat: {
       backgroundColor: 'theme.colors.elevation[elevation]',

docs/static/llms.txt

@@ -51,6 +51,7 @@
 - Searchbar: https://callstack.github.io/react-native-paper/docs/components/Searchbar
 - SegmentedButtons: https://callstack.github.io/react-native-paper/docs/components/SegmentedButtons
 - Snackbar: https://callstack.github.io/react-native-paper/docs/components/Snackbar
+- SplitButton: https://callstack.github.io/react-native-paper/docs/components/SplitButton
 - Surface: https://callstack.github.io/react-native-paper/docs/components/Surface
 - Switch: https://callstack.github.io/react-native-paper/docs/components/Switch
 - Text: https://callstack.github.io/react-native-paper/docs/components/Text

example/src/ExampleList.tsx

@@ -37,6 +37,7 @@ import SegmentedButtonMultiselectRealCase from './Examples/SegmentedButtons/Segm
 import SegmentedButtonRealCase from './Examples/SegmentedButtons/SegmentedButtonRealCase';
 import SegmentedButtonExample from './Examples/SegmentedButtonsExample';
 import SnackbarExample from './Examples/SnackbarExample';
+import SplitButtonExample from './Examples/SplitButtonExample';
 import SurfaceExample from './Examples/SurfaceExample';
 import SwitchExample from './Examples/SwitchExample';
 import TeamDetails from './Examples/TeamDetails';
@@ -80,6 +81,7 @@ export const mainExamples = {
   Searchbar: SearchbarExample,
   SegmentedButton: SegmentedButtonExample,
   Snackbar: SnackbarExample,
+  SplitButton: SplitButtonExample,
   Surface: SurfaceExample,
   Switch: SwitchExample,
   Text: TextExample,

example/src/Examples/SplitButtonExample.tsx

@@ -0,0 +1,127 @@
+import * as React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import { List, Menu, SplitButton, Switch, useTheme } from 'react-native-paper';
+
+import ScreenWrapper from '../ScreenWrapper';
+
+const modes = ['filled', 'tonal', 'elevated', 'outlined'] as const;
+const SplitButtonExample = () => {
+  const [menuVisible, setMenuVisible] = React.useState(false);
+  const [disabled, setDisabled] = React.useState(false);
+  const [loading, setLoading] = React.useState(false);
+  const theme = useTheme();
+
+  return (
+    <ScreenWrapper>
+      <List.Section title="Playground">
+        <View style={styles.playground}>
+          <Menu
+            visible={menuVisible}
+            onDismiss={() => setMenuVisible(false)}
+            anchorPosition="bottom"
+            anchor={
+              <SplitButton
+                label="Send"
+                icon="send"
+                mode="filled"
+                disabled={disabled}
+                loading={loading}
+                onPress={() => {}}
+                onTrailingPress={() => setMenuVisible(true)}
+                trailingAccessibilityLabel="Show send options"
+                trailingAccessibilityState={{ expanded: menuVisible }}
+              />
+            }
+          >
+            <Menu.Item
+              leadingIcon="schedule"
+              title="Schedule send"
+              onPress={() => setMenuVisible(false)}
+            />
+            <Menu.Item
+              leadingIcon="content-save"
+              title="Save draft"
+              onPress={() => setMenuVisible(false)}
+            />
+          </Menu>
+        </View>
+        <List.Item
+          title="Disabled"
+          right={() => <Switch value={disabled} onValueChange={setDisabled} />}
+        />
+        <List.Item
+          title="Loading"
+          right={() => <Switch value={loading} onValueChange={setLoading} />}
+        />
+      </List.Section>
+
+      <List.Section title="Modes">
+        <View style={styles.row}>
+          {modes.map((mode) => (
+            <SplitButton
+              key={mode}
+              mode={mode}
+              icon="plus"
+              label={mode}
+              onPress={() => {}}
+              onTrailingPress={() => {}}
+              trailingAccessibilityLabel={`${mode} options`}
+            />
+          ))}
+        </View>
+      </List.Section>
+
+      <List.Section title="Custom">
+        <View style={styles.column}>
+          <SplitButton
+            mode="outlined"
+            icon="palette"
+            label="Custom color"
+            buttonColor={theme.colors.tertiaryContainer}
+            textColor={theme.colors.onTertiaryContainer}
+            onPress={() => {}}
+            onTrailingPress={() => {}}
+            trailingAccessibilityLabel="Custom color options"
+          />
+          <SplitButton
+            mode="filled"
+            label="Custom label style"
+            icon="format-bold"
+            labelStyle={styles.boldLabel}
+            onPress={() => {}}
+            onTrailingPress={() => {}}
+            trailingAccessibilityLabel="Custom label options"
+          />
+        </View>
+      </List.Section>
+    </ScreenWrapper>
+  );
+};
+
+SplitButtonExample.title = 'SplitButton';
+
+const styles = StyleSheet.create({
+  playground: {
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    alignItems: 'flex-start',
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    paddingHorizontal: 12,
+    gap: 12,
+  },
+  column: {
+    alignItems: 'flex-start',
+    paddingHorizontal: 16,
+    gap: 16,
+  },
+  boldLabel: {
+    fontWeight: '800',
+  },
+});
+
+export default SplitButtonExample;