refactor(snackbar)!: modernize layout and action API

docs/6.x/docs/guides/migration.md

@@ -289,6 +289,51 @@ The misspelled `traileringIcon` props have been renamed:
 />
 ```
 
+### Snackbar
+
+The message is passed via the `message` prop instead of `children`, and the
+`action` prop takes a narrow set of options instead of every `Button` prop:
+
+```diff
+<Snackbar
+  visible={visible}
+  onDismiss={onDismiss}
++ message="Changes saved"
+  action={{ label: 'Undo', onPress: () => {} }}
+->
+-  Changes saved
+-</Snackbar>
++/>
+```
+
+Passing arbitrary nodes as the message is no longer supported, so compose the
+message as a string. The `contentStyle` prop was renamed to `messageStyle`, and
+it styles the message text rather than a wrapper around arbitrary children.
+
+The Snackbar now renders in a `Portal` on its own, so it overlays all other
+content. Wrapping it in a `Portal` is no longer needed — and would render it
+twice. Set `portal={false}` to keep it inside the parent instead.
+
+```diff
+-<Portal>
+-  <Snackbar visible={visible} onDismiss={onDismiss} message="Changes saved" />
+-</Portal>
++<Snackbar visible={visible} onDismiss={onDismiss} message="Changes saved" />
+```
+
+The action dismisses the Snackbar on its own, so calling `onDismiss` from
+`action.onPress` is no longer needed:
+
+```diff
+<Snackbar
+  visible={visible}
+  onDismiss={onDismiss}
+  message="Changes saved"
+- action={{ label: 'Undo', onPress: () => { doUndo(); onDismiss(); } }}
++ action={{ label: 'Undo', onPress: () => doUndo() }}
+/>
+```
+
 ### TextInput
 
 The Paper 6.x `TextInput` is a complete rewrite with a new API. Import the component the same way, but note that the props and behavior have changed significantly.

docs/component-docs.config.ts

@@ -134,7 +134,9 @@ const pages = {
   SegmentedButtons: {
     SegmentedButtons: 'SegmentedButtons/SegmentedButtons',
   },
-  Snackbar: 'Snackbar',
+  Snackbar: {
+    Snackbar: 'Snackbar/Snackbar',
+  },
   Surface: 'Surface',
   Switch: {
     Switch: 'Switch/Switch',
@@ -172,10 +174,6 @@ const componentDocsConfig: ComponentDocsConfig = {
         'Comprehensive Portal example':
           'https://snack.expo.dev/@react-native-paper/more-examples---comprehensive-portal-example',
       },
-      Snackbar: {
-        'Snackbar rendered regardless of the parent positioning':
-          'https://snack.expo.dev/@react-native-paper/more-examples---snackbar-rendered-regardless-of-the-parent-positioning',
-      },
     },
     knownIssues: {},
     themeColors,

example/src/Examples/AppbarExample.tsx

@@ -184,10 +184,9 @@ const AppbarExample = () => {
       <Snackbar
         visible={showSnackbar}
         onDismiss={() => setShowSnackbar(false)}
+        message="Heading pressed"
         duration={Snackbar.DURATION_SHORT}
-      >
-        Heading pressed
-      </Snackbar>
+      />
     </>
   );
 };

example/src/Examples/ChipExample.tsx

@@ -372,10 +372,9 @@ const ChipExample = () => {
       <Snackbar
         visible={snackbarProperties.visible}
         onDismiss={() => setSnackbarProperties({ visible: false, text: '' })}
+        message={snackbarProperties.text}
         duration={Snackbar.DURATION_SHORT}
-      >
-        {snackbarProperties.text}
-      </Snackbar>
+      />
     </>
   );
 };

example/src/Examples/SearchbarExample.tsx

@@ -213,10 +213,9 @@ const SearchExample = () => {
       <Snackbar
         visible={isVisible}
         onDismiss={() => setIsVisible(false)}
+        message="Microphone button pressed"
         duration={Snackbar.DURATION_SHORT}
-      >
-        Microphone button pressed
-      </Snackbar>
+      />
     </>
   );
 };

example/src/Examples/SnackbarExample.tsx

@@ -19,6 +19,7 @@ const SnackbarExample = () => {
     showCloseIcon: false,
     showLongerMessage: false,
     showLongerAction: false,
+    showInPortal: true,
   });
 
   const {
@@ -27,14 +28,11 @@ const SnackbarExample = () => {
     showCloseIcon,
     showLongerMessage,
     showLongerAction,
+    showInPortal,
   } = options;
 
-  const action = {
-    label: showLongerAction ? 'Toggle Theme' : 'Action',
-    onPress: () => {
-      preferences?.toggleTheme();
-    },
-  };
+  const toggleOption = (option: keyof typeof options) =>
+    setOptions({ ...options, [option]: !options[option] });
 
   return (
     <>
@@ -44,71 +42,65 @@ const SnackbarExample = () => {
             <Text>Action button</Text>
             <Switch
               value={showAction}
-              onValueChange={() =>
-                setOptions({ ...options, showAction: !showAction })
-              }
+              onValueChange={() => toggleOption('showAction')}
             />
           </View>
           <View style={styles.row}>
             <Text>Close icon button</Text>
             <Switch
               value={showCloseIcon}
-              onValueChange={() =>
-                setOptions({ ...options, showCloseIcon: !showCloseIcon })
-              }
+              onValueChange={() => toggleOption('showCloseIcon')}
             />
           </View>
           <View style={styles.row}>
             <Text>Longer message</Text>
             <Switch
               value={showLongerMessage}
-              onValueChange={() =>
-                setOptions({
-                  ...options,
-                  showLongerMessage: !showLongerMessage,
-                })
-              }
+              onValueChange={() => toggleOption('showLongerMessage')}
             />
           </View>
           <View style={styles.row}>
             <Text>Longer action</Text>
             <Switch
               value={showLongerAction}
-              onValueChange={() =>
-                setOptions({
-                  ...options,
-                  showLongerAction: !showLongerAction,
-                })
-              }
+              onValueChange={() => toggleOption('showLongerAction')}
+            />
+          </View>
+          <View style={styles.row}>
+            <Text>Render in portal</Text>
+            <Switch
+              value={showInPortal}
+              onValueChange={() => toggleOption('showInPortal')}
             />
           </View>
         </List.Section>
 
         <View style={styles.wrapper}>
-          <Button
-            mode="outlined"
-            onPress={() =>
-              setOptions({ ...options, showSnackbar: !showSnackbar })
-            }
-          >
+          <Button mode="outlined" onPress={() => toggleOption('showSnackbar')}>
             {showSnackbar ? 'Hide' : 'Show'}
           </Button>
         </View>
       </ScreenWrapper>
       <Snackbar
         visible={showSnackbar}
-        onDismiss={() => setOptions({ ...options, showSnackbar: false })}
-        action={showAction ? action : undefined}
-        onIconPress={
-          showCloseIcon
-            ? () => setOptions({ ...options, showSnackbar: false })
+        onDismiss={() => toggleOption('showSnackbar')}
+        message={showLongerMessage ? LONG_MESSAGE : SHORT_MESSAGE}
+        action={
+          showAction
+            ? {
+                label: showLongerAction ? 'Toggle theme' : 'Action',
+                onPress: () => {
+                  preferences?.toggleTheme();
+                },
+              }
             : undefined
         }
+        onIconPress={
+          showCloseIcon ? () => toggleOption('showSnackbar') : undefined
+        }
+        portal={showInPortal}
         duration={Snackbar.DURATION_MEDIUM}
-        style={showLongerAction && styles.longerAction}
-      >
-        {showLongerMessage ? LONG_MESSAGE : SHORT_MESSAGE}
-      </Snackbar>
+      />
     </>
   );
 };
@@ -130,9 +122,6 @@ const styles = StyleSheet.create({
     paddingVertical: 8,
     paddingHorizontal: 16,
   },
-  longerAction: {
-    flexDirection: 'column',
-  },
 });
 
 export default SnackbarExample;