react-nativetailwind-cssscrollviewsnackbar

Place snackbar on the bottom of the screen, not scrollview


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')}

Solution

  • 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>