TypeError: I18n.t is not a function. 'I18n.t' is undefined)

[eljoar]

My regards to you, I know that you have already solved the problems in previous projects, but it does not work for me, possibly because I am learning, but I have been stuck here, can someone tell me that I am wrong? I followed a tutorial that made it seem easy but it didn't work for me.

Here I leave my app
im usyng just expo

import * as React from "react";
// import I18n from 'i18next';
// import Backend from 'i18next-xhr-backend';
// import LanguageDetector from 'i18next-browser-languagedetector';
// import { initReactI18next } from 'react-i18next';

import {
StyleSheet,
View,
Text,
TextInput,
TouchableOpacity
} from "react-native";
import * as Font from "expo-font";
import { Button } from "react-native-elements";

var I18n = require("react-native-i18n");

export default class SignPage extends React.Component {
constructor(props) {
super(props);
this.state = {
fontLoaded: false
};
}

async componentDidMount() {
await Font.loadAsync({
"AristotelicaSmallCaps-Regular": require("./../assets/fonts/AristotelicaSmallCaps-Regular.ttf"),
"BebasNeue-Regular": require("./../assets/fonts/BebasNeue-Regular.ttf")
}).then(() => {
this.setState({ fontLoaded: true });
});
}

render() {
return this.state.fontLoaded == true ? (

<TextInput
style={styles.inputbox}
underlineColorAndroid='rgba(0,0,0,0)'
placeholder={I18n.t('Email')}
placeholderTextColor='#ffffff'
>
{I18n.t('SignText')}

    <TouchableOpacity style={styles.btnstyle1}>
      <Button
        titleStyle={styles.textButtonSign}
        color='#7ec8f7'
        title={I18n.t('Next')}
      ></Button>
    </TouchableOpacity>
  </View>
) : (
  <View style={styles.container}></View>
);

}
}

const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: "column",
backgroundColor: "white",
alignContent: "flex-end",
justifyContent: "flex-end",
alignItems: "center"
},

inputbox: {
backgroundColor: "rgba(30,137,219,0.3)",
width: 290,
height: 40,
color: "black",
paddingHorizontal: 16,
textAlign: "center",
fontSize: 25,
marginBottom: 10,
fontFamily: "BebasNeue-Regular",
textAlignVertical: "center"
},
textName: {
// backgroundColor:'green',
width: 290,
height: 40,
color: "#7ec8f7",
paddingHorizontal: 16,
textAlign: "center",
fontSize: 25,
marginBottom: 80,
fontFamily: "BebasNeue-Regular",
textAlignVertical: "center"
},
btnstyle1: {
flexDirection: "column",
margin: 30,
justifyContent: "center",
height: 15,
width: 290,
textAlignVertical: "center"
},

textButtonSign: {
margin: 1,
fontSize: 21,
textAlign: "center",
color: "white",
fontFamily: "BebasNeue-Regular",
textAlignVertical: "center"
},

});

I18n.fallbacks=true,

I18n.translations= {
en: {
Email: "Your Email Adress",
Next: "Next",
SignText: "We'll send you an email that'll instantly sign you in"
},
es: {
Email: "Tu Correo electrónico",
Next: "Siguiente",
SignText:
"Le enviaremos un correo electrónico que lo registrará instantáneamente"
}
}

my package.js

{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"expo": "^35.0.0",
"expo-font": "^7.0.0",
"react": "16.8.3",
"react-dom": "16.8.3",
"react-native": "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz",
"react-native-elements": "^1.2.3",
"react-native-gesture-handler": "^1.4.1",
"react-native-i18n": "^2.0.15",
"react-native-web": "^0.11.7",
"react-navigation": "^4.0.10",
"react-navigation-stack": "^1.9.1"
},
"devDependencies": {
"babel-preset-expo": "^7.0.0"
},
"private": true
}