React Native Paper Snackbar is not closing

45 Views Asked by At

I'm currently running into an issue, where my snackbar is opening, but is not going to close after invoking the context function.

Here's the context and the entire managment:

import { createSlice } from '@reduxjs/toolkit';

export const snackBarReducer = createSlice({
  name: "snackbarAlert",
  initialState: {
    open:false,
    message:"",
    alertType:"",
  },
  reducers: {
    showMessage(state, action) {
        state.open=true;
        state.message=action.payload.message;
        state.alertType=action.payload.alertType ? action.payload.alertType : "";
    },
    hideMessage(state) {
    state.open=false;
    state.message="";
    }
  },
});

export const snackbarActions = snackBarReducer.actions;

Conditional showcase of screens and where the snackbar is being shown:

  const ScreenContainer = () => {
  initializeApp(firebaseConfig);
  const {user}=useAuthContext();
  const alertType=useSelector((state)=>state.snackbarAlert.alertType);
  const isAlertOpen=useSelector((state)=>state.snackbarAlert.open);
  const alertMessage=useSelector((state)=>state.snackbarAlert.message);
    return (
<>
    {user ? <RootNavigation/> : <UnloggedNavigation/>}

    {isAlertOpen && <SnackbarAlert visible={isAlertOpen} snackbarText={alertMessage} snackbarType={alertType}/>}
</>
    
   )
}

And the snackbar component over here:

import { Snackbar } from 'react-native-paper';

import FontAwesome from '@expo/vector-icons/FontAwesome';

import {
  darkRed,
  spotify,
} from '../../assets/ColorsImport';
import { snackbarActions } from '../../context/SnackBarContext';

const SnackbarAlert = ({snackbarText, snackbarType, visible}) => {
const appropriateStyles=snackbarType==="error" ? {backgroundColor:darkRed, fontFamily:"Inter-Black"} : {backgroundColor:spotify,fontFamily:"Inter-Black"}


return (
<Snackbar 
action={{
  label:"Close",
  labelStyle:{color:"white", fontFamily:"Inter-Black"},
  onPress:()=>(
    snackbarActions.hideMessage()),
  icon: ()=>(<FontAwesome name='close' size={16} color="white"/>)
}} style={appropriateStyles} duration={300} visible={visible} onDismiss={()=>(
  snackbarActions.hideMessage())}>
  {snackbarText}
</Snackbar>
  )
}

export default SnackbarAlert

I tried to do it also with normal useState, but it did not work.

0

There are 0 best solutions below