Error thrown: 'undefined is not a function (evaluating '_app.default.auth()') onButtonPress'

Question

I'm running into an issue with firebase. My first error, I fixed by changing my import to import firebase from '@firebase/app', as suggested by this comment, (before it was import firebase from 'firebase'). Now I'm running into another issue and I'm just starting to learn react-native, so I've exhausted all my options.

Initialization works,

componentWillMount() {
    firebase.initializeApp({
      apiKey: 'AIzaSy...3LQ7MI...zexagpf9...80',
      authDomain: 'authentication-7...d.firebaseapp.com',
      databaseURL: 'https://authentication-7...d.firebaseio.com',
      projectId: 'authentication-7...d',
      storageBucket: 'authentication-7...d.appspot.com',
      messagingSenderId: '1740...445'
    });
}

And then in my login component, when the Login button is pressed,

onButtonPress() {
    const { email, password } = this.state;
    firebase
      .auth()
      .signInWithEmailAndPassword(email, password)
      .catch(() => {
        firebase
          .auth()
          .createUserWithEmailAndPassword(email, password)
          .catch(() => {
            this.setState({ error: 'Authentication failed: ' + err });
          });
      });
}

<Button onPress={this.onButtonPress.bind(this)}>Login</Button>

I get the error,

undefined is not a function (evaluating '_app.default.auth()')
onButtonPress
    C:\Users\Me\Desktop\react-native_2\auth\src\components\loginForm.js:11:4
proxiedMethod
    C:\Users\Me\Desktop\react-native_2\auth\node_modules\react-proxy\modules\createPrototypeProxy.js:44:35
touchableHandlePress
    C:\Users\Me\Desktop\react-native_2\auth\node_modules\react-native\Libraries\Components\Touchable\TouchableOpacity.js:211:45

Perhaps I am following an outdated tutorial?