Pfthb

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 = null;
 unsubscriber: Function 

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 ;

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 ;

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;