0

enter image description here

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!

Hazim Ali
  • 1,077
  • 4
  • 17
  • 28
  • That's 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). Are you using Redux devtools? – kolbma Mar 12 '18 at 09:08
  • oh, I thought it's my problem.. yes, I am using redux devtools.. is that is the reason ? @kolbma – Hazim Ali Mar 12 '18 at 09:37

1 Answers1

0

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

kolbma
  • 340
  • 2
  • 11