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.