I have below codebase
Expo link
https://snack.expo.io/#mparvez19861/redux-example
app.js
<Provider store={store}>
<View style={styles.container}>
<Navigator />
</View>
</Provider>
Navigator.js
const AuthStack = createStackNavigator({
// { SignIn: SignInScreen }
// SignIn: { screen: EmailPwdLogin }
Login: { screen: LoginScreen },
Signup: { screen: SignupScreen },
});
const drNav = createDrawerNavigator(
{
Screen2: {
screen: Screen2
},
SignOut: {
screen: SignOutScreen
}
}
)
export default createAppContainer(createSwitchNavigator(
{
// screendesign: screendesign,
SplashScreen: SplashScreen,
App: drNav,
AuthStack: AuthStack
},
{
initialRouteName: 'SplashScreen',
}
));
login.js
import React, { Component } from 'react';
import { StyleSheet, View, Text, TextInput, Button, Alert } from 'react-native';
import { NavigationActions } from 'react-navigation';
import firebase from 'react-native-firebase';
import { connect } from 'react-redux';
import { getUserData, watchUserLogin } from '../redux/app-redux';
const mapStateToProps = (state) => {
return {
userData: state.userData,
};
}
const mapDispatchToProps = (dispatch) => {
return {
getUserData: (user) => { dispatch(getUserData(user)) },
};
}
class LoginScreen extends Component {
constructor(props) {
super(props);
this.state = {
userData: null,
email: "",
password: "",
};
}
onLoginPress = () => {
firebase.auth().signInWithEmailAndPassword(this.state.email, this.state.password)
.then((user) => {
//this.state.userData = user;
this.setState({ userData: user })
this.onGetUserData(user);
// this.props.navigation.navigate("friendsOnWay");
}, (error) => { Alert.alert(error.message); });
}
onGetUserData = (user) => {
this.props.getUserData(user);
}
onCreateAccountPress = () => {
// var navActions = NavigationActions.reset({
// index: 0,
// actions: [NavigationActions.navigate({routeName: "Signup"})]
// });
// this.props.navigation.dispatch(navActions);
// this.props.navigation.navigate("Signup");
}
render() {
return (
<View style={{ paddingTop: 50, alignItems: "center" }}>
<Text>Login</Text>
<TextInput style={{ width: 200, height: 40, borderWidth: 1 }}
value={this.state.email}
onChangeText={(text) => { this.setState({ email: text }) }}
placeholder="Email"
keyboardType="email-address"
autoCapitalize="none"
autoCorrect={false}
/>
<View style={{ paddingTop: 10 }} />
<TextInput style={{ width: 200, height: 40, borderWidth: 1 }}
value={this.state.password}
onChangeText={(text) => { this.setState({ password: text }) }}
placeholder="Password"
secureTextEntry={true}
autoCapitalize="none"
autoCorrect={false}
/>
<Button title="Login" onPress={this.onLoginPress} />
<Button title="Create account..." onPress={this.onCreateAccountPress} />
</View>
);
}
}
const styles = StyleSheet.create({
});
export default connect(mapStateToProps, mapDispatchToProps)(LoginScreen);
Throwing error
TypeError: TypeError: undefined is not a function (evaluating '(0,
_react.useMemo)')
This error is located at:
in ConnectFunction (created by SceneView)
in SceneView (at StackViewLayout.js:784)
in RCTView (at View.js:45)
in View (at StackViewLayout.js:783)
in RCTView (at View.js:45)
in View (at StackViewLayout.js:782)
in RCTView (at View.js:45)
in View (at createAnimatedComponent.js:153)
in AnimatedComponent (at StackViewCard.js:69)
in RCTView (at View.js:45)
in View (at createAnimatedComponent.js:153)
in AnimatedComponent (at screens.native.js:59)
in Screen (at StackViewCard.js:57)
in Card (at createPointerEventsContainer.js:27)
in Container (at StackViewLayout.js:860)
in RCTView (at View.js:45)
in View (at screens.native.js:83)
in ScreenContainer (at StackViewLayout.js:311)
in RCTView (at View.js:45)
in View (at createAnimatedComponent.js:153)
in AnimatedComponent (at StackViewLayout.js:307)
in PanGestureHandler (at StackViewLayout.js:300)
in StackViewLayout (at withOrientation.js:30)
in withOrientation (at StackView.js:79)
in RCTView (at View.js:45)
in View (at Transitioner.js:214)
in Transitioner (at StackView.js:22)
in StackView (created by Navigator)
in Navigator (at createKeyboardAwareNavigator.js:12)
in KeyboardAwareNavigator (created by SceneView)
in SceneView (created by SwitchView)
in SwitchView (created by Navigator)
in Navigator (at createAppContainer.js:388)
in NavigationContainer (at App.js:94)
in RCTView (at View.js:45)
in View (at App.js:93)
in Provider (at App.js:92)
in App (at renderApplication.js:34)
in RCTView (at View.js:45)
in View (at AppContainer.js:98)
in RCTView (at View.js:45)
in View (at AppContainer.js:115)
in AppContainer (at renderApplication.js:33)
This error is located at:
in NavigationContainer (at App.js:94)
in RCTView (at View.js:45)
in View (at App.js:93)
in Provider (at App.js:92)
in App (at renderApplication.js:34)
in RCTView (at View.js:45)
in View (at AppContainer.js:98)
in RCTView (at View.js:45)
in View (at AppContainer.js:115)
in AppContainer (at renderApplication.js:33) ConnectFunction
D:\Rnd\React Native\Project\WhoAroundMe\node_modules\react-redux\lib\components\connectAdvanced.js:131:41
updateFunctionComponent
D:\Rnd\React Native\Project\WhoAroundMe\node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:11441:29
updateSimpleMemoComponent
D:\Rnd\React Native\Project\WhoAroundMe\node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:11352:4
updateMemoComponent
D:\Rnd\React Native\Project\WhoAroundMe\node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:11224:8
beginWork
D:\Rnd\React Native\Project\WhoAroundMe\node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:12824:8
performUnitOfWork
D:\Rnd\React Native\Project\WhoAroundMe\node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:16075:21
workLoop
D:\Rnd\React Native\Project\WhoAroundMe\node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:16115:41
renderRoot
D:\Rnd\React Native\Project\WhoAroundMe\node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:16219:15
performWorkOnRoot
D:\Rnd\React Native\Project\WhoAroundMe\node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:17198:17
performWork
D:\Rnd\React Native\Project\WhoAroundMe\node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:17099:24
performSyncWork
D:\Rnd\React Native\Project\WhoAroundMe\node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:17060:14
requestWork
D:\Rnd\React Native\Project\WhoAroundMe\node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:16925:19
scheduleWork
D:\Rnd\React Native\Project\WhoAroundMe\node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:16724:16
scheduleRootUpdate
D:\Rnd\React Native\Project\WhoAroundMe\node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:17413:15
updateContainerAtExpirationTime
D:\Rnd\React Native\Project\WhoAroundMe\node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:17447:28
updateContainer
D:\Rnd\React Native\Project\WhoAroundMe\node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:17537:4
render
D:\Rnd\React Native\Project\WhoAroundMe\node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:18191:20
renderApplication
D:\Rnd\React Native\Project\WhoAroundMe\node_modules\react-native\Libraries\ReactNative\renderApplication.js:59:34 run
D:\Rnd\React Native\Project\WhoAroundMe\node_modules\react-native\Libraries\ReactNative\AppRegistry.js:101:10
runApplication
D:\Rnd\React Native\Project\WhoAroundMe\node_modules\react-native\Libraries\ReactNative\AppRegistry.js:195:26
__callFunction
D:\Rnd\React Native\Project\WhoAroundMe\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:366:47
D:\Rnd\React Native\Project\WhoAroundMe\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:106:26
__guard
D:\Rnd\React Native\Project\WhoAroundMe\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:314:10
callFunctionReturnFlushedQueue
D:\Rnd\React Native\Project\WhoAroundMe\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:105:17
What I am doing wrong please help
Version 7.0.1 of redux-sagas "now require a minimum React version of 16.8.4 or higher."
i had the same problem i used react-native version 0.58.6 and react-redux version 6.0.1 and it worked well.
I was getting same error. I updated my versions for react and react native to last version as well as redux and react-redux. It's solved then. Hope works for you too.
Related
This is a part of my BottomNavigator code in App.js.
const Bottom = createBottomTabNavigator();
return (
<Bottom.Navigator
tabBarOptions={...}>
<Bottom.Screen
name="ScreenA"
component={ScreenA}
options={...}
/>
<Bottom.Screen
name="ScreenB"
component={ScreenB}
options={...}
/>
<Bottom.Screen
name="ScreenC"
component={ScreenC}
options={...}
/>
<Bottom.Screen
name="Chat"
component={Chat}
options={({navigation}) => ({
tabBarLabel: StringsOfLanguages.chat,
tabBarIcon: ({focused, color, size}) =>
focused ? (
<Image
style={appStyles.bottomTabImgSize}
source={require('./assets/abc.svg')}
/>
) : (
<Image
style={appStyles.bottomTabImgSize}
source={require('./assets/def.svg')}
/>
),
tabBarButton: (props) =>
<TouchableOpacity
{...props}
onPress={() =>
navigation.navigate('Chat', {screen: 'ChatSubA'})
}
/>
})}
/>
</Bottom.Navigator>
);
and this is the code for bottom tab named "Chat"
const Chat = () => {
// Usually ChatSubB is called from ChatSubA.. But on receiving push notification
// ChatSubB should be directly loaded.
<Stack.Navigator initialRouteName="ChatSubA">
<Stack.Screen
name="ChatSubA"
component={ChatSubA}
options={{headerShown: false}}
/>
<Stack.Screen
name="ChatSubB"
component={ChatSubB}
options={{headerShown: false}}
/>
<Stack.Screen
name="ChatSubC"
component={ChatSubC}
options={{headerShown: false}}
/>
<Stack.Screen
name="ChatSubD"
component={ChatSubD}
options={{headerShown: false}}
/>
</Stack.Navigator>
);};
Say if I want to navigate to 'ChatSubB' screen from ScreenA/ScreenB/ScreenC I am using the code
props.navigation.navigate(Chat, {
screen: ChatSubB,
params: {param1:'hai'},
});
But now I need to call 'ChatSubB' on push notification onclick
I don't have 'props' or 'navigate' available to call the above line of code.
This is my PushNotificationHelper.js file. I call these methods from App.js useEffect()
import messaging from '#react-native-firebase/messaging';
import AsyncStorage from '#react-native-async-storage/async- storage';
export async function requestUserPermission() {
...
await getFcmToken();}
export async function getFcmToken() {
...}
export const notificationListener = (navigate) => {
messaging().onNotificationOpenedApp(remoteMessage => {
console.log(
'Notification caused app to open from background state:',
remoteMessage.notification,
);
// navigate("ChatScreen",{
// result: "2371820992-5406-07082-13972-17488760826513",
// });
// navigate('ChatScreen', {
// result: "2371820992-5406-07082-13972-17488760826513",
// });
navigate("Others", {
screen: ChatScreen,
params: {result: "2371820992-5406-07082-13972-17488760826513"},
});
});}
While refering to obtain props or navigate I found a solution using createRef
// RootNavigation.js
import * as React from 'react';
export const navigationRef = React.createRef();
export function navigate(name, params) {
navigationRef.current?.navigate(name, params);
}
and use
RootNavigation.navigate('ChatSubB ', {param1:'hai'})
But this code doesn't work for me as "ChatSubB" is nested in BottomTabNavigator
tab "Chat".
Is there any other solution to achieve my requirement?
Any help would be grateful..
As explained in the docs you can navigate like this -
RootNavigation.navigate('ChatSubB', {
screen: 'Chat',
params: {
param1:'hai'
}
});
Maybe this documentation may help you?
https://reactnavigation.org/docs/nesting-navigators/#nesting-multiple-navigators
And try to use useNavigation hook)
I'm building a barcode reader app that scans that qr code and then takes data and is used as a key to fetch an object from firebase. In order the data to be used as a key I need to pass through another screen but when I check console log it's cameback that the scanned key is undefined.
The itself barcode scanner works perfectly.
Barcode class :
export class BarCodeScannerScreen extends Component{
state = {
CameraPermissionGranted: null,
}
async componentDidMount() {
// Ask for camera permission
const { status } = await Permissions.askAsync(Permissions.CAMERA);
this.setState({ CameraPermissionGranted: status === "granted" ? true : false });
};
barCodeScanned = ({ data }) => {
//Access the Data
alert(data); // shows the scanned key
this.props.navigation.navigate('Info', {
item: data, }); // but then it's dissapears in here.
};
render(){
const { CameraPermissionGranted } = this.state;
if(CameraPermissionGranted === null){
// Request Permission
return(
<View style={styles.container}>
<Text>Please grant Camera permission</Text>
</View>
);
}
if(CameraPermissionGranted === false){
// Permission denied
return (
<View style={styles.container}>
<Text>Camera Permission Denied.</Text>
</View>
);
}
if(CameraPermissionGranted === true){
// Got the permission, time to scan
return (
<View style = {{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}}>
<BarCodeScanner
onBarCodeScanned = {this.barCodeScanned }
style = {{
height: DEVICE_HEIGHT/1.1,
width: DEVICE_WIDTH,
}}
>
</BarCodeScanner>
</View>
);
}
}
}
Here is my Info screen that receives the information :
export default class InfoScreen extends Component {
constructor(props){
super(props);
this.state={
productlist:[],
scannedkey: this.props.route.params.item
} }
async componentDidMount(){
firebase.database().ref(`product/${ this.state.scannedkey}`).on(
"value",
(snapshot) => {
var list = [];
snapshot.forEach((child) => {
list.push({
key: child.key,
title: child.val().title,
//details: child.val().details,
//price: child.val().price
});
});
this.setState({ productlist: list });
},
(error) => console.error(error)
);
}
componentWillUnmount() {
if (this.valuelistener_) {
this.valueRef_.off("value", this.valuelistener_)
}}
render() {
console.log(this.state.scannedkey); // console log shows that scanned key is undefined
return(
<View style={styles.container}>
<Text>Hey</Text>
<Text>{this.state.productlist.title}</Text>
</View>
);}}
App.js
export default function App() {
const Drawer=createDrawerNavigator();
return (
<Provider store={store}>
<NavigationContainer>
<Drawer.Navigator initialRouteName="Barcode">
<Drawer.Screen name="Barcode" component={BarCodeScannerScreen} />
<Drawer.Screen name="Info" component={InfoScreen} />
</Drawer.Navigator>
</NavigationContainer>
</Provider>
);
}
I ussualy use function components to navigate through but with class components it's a little tricky for me. Perhaps I missed something?
So far I 've tried :
this.props.navigation.navigate('Info', {
item: JSON.stringify(data) , });
And it didn't work.
I will be grateful for your help.
Try to use item directly from props, not from state
in your componentDidMount call where you supply from state the scannedKey, supply it from props
firebase.database().ref(`product/${this.props.route.params.item}`)....
you are also calling this.props instead of props directly in your state inside your constructor, which have direct access to it, that's why you can call super(props) and not super(this.props), I am not sure if this is the issue, but in react docs says don't copy props to state because they get ignored, and it's bad practice my friend.
check this link, in the big yellow note what I am reffering to
https://reactjs.org/docs/react-component.html#constructor
I am trying to build a simple navbar but when I define a setResponsivness function inside my useEffect
I am getting the error Rendered fewer hooks than expected. This may be caused by an accidental early return statement. I looked at similar answers for the same but till wasn't able to fix
Here s my code
import React,{useEffect,useState} from 'react'
import {AppBar ,Toolbar, Container ,makeStyles,Button, IconButton} from '#material-ui/core'
import MenuIcon from '#material-ui/icons/Menu'
const usestyles = makeStyles({
root:{
display:'flex',
justifyContent:'space-between' ,
maxWidth:'700px'
},
menubtn:{
fontFamily: "Work Sans, sans-serif",
fontWeight: 500,
paddingRight:'79px',
color: "white",
textAlign: "left",
},
menuicon:{
edge: "start",color: "inherit",paddingLeft:'0'
}
})
const menudata = [
{
label: "home",
href: "/",
},
{
label: "About",
href: "/about",
},
{
label: "Skill",
href: "/skills",
},
{
label: "Projects",
href: "/projects",
},
{
label: "Contact",
href: "/contact",
},
];
//yet to target link for the smooth scroll
function getmenubuttons(){
const {menubtn} = usestyles();
return menudata.map(({label,href})=>{
return <Button className={menubtn}>{label}</Button>
})
}
//to display navbar on desktop screen
function displaydesktop(){
const { root } = usestyles() //destructuring our custom defined css classes
return <Toolbar ><Container maxWidth={false} className={root}>{getmenubuttons()}</Container> </Toolbar>
}
//to display navbar on mobile screen
function displaymobile(){
const {menuicon} =usestyles() ;
return <Toolbar><IconButton className={menuicon}><MenuIcon /> </IconButton></Toolbar>
}
function Navbar() {
const [state, setState] = useState({mobileview:false});
const {mobileview} = state;
useEffect(() => {
const setResponsiveness = () => {
return window.innerWidth < 900
? setState((prevState) => ({ ...prevState, mobileview: true }))
: setState((prevState) => ({ ...prevState, mobileview: false }));
};
setResponsiveness();
window.addEventListener("resize", () => setResponsiveness());
}, []);
return (
<div>
<AppBar> {mobileview?displaymobile():displaydesktop()} </AppBar>
</div>
)
}
export default Navbar;
Your problem seems to be here
{mobileview?displaymobile():displaydesktop()}
For example the displaymobile function inside uses hooks right (usestyles)? Then it means you are rendering hooks inside conditions (mobileview being condition) which is not allowed by rules of hooks.
You can fix it like this:
<div>
<AppBar> {mobileview ? <Displaymobile /> : <Displaydesktop />} </AppBar>
</div>
Also change definition of component using capital letters as that is how react refers to components. e.g.
function Displaydesktop() {
const { root } = usestyles(); //destructuring our custom defined css classes
return (
<Toolbar>
<Container maxWidth={false} className={root}>
{getmenubuttons()}
</Container>{" "}
</Toolbar>
);
}
Now we consume them as components. Probably when you used lower case letters and called those as functions in your render, react interpreted them as custom hooks, hence the warnings.
I am learning how to implement Firestore with react-native(Android). Then, I found 'react-native-firebase' and stuck in this exception.
Error:Exception in
HostObject::get(propName:RNFirebase):
java.lang.NoClassDefFoundError: Failed resolution
of: Lcom/google/firebase/FirebaseApp;
I already setup firebase in my gradle (ref.https://firebase.google.com/docs/android/setup/?authuser=0)
Firebase database's rule
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /{document=**} {
allow read, write;
}
}
}
and this is my learning code (ref.https://www.youtube.com/watch?v=_GOI7h9ojr8)
import React,{ Component } from 'react';
import {
Flatlist,
Text,
TextInput,
TouchableHighlight,
Image,
View } from 'react-native';
import firebase from 'react-native-firebase';
export default class test extends Component {
constructor(props){
super(props);
this.state = ({
todoTask: [],
newTaskName: '',
loading: false
});
this.ref = firebase.firestore().collection('todo');
}
onPressAdd = () => {
this.ref.add({
taskName: this.state.newTaskName
}).then((data) => {
console.log('added data = ${data}');
this.setState({
newTaskName: '',
loading: true
});
}).catch((error) => {
console.log('error adding firestore document = ${error}');
this.setState({
newTaskName: '',
loading: true
});
});
}
render(){
return (
<View style={{flex: 1}}>
<Text>Hello</Text>
<TextInput style={{
height: 40,
width: 200,
margin: 10,
padding: 10,
borderColor: 'white',
borderWidth: 1,
color: 'white'
}}
keyboardType='default'
placeholderTextColor='white'
placeholder='Enter task name'
onChangeText={
(text) => {
this.setState({ newTaskName: text});
}
}
>
</TextInput>
<TouchableHighlight
style={{ marginRight: 10 }}
underlayColor='tomato'
onPress={this.onPressAdd}>
<Image
style={{ width: 35, height: 35 }}
source={require('./icon-add.png')}
>
</Image>
</TouchableHighlight>
<Flatlist
data={this.state.todoTask}
renderItem={({item, index}) => {
return(
<Text>{item.taskName}</Text>
);
}}
>
</Flatlist>
</View>
);
}
}
Can u explain why it happen? Thanks a lot.
You installed 'react-native-firebase' package so kindly note to remove(uninstall) it.
According to the docs:
First you need to install firebase package:
npm install --save firebase
Then import it using firebase/app:
// Firebase App (the core Firebase SDK) is always required and
// must be listed before other Firebase SDKs
import * as firebase from "firebase/app";
Also making sure you have the library you are using in your android/app/build.gradle in my case firebase-core
implementation "com.google.firebase:firebase-core:17.4.3"
Hye guys.. im trying to use react-navigation and firebase in my project.
Im using this awesome boilerplate :-
https://github.com/jhen0409/react-native-boilerplate
in my navigator.js
import { StackNavigator } from 'react-navigation';
import Home from './containers/Home';
import MainScreen from './containers/MainScreen';
import HelpScreen from './containers/HelpScreen';
const AppNavigator = new StackNavigator(
{
Home: { screen: Home },
MainScreen: { screen: MainScreen },
HelpScreen: { screen: HelpScreen }
},
{
headerMode: 'screen'
},
);
export default AppNavigator;
and then in my landing screen which is Home.js
#firebaseConnect()
#connect(
state => ({
nav: state.nav.routes
}),
dispatch => bindActionCreators(userActions, dispatch),
)
export default class Home extends Component {
componentDidMount() {
this.props.firebase.auth().onAuthStateChanged( user => {
if(user) {
//check route stack in redux store
if(this.props.nav[this.props.nav.length-1].routeName !== 'MainScreen') {
this.props.navigation.navigate('MainScreen');
}
this.props.firebase.updateProfile({ lastLogin: new Date() });
user.getIdToken().then( t => this.props.userToken(t) );
} else {
this.props.firebase.auth().signInAnonymously()
.then((user) => {
console.log('user successfully sign in anonymously', user);
// Insert user record to firebase
this.props.firebase.updateProfile(
{
name: 'Anonymous'
}
)
})
.catch(
(error) => {
console.log('error ', error)
})
}
})
}
render() {
return (
<View />
);
}
}
and inside my MainScreen.js
#firebaseConnect(['/helpDetails'])
#connect(
(state, props) => {
return({
})
}
)
export default class MainScreen extends Component {
logout = () => {
this.props.navigation.goBack();
this.props.firebase.logout();
console.log('logout!');
}
render() {
return (
<View style={{ flex: 1 }}>
<TouchableOpacity onPress={() => this.logout()}>
<Text>LOG OUT</Text>
</TouchableOpacity/>
</View>
)
}
}
everything is going fine when user open the apps.. but it start to give this red screen when I click the logout.. if I change firebaseConnect inside Mainscreen from
#firebaseConnect(['/helpDetails'])
TO
#firebaseConnect([])
then everything is working fine..
can anyone help me what im doing wrong here? thanks!
I think this is not a problem of you, but of the library. I have the same issue. Thank god this is only happening while in developer mode (in release everthing works fine).
When I try it without devtools, it works. In my opinion react-redux-firebase is doing some weird stuff when logging out and creates (maybe just for one second) a circular JSON-structure. In JavaScript itself this isn't a big problem, but when you want to stringify it (which is done to display it in your devtools), then the circular structure cannot be converted to a String. Hope to see a fix for that soon from the devs.
Related Issue: Github Issue react-redux-firebase