Place snackbar on the bottom of the screen, not scrollview

Question

i want to stick snackbar on the bottom of the screen, not bottom of scrollview, how i can do this?

Snackbar is imported from react-native-snackbar-component. I've already tried to position absolute component with snackbar and set top and bottom - with no success.

<ScrollView
  contentContainerStyle={{ paddingBottom: 20 }}
  className="flex-1 bg-neutral-900">


    <SafeAreaView
      className={
        "absolute z-20 w-full flex-row justify-between items-center px-4 " +
        topMargin
      }>(..) />

<SnackBar
      visible={snackbarVisible}
      position="bottom"
      textMessage={snackbarText}
      actionHandler={() => setSnackbarVisile(false)}
      actionText="Dismiss"
      autoHidingTime={2000}/>




function Snackbar() {
setSnackbarVisile(!snackbarVisible);
setSnackbarText('Added to favourites')}

Answer 1

can try as

    <View style ={{flex:1}}>
<ScrollView
  contentContainerStyle={{ paddingBottom: 20 }}
  className="flex-1 bg-neutral-900">


    <SafeAreaView
      className={
        "absolute z-20 w-full flex-row justify-between items-center px-4 " +
        topMargin
      }>(..) />

</ScrollView>
<SnackBar
      visible={snackbarVisible}
      position="bottom"
      textMessage={snackbarText}
      actionHandler={() => setSnackbarVisile(false)}
      actionText="Dismiss"
      autoHidingTime={2000}/>
</View>