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 ? ( <View style={styles.container}> <TextInput style={styles.inputbox} underlineColorAndroid='rgba(0,0,0,0)' placeholder={I18n.t('Email')} placeholderTextColor='#ffffff' ></TextInput> <Text style={styles.textName}>{I18n.t('SignText')}</Text>

    <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 }