Null is not an object (evaluating 'NativeMqtt.new client)

Question

I'm using the MQTT protocol in my project, when I include the MQTT protocol with

import * as Mqtt from 'react-native-native-mqtt'

declare my client with

const client = new Mqtt.Client('mqtt://broker.mqttdashboard.com:8000');

it shows the following error:

typeerror: null is not an object (evaluating 'nativemqtt.newclient)

Note: I'm using expo.

This is the code:

import React from 'react';
import {StyleSheet,View} from 'react-native';
import {createStackNavigator} from '@react-navigation/stack';
import {Heading} from '../components/Heading';
import {Input} from '../components/Input';
import {FilledButton} from '../components/FilledButton';
import {TextButton} from '../components/TextButton';
import {Error} from '../components/Error';
import {AuthContainer} from '../components/AuthContainer';
import {AuthContext} from '../contexts/AuthContext';
import {Loading} from '../components/Loading';
import * as Mqtt from 'react-native-native-mqtt';
export const LoginScreen=({navigation})=> {
  const [email, setEmail] = React.useState('4');
  const [password, setPassword] = React.useState('');
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState('');
  const client = new Mqtt.Client('mqtt://broker.mqttdashboard.com:8000');
  client.connect('clientId-us94E5BePP');
  return (
    <AuthContainer>
      <Heading style={styles.title}>LOGIN</Heading>
      {<Error error={error} />}
      <Input
        style={styles.input}
        placeholder={'Email'}
        keyboardType={'email-address'}
        value={email}
        onChangeText={setEmail}
      />
      <Input
        style={styles.input}
        placeholder={'Password'}
        secureTextEntry
        value={password}
        onChangeText={setPassword}
      />
      <FilledButton
        title={'Login'}
        style={styles.loginButton}
        onPress={()=>{async () => {
          try {
            setLoading(true);
            await login(email, password);
          } catch (e) {
            setError(e.message);
            setLoading(false);
          }
        }}}
      />
      <TextButton
        title={'Have u an account? Create one'}
        onPress={() => {
          navigation.navigate('Registration');
        }}
      />
      <Loading loading={loading} /> 
    
    </AuthContainer>
  );
}
const styles = StyleSheet.create({
  title: {
    marginBottom: 48,
  },
  input: {
    marginVertical: 8,
  },
  loginButton: {
    marginVertical: 32,
  },
});