I'm fetching some data from a server to load it to my app, my app doesn't load until the app loads all the data, it works perfectly in the debug mode, but when I have to test it on release mode, I have to reload it in order to make it work, and that is not the idea. Here's my code:
import React, { Component } from 'react';
import { Alert, NetInfo, View, Text, AsyncStorage, TouchableWithoutFeedback, Linking, Platform } from 'react-native';
import { Actions } from 'react-native-router-flux';
import Router from './Router';
import OnBoarding from './components/OnBoarding';
import Loading from './components/Loading';
import OneSignal from 'react-native-onesignal';
import axios from 'axios';
var DeviceInfo = require('react-native-device-info');
class App extends Component {
constructor(props) {
super(props);
this.state = {
usage: '',
categories_hum: [],
videoshum: [],
categories_nov: [],
novedades: [],
tiendas: [],
promociones: [],
listadoCodigos: [],
token: "",
listadoCodigosRecibido: true,
terminos: '',
notFirst: false
};
this.changeUsage = this.changeUsage.bind(this);
}
onIds(device) {
AsyncStorage.setItem('playerId', device.userId);
}
onOpened(openResult) {
if(openResult.notification.payload.additionalData != undefined) {
var opc = openResult.notification.payload.additionalData.opc;
if(opc == 2) {
opc = "2";
AsyncStorage.setItem('opcion', opc);
} else if(opc == 1) {
opc = "1";
AsyncStorage.setItem('opcion', opc);
}
}
}
componentWillMount() {
OneSignal.addEventListener('ids', this.onIds);
OneSignal.addEventListener('opened', this.onOpened);
}
componentDidMount() {
NetInfo.isConnected.fetch().then(isConnected => {
if(!isConnected) {
Alert.alert (
'No hay conexion',
'No hay conexion a internet, debe poseer una conexion WiFi o celular para usar FerretotalApp'
);
}
});
fetch('https://ferrretotalcom.kinsta.com/wp-json/wp/v2/categoria-hum?per_page=100')
.then(response => response.json())
.then(
response => this.setState({ categories_hum: response})
);
fetch('https://ferrretotalcom.kinsta.com/wp-json/wp/v2/videoshum?per_page=100')
.then(response => response.json())
.then(
response => this.setState({ videoshum: response })
);
fetch('https://ferrretotalcom.kinsta.com/wp-json/wp/v2/tienda_acf?per_page=100')
.then(response => response.json())
.then(
response => this.setState({ tiendas: response })
);
fetch('https://ferrretotalcom.kinsta.com/wp-json/wp/v2/categorianovedades?per_page=100')
.then(response => response.json())
.then(
response => this.setState({ categories_nov: response })
);
fetch('https://ferrretotalcom.kinsta.com/wp-json/wp/v2/ferretotalnovedades?per_page=100')
.then(response => response.json())
.then(
response => this.setState({ novedades: response })
);
fetch('https://ferrretotalcom.kinsta.com/wp-json/wp/v2/promociones_activas?hola=1')
.then(response => response.json())
.then(
response => this.setState({ promociones: response })
);
fetch('https://ferrretotalcom.kinsta.com/wp-json/wp/v2/listado_codigos_usuario?deviceID="'+DeviceInfo.getUniqueID()+'"')
.then(response => response.json())
.then(
response => this.setState({ listadoCodigos: response, listadoCodigosRecibido: true})
);
fetch('https://ferrretotalcom.kinsta.com/wp-json/wp/v2/terminos_condiciones?hola=1')
.then(response => response.json())
.then(
response => this.setState({ terminos: response})
);
AsyncStorage.getItem('usage').then((result) => {
if(!result){
this.setState({usage: "firstTime"});
}else{
this.setState({usage: result});
}
//al colocar esto hara q salga siempre el onboarding
//AsyncStorage.removeItem("usage");
});
AsyncStorage.getItem('notFirst').then((result) => {
if(!result){
this.setState({notFirst: false});
} else {
this.setState({notFirst: false})
}
});
AsyncStorage.getItem('token').then((value) => {
if(!value){
var DeviceID = DeviceInfo.getUniqueID();
fetch('https://ferrretotalcom.kinsta.com/wp-json/wp/v2/recibir_token?deviceID="'+DeviceID+'"')
.then((response) => response.json())
.then((response) => {
if(response[0]){
AsyncStorage.setItem('token',response[0].access_token);
this.setState({token: response[0].access_token});
}
})
} else {
this.setState({token: value})}
});
AsyncStorage.setItem('newCode',"false");
}
componentWillUnmount() {
OneSignal.removeEventListener('ids', this.onIds);
OneSignal.removeEventListener('opened', this.onOpened);
}
changeUsage(e) {
this.setState({usage: "notFirst"});
this.setState({notFirst: true});
}
render(){
/*alert(this.state.categories_hum.length + "" + this.state.videoshum.length + "" + this.state.promociones.length
+ "" + this.state.novedades.length + "" + this.state.categories_nov.length + "" + this.state.tiendas.length + "" + this.state.listadoCodigosRecibido + "" + this.state.terminos.length) */
if(this.state.categories_hum.length && this.state.videoshum.length && this.state.promociones.length
&& this.state.novedades.length && this.state.categories_nov.length && this.state.tiendas.length && this.state.listadoCodigosRecibido && this.state.terminos.length) {
if(this.state.usage.length && this.state.usage == "firstTime"){
//al colocar esto solo saldra el onboarding la primera vez
AsyncStorage.setItem('usage', "notFirst");
AsyncStorage.setItem('notFirst', true)
//al colocar esto, guardara la fecha de instalacion de la aplicacion (realmente la primera vez que se mete)
AsyncStorage.getItem('installed').then((result) => {
if(!result) {
var date = new Date();
date = date.toString();
AsyncStorage.setItem('installed', date);
}
});
return (
<OnBoarding changeUsage={this.changeUsage} terminos={this.state.terminos}/>
);
} else if(this.state.usage == "notFirst"&& this.state.notFirst == false) {
return(
<OnBoarding changeUsage={this.changeUsage} terminos={this.state.terminos} notFirst={true}/>
);
} else if(this.state.usage == "notFirst"&& this.state.notFirst) {
return (
<View style={{flex:1}}>
<Router
categories_hum={this.state.categories_hum}
videoshum={this.state.videoshum}
categories_nov={this.state.categories_nov}
novedades={this.state.novedades}
tiendas={this.state.tiendas}
listadoCodigos={this.state.listadoCodigos}
promociones={this.state.promociones}
token={this.state.token}
terminos={this.state.terminos}
/>
</View>
);
}
} else{
return (
<Loading/>
)
}
}
}
export default App;
As you can see, I'm fetching all the data I need in the "ComponentDidMount" method, then I store the JSON data in multiple states and pass it to the screens I need, the thing is that in release mode, the states don't have anything after it "loads" and it only happens the first time you open the app and only in release mode, I check the response from fetch and it is ok, it brings the data. I have tried lot of things but I can't still figured out what it is since it works well in debug mode. Please if you have any ideas, you can tell me.