Nrthugu

I have a piece of code in my componentDidMount lifecycle function that does the following

this.unsubscriber = auth().onAuthStateChanged((user: RNFirebase.User) => {

   this.setState({ user });

});

onAuthStateChanged returns an unsubscriber function that needs to be called when the component unmounts. The problem is that if I declare the unsubscriber variable like so

constructor(props: {}) {

    super(props);

    this.unsubscriber: Function = null

}

typescript complains by saying that the property "unsubscriber" does not exist(also that I cannot assign to function because it is a constant or read only property). I tried doing other stuff like passing it as a state like so.

type AppState = {

  user: RNFirebase.User | null;

  unsubscriber: Function | null;

}



class App extends Component<{}, AppState> {

   ....

}

but that didn't do me any good; got the same error when I try to assign the return value from onAuthStateChanged. this.unsubscriber = null would work just fine if I was just doing react without typescript but I'm trying to use both.

The closest I got was this

type AppState = {

  user: RNFirebase.User | null;

};



class App extends Component<{}, AppState> {

  private unsubscriber: Function;

  ....

}

But the error I got for this one is that it not initialized there or in the constructor and I can't assign null to it. So what can I do?

Here is the entire code that I'm working with.

import React, { Component } from 'react';

import { Text, View } from 'react-native';

import { auth, RNFirebase } from 'react-native-firebase';

import { Login } from './screens';



type AppState = {

  user: RNFirebase.User | null;

};



class App extends Component<{}, AppState> {

  private unsubscriber: Function; // This has to be initialized.



  constructor(props: {}) {

    super(props);

    this.state = { user: null };

  }



  componentDidMount() {

    this.unsubscriber = auth().onAuthStateChanged((user: RNFirebase.User) => {

      this.setState({ user });

    });

  }



  componentWillUnmount() {

    if (this.unsubscriber) {

      this.unsubscriber();

    }

  }



  render() {

    const { user } = this.state;



    if (!user) {

      return <Login />;

    }



    return (

      <View>

        <Text>Welcome to my awesome app {user.email}!</Text>

      </View>

    );

  }

}



export default App;

I'd suggest you to keep your unsubscriber declaration as a class member but make it optional (optional class properties). Also, Function type is generally not useful at all (just take a look at what is the interface that it defines) and you're better off defining its type as () => void if its return value is going to be ignored (see callback types). So, try something like this:

private unsubscriber?: () => void;

You just need to initialize unsubscriber property:

private unsubscriber: (() => void) | null = null;