I have a constant variable where I set it as domain address
const webDomain = 'http://projectname.company.com/';
On development mode where I run npx react-native run-android
, there is no problem on Splash screen located at ./src/init/initSplash.js
to get this variables. But when I build the app as relase apk, the variable is likely not retrieved as there is alert that I placed where it says that it is not connected to my web domain. The variables to be use globally on API fetch URL will be replaced at AppGlobal.constRESTful = webDomain +'api/store';
FULL SPLASH SCREEN SCRIPT:
import React, { Component } from 'react';import { BackHandler, View, Image, Dimensions, StatusBar } from 'react-native';const { width } = Dimensions.get('window');import { Container, Content, Header, Text } from 'native-base';import AsyncStorage from '@react-native-community/async-storage';import DeviceInfo from 'react-native-device-info';import { returnWarning } from '../../components/AwaitModal';import { Base64 } from 'js-base64';import splashLogo from '../../images/splashLogo.png';const webDomain = 'http://projectname.company.com/';import Loader from '../../components/Loader';import * as ApiFunction from '../../services/ApiFunction';import * as AppGlobal from '../../services/AppGlobal';export default class InitSplash extends Component { constructor(props) { super(props); _isMounted = false; this.state = { loading: false, waitText: '', progressText: '', isError: false, isConnected: true, tokenID: '', token: '', }; this.timer = null; this.handleBackButton = this.handleBackButton.bind(this) } componentDidMount = async () => { AppGlobal.constRESTful = webDomain +'api/store'; BackHandler.addEventListener('hardwareBackPress', this.handleBackButton); const data = await this.performTimeConsumingTask(); if (data !== null) { setTimeout(async () => { this.setState({ progressText: 'Getting app ready...' }); }, 500); if (AppGlobal.constUserID > -1) { this.props.navigation.navigate('MainDashboard'); } else { await this.IsConnectionAvailable() .then(async (response) => { if (response === 'OK') { this.props.navigation.navigate('MainAuth'); } }).catch(async () => { await returnWarning('Not connected', 'Failed to check connection with web server.') this.props.navigation.navigate('MainAuth'); });; } } else { setTimeout(() => { this.setState({ progressText: 'Unable to get all mandatory configuration' }); this.props.navigation.navigate('MainAuth'); }, 500); } } componentWillUnmount() { this._isMounted = false; BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton); } handleBackButton() { return true; } IsConnectionAvailable = async () => { return new Promise(async (resolve, reject) => { await ApiFunction.HelloServer() .then((response) => { this.setState({ progressText: 'Server reply: '+ response, isConnected: true }); resolve('OK'); }) .catch(e => { //console.log('Unable to get response from web server. '+ e); this.setState({ progressText: 'Unable to connect to webserver', isConnected: false }); reject('Unable to connect to webserver'); throw error; }); }); } performTimeConsumingTask = async () => { return new Promise(async (resolve) => { await this._loadConfig(); setTimeout(() => { resolve('result') }, 500) }); } _loadConfig = async () => { var userToken = await AsyncStorage.getItem('USER_TOKEN'); if (typeof userToken !== 'undefined') { var decodeToken = Base64.decode(userToken).split('|'); this.setState({ tokenID: decodeToken[0], token: userToken }); if (parseInt(decodeToken[0]) > -1) { AppGlobal.constUserID = parseInt(decodeToken[0]); } } } renderOffline() { return (<View style={{ backgroundColor: '#b52424', height: 30, justifyContent: 'center', alignItems: 'center', flexDirection: 'row', width, position: 'absolute', top: 30 }}><Text style={{ color: 'white' }}>No Internet Connection</Text></View> ) } render() { return (<Container><StatusBar hidden={true} /><Loader loading={this.state.loading} waitText={this.state.waitText} /><Header style={{ display: 'none' }} /> {!this.state.isConnected ? this.renderOffline : null}<Content padder contentContainerStyle={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}><Text style={{ fontSize: 40}}>MY STORE</Text><Image source={splashLogo} style={{ width: '50%', height: '50%', alignItems: 'center', justifyContent: 'center', marginBottom: 10 }} resizeMode={"contain"} /><Text>{this.state.progressText}</Text></Content></Container> ); }}
Why is this happen on release version? Image from folder also cannot read. Just happen for this project currently. On my previous project few month ago, I'm not facing these kind of things. I'm clueless about what is going on.