How to make react native paper theme snackbar sticky in scroll view at bottom of screen?

Question

I want a sticky snack bar from the react-native paper theme. Currently with scroll up the snack bar goes upside as well. Instead, I want to make it fixed at a position in scroll view.

Answer 1

One way to do so is to place the snackbar outside the scrollview.

Here is an example;

import * as React from 'react';
import { ScrollView, StyleSheet, Text, Dimensions, View } from 'react-native';
import { Button, Snackbar } from 'react-native-paper';

const MyComponent = () => {
  const [visible, setVisible] = React.useState(false);

  const onToggleSnackBar = () => setVisible(!visible);

  const onDismissSnackBar = () => setVisible(false);

  return (
    <View style={{flex: 1}}>
    <ScrollView style={styles.container}>

 
      <Text>sjdfsjhfsdjkfhsdkfh</Text>
      <Text>sjdfsjhfsdjkfhsdkfh</Text>
      <Text>sjdfsjhfsdjkfhsdkfh</Text>
      <Text>sjdfsjhfsdjkfhsdkfh</Text>
      <Text>sjdfsjhfsdjkfhsdkfh</Text>
      <Text>sjdfsjhfsdjkfhsdkfh</Text>
      <Text>sjdfsjhfsdjkfhsdkfh</Text>

            <Button onPress={onToggleSnackBar}>{visible ? 'Hide' : 'Show'}</Button>
      <Text>sjdfsjhfsdjkfhsdkfh</Text>
      <Text>sjdfsjhfsdjkfhsdkfh</Text>
      <Text>sjdfsjhfsdjkfhsdkfh</Text>
      <Text>sjdfsjhfsdjkfhsdkfh</Text>
      <Text>sjdfsjhfsdjkfhsdkfh</Text>
      <Text>sjdfsjhfsdjkfhsdkfh</Text>
      <Text>sjdfsjhfsdjkfhsdkfh</Text>
      <Text>sjdfsjhfsdjkfhsdkfh</Text>
      <Text>sjdfsjhfsdjkfhsdkfh</Text>
      <Text>sjdfsjhfsdjkfhsdkfh</Text>
      <Text>sjdfsjhfsdjkfhsdkfh</Text>
      <Text>sjdfsjhfsdjkfhsdkfh</Text>
      <Text>sjdfsjhfsdjkfhsdkfh</Text>
      <Text>sjdfsjhfsdjkfhsdkfh</Text>
      <Text>sjdfsjhfsdjkfhsdkfh</Text>
      <Text>sjdfsjhfsdjkfhsdkfh</Text>
      <Text>sjdfsjhfsdjkfhsdkfh</Text>
      <Text>sjdfsjhfsdjkfhsdkfh</Text>
      <Text>sjdfsjhfsdjkfhsdkfh</Text>
      <Text>sjdfsjhfsdjkfhsdkfh</Text>
      <Text>sjdfsjhfsdjkfhsdkfh</Text>
      <Text>sjdfsjhfsdjkfhsdkfh</Text>
      <Text>sjdfsjhfsdjkfhsdkfh</Text>
      <Text>sjdfsjhfsdjkfhsdkfh</Text>
      <Text>sjdfsjhfsdjkfhsdkfh</Text>
      <Text>sjdfsjhfsdjkfhsdkfh</Text>
      <Text>sjdfsjhfsdjkfhsdkfh</Text>
      <Text>sjdfsjhfsdjkfhsdkfh</Text>
      <Text>sjdfsjhfsdjkfhsdkfh</Text>
      <Text>sjdfsjhfsdjkfhsdkfh</Text>
      <Text>sjdfsjhfsdjkfhsdkfh</Text>
      <Text>sjdfsjhfsdjkfhsdkfh</Text>
      <Text>sjdfsjhfsdjkfhsdkfh</Text>
      <Text>sjdfsjhfsdjkfhsdkfh</Text>
      <Text>sjdfsjhfsdjkfhsdkfh</Text>
      <Text>sjdfsjhfsdjkfhsdkfh</Text>
      <Text>sjdfsjhfsdjkfhsdkfh</Text>
      <Text>sjdfsjhfsdjkfhsdkfh</Text>
      <Text>sjdfsjhfsdjkfhsdkfh</Text>
      <Text>sjdfsjhfsdjkfhsdkfh</Text>
      <Text>sjdfsjhfsdjkfhsdkfh</Text>
      <Text>sjdfsjhfsdjkfhsdkfh</Text>
      <Text>sjdfsjhfsdjkfhsdkfh</Text>
      <Text>sjdfsjhfsdjkfhsdkfh</Text>
      <Text>sjdfsjhfsdjkfhsdkfh</Text>
      <Text>sjdfsjhfsdjkfhsdkfh</Text>
      <Text>sjdfsjhfsdjkfhsdkfh</Text>
      <Text>last</Text>
    </ScrollView>
    
         <Snackbar
        visible={visible}
        onDismiss={onDismissSnackBar}
        action={{
          label: 'Undo',
          onPress: () => {
            // Do something
          },
        }}>
        Hey there! I'm a Snackbar.
      </Snackbar>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'space-between',
  },
});

export default MyComponent;

Link to the snack.

Extra text is just for scrollview.