React Native - Code source de l'application Assalate

import React, { Component } from 'react';
import {AppRegistry, StyleSheet, ActivityIndicator, WebView, StatusBar, Text, View, AsyncStorage} from 'react-native';

export default class Assalate extends Component {
  constructor(props) {
    super(props);

    this.state = {
      data: {},
      isLoading: true,
      refreshing: false,
    }

  }
  /**
   * componentDidMount()
   * cette fonction est executée une fois au démmarage de l'appli
   */
  componentDidMount() {

    /* recuperer les données depuis AsyncStorage  */
    AsyncStorage.multiGet(['AS_date', 'AS_fajr', 'AS_dohr', 'AS_asr', 'AS_maghreb', 'AS_ichaa', 'AS_vendredi', 'AS_url'])
      .then((value) => {
        this.setState({
          data: {
            Date: value[0][1],
            Fajr: value[1][1],
            Dohr: value[2][1],
            Asr: value[3][1],
            Maghreb: value[4][1],
            Ichaa: value[5][1],
            Vendredi: value[6][1],
            Url: value[7][1]
          },
          isLoading: false,
        });
      });
      this.callApi();
  }
  /**
  * callApi()
  * recuperer les données depuis api.latrach.net
  */
  callApi() {
    this.setState({
      isLoading: true,
    });

    fetch('http://api.latrach.net/salate/v1', {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        dateNowYear: '',
        dateNowMonth: '',
        dateNowDay: '',
      })
    })
      .then((response) => response.json())
      .then((responseJson) => {
        this.setState({
          data: {
            Date: responseJson.Date,
            Fajr: responseJson.Fajr,
            Dohr: responseJson.Dohr,
            Asr: responseJson.Asr,
            Maghreb: responseJson.Maghreb,
            Ichaa: responseJson.Ichaa,
            Vendredi: responseJson.Vendredi,
            Url: responseJson.Url
          },
          isLoading: false,
        });
        /*Strore data Locally for offline */
        AsyncStorage.multiSet([
          ['AS_date', responseJson.Date],
          ['AS_fajr', responseJson.Fajr],
          ['AS_dohr', responseJson.Dohr],
          ['AS_asr', responseJson.Asr],
          ['AS_maghreb', responseJson.Maghreb],
          ['AS_ichaa', responseJson.Ichaa],
          ['AS_vendredi', responseJson.Vendredi],
          ['AS_url', responseJson.Url]
        ]);
      }).catch(() => {
        this.setState({
          isLoading: false,
        });
      })
  }

  render() {
    if (this.state.isLoading) {
      return (
        <View style={{ flex: 1 }}>
          <ActivityIndicator />
        </View>
      );
    }
    return (
      <View style={{ flex: 1 }}> 
        <StatusBar
          backgroundColor="green"
          barStyle="light-content"
        />
        <View style={styles.barre}>
          <Text style={styles.textDate}>{this.state.data.Date}</Text>
          <Text onPress={this.callApi.bind(this)} style={styles.textRefresh}>Actualiser</Text>
        </View>
        <View style={styles.odd}>
          <Text style={[styles.textLeft, styles.textOdd]}>Fajr</Text>
          <Text style={[styles.textCenter, styles.textOdd]}>{this.state.data.Fajr}</Text>
          <Text style={[styles.textRight, styles.textOdd]}>الفجر</Text>
        </View>
        <View style={styles.even}>
          <Text style={styles.textLeft}>Dohr</Text>
          <Text style={styles.textCenter}>{this.state.data.Dohr}</Text>
          <Text style={styles.textRight}>الظهر</Text>
        </View>
        <View style={styles.odd}>
          <Text style={[styles.textLeft, styles.textOdd]}>Asr</Text>
          <Text style={[styles.textCenter, styles.textOdd]}>{this.state.data.Asr}</Text>
          <Text style={[styles.textRight, styles.textOdd]}>العصر</Text>
        </View>
        <View style={styles.even}>
          <Text style={styles.textLeft}>Maghreb</Text>
          <Text style={styles.textCenter}>{this.state.data.Maghreb}</Text>
          <Text style={styles.textRight}>المغرب</Text>
        </View>
        <View style={styles.odd}>
          <Text style={[styles.textLeft, styles.textOdd]}>Ichaa</Text>
          <Text style={[styles.textCenter, styles.textOdd]}>{this.state.data.Ichaa}</Text>
          <Text style={[styles.textRight, styles.textOdd]}>العشاء</Text>
        </View>
        <View style={styles.even}>
          <Text style={styles.textLeft}>Vendredi</Text>
          <Text style={styles.textCenter}>{this.state.data.Vendredi}*</Text>
          <Text style={styles.textRight}>الجمعة</Text>
        </View>
        <WebView
          source={{ uri: this.state.data.Url + '?v=1.9&os=android&app=com.reactnativeassalat' }}
          style={styles.news}
        />
      </View>
    );
  }
}
const styles = StyleSheet.create({
  barre: { flexDirection: 'row',backgroundColor: '#000' },
  textDate: { flex: 2, color: '#fff', textAlign: 'center' , marginTop: 20},
  textRefresh: { flex: 1, backgroundColor: '#841584', color: '#fff', textAlign: 'center', marginTop: 20 },
  odd: { flexDirection: 'row', backgroundColor: '#29a9bf' },
  textOdd: { color: '#fff' },
  even: { flexDirection: 'row', backgroundColor: '#fff' },
  news: { flexDirection: 'row', backgroundColor: '#f0fbe4' },
  textLeft: { flex: 1, textAlign: 'left', paddingLeft: 10 },
  textRight: { flex: 1, textAlign: 'right', paddingRight: 10 },
  textCenter: { flex: 1, textAlign: 'center' },
});

AppRegistry.registerComponent('Assalate', () => Assalate);