Converting circular structure to JSON react-navigation with firebase - firebase

Question

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!

Answer 1

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