How to use the react-native-config.API_URL function in react-native-config

import * as YettaServerAPIclient from './client';
import { handleError } from './../../utils/errorHandlers';
import Config from 'react-native-config';
import store from './../../store';

// redux functions
import { setIsWaitingForJudge } from './../../actions/runnerStatusActions';
import { setBusyWaitingRunnerIdImageUpload } from './../../actions/busyWaitingActions';

const ID_UPLOAD_URL = `${Config.API_URL}/upload?query=mutation{userUploadIdImage(input:{}){imgUrl clientMutationId}}`;

export const runnerApplyFirstJudge = () => {
  return new Promise((resolve, reject) => {
    return YettaServerAPIclient.getLokkaClient()
      .then(client => {
        return client.mutate(`{
          runnerApplyFirstJudge(
            input:{
            }
          ) {
            result
          }
        }`);
      })
      .then(res => {
        __DEV__ && console.log(res); // eslint-disable-line no-undef

async function downloadLayer(config, dispatch: Dispatch) {
  const { area, layerId, layerUrl, zoom } = config;
  const url = `${Config.API_URL}/download-tiles/${area.geostore.id}/${zoom.start}/${
    zoom.end
  }?layerUrl=${layerUrl}&useExtension=false`;
  const res = await RNFetchBlob.config({ fileCache: true })
    .fetch('GET', encodeURI(url))
    .progress((received, total) => {
      const progress = received / total;
      dispatch({ type: UPDATE_PROGRESS, payload: { areaId: area.id, progress, layerId } });
    });
  const statusCode = res.info().status;
  if (statusCode >= 200 && statusCode < 400 && res.path()) {
    const downloadPath = res.path();
    const tilesPath = `${CONSTANTS.files.tiles}/${area.id}/${layerId}`;
    const targetPath = `${RNFetchBlob.fs.dirs.DocumentDir}/${tilesPath}`;
    await unzip(downloadPath, targetPath);
    res.flush(); // remove from the cache
    return `${tilesPath}/{z}x{x}x{y}`;

export async function isAuthorized () {
  // TODO cache this with a TTL, since it's called on every state change
  return Keychain.hasInternetCredentials(Config.API_URL)
}

if (fields.includes(key)) {
        if (typeof report[key] === 'string' && report[key].indexOf('jpg') >= 0) { // TODO: improve this
          const image = {
            uri: report[key],
            type: 'image/jpg',
            name: `${type}-image-${key}.jpg`
          };
          form.append(key, image);
        } else {
          form.append(key, report[key].toString());
        }
      }
    });

    const feedbackId = type === 'daily' ? Config.DAILY_FEEDBACK : Config.WEEKLY_FEEDBACK;
    const url = `${Config.API_URL}/reports/${feedbackId}/answers`;
    const headers = { 'content-type': 'multipart/form-data' };

    const requestPayload = {
      name: type,
      status: CONSTANTS.status.complete
    };
    const commitPayload = {
      name: type,
      status: CONSTANTS.status.uploaded
    };

    dispatch({
      type: UPLOAD_FEEDBACK_REQUEST,
      payload: requestPayload,
      meta: {
        offline: {

return (dispatch, state) => {
    const language = getLanguage().toUpperCase();
    let qIdByLanguage = Config[`QUESTIONNARIE_ID_${language}`];
    if (!qIdByLanguage) qIdByLanguage = Config.QUESTIONNARIE_ID_EN; // language fallback
    const url = `${Config.API_URL}/questionnaire/${qIdByLanguage}`;
    const fetchConfig = {
      headers: {
        'content-type': 'application/json',
        Authorization: `Bearer ${state().user.token}`
      }
    };
    fetch(url, fetchConfig)
      .then(response => {
        if (response.ok) return response.json();
        throw new Error(response.statusText);
      })
      .then((data) => {
        let form = null;
        if (data && data.data && data.data[0]) {
          form = data.data[0].attributes;
        }

export function getDefaultReport(): ReportsAction {
  const url = `${Config.API_URL}/reports/default`;

  return {
    type: GET_DEFAULT_TEMPLATE_REQUEST,
    meta: {
      offline: {
        effect: { url },
        commit: { type: GET_DEFAULT_TEMPLATE_COMMIT },
        rollback: { type: GET_DEFAULT_TEMPLATE_ROLLBACK }
      }
    }
  };
}

export function getAreaAlerts(area: Area, datasetSlug: string, range: number) {
  const url = `${Config.API_URL}/fw-alerts/${datasetSlug}/${area.geostore.id}?range=${range}&output=csv`;
  const alertId = `${area.id}_${datasetSlug}`;
  return {
    type: GET_ALERTS_REQUEST,
    payload: alertId,
    meta: {
      offline: {
        effect: { url, deserialize: false },
        commit: { type: GET_ALERTS_COMMIT, meta: { area, datasetSlug, range, alertId } },
        rollback: { type: GET_ALERTS_ROLLBACK, meta: { alertId } }
      }
    }
  };
}

render() {
    return (
      
    );
  }
}

import React, { Component } from 'react';
import { Container, Text, Card, CardItem, Body } from 'native-base';
import { Provider } from 'react-redux';
import Modal from 'react-native-modalbox';
import { Easing } from 'react-native';
import Config from 'react-native-config'

import Loading from './shared/components/spinner';
import store from './store';
import NavigatorService from './navigation/services/navigation-service';
import Navigation from './navigation/components';
import Error from './shared/error-modal';

export const API_URL = Config.API_URL;

export default class App extends Component<{}> {

  public render(): JSX.Element {

    return (
      
        
           {
            NavigatorService.setContainer(navigatorRef);
          }} />
        
        
        
      
    );