More details about this gist: https://www.facebook.com/groups/DevCAmman/permalink/570063666758940/

load-localization-messages.js

import React, { Component } from 'react';
import { IntlProvider, addLocaleData } from 'react-intl';
import en from 'react-intl/locale-data/en'; // add local data for messages like format date,time based on the local format
import ar from 'react-intl/locale-data/ar';
import axios from 'axios'; // to load messages based on the lang from server

addLocaleData(en);
addLocaleData(ar);

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      messages: null,
      isLoading: false,
    };
    this.loadLocale = this.loadLocale.bind(this);
  }

  async componentWillMount() {
    const lang = getUserLocal(); // to get your lang from cookies,server,static for test just pass en or ar
    this.loadLocale(lang)
      .then((res) => {
        this.setState({ messages: res.data });
        this.setState({ isLoading: false });
      })
      .catch(error => null);
  }

  loadLocale(lang) {
    return axios.get(`${yourbasesererlocaldatafolder + lang}.json`);
  }

  render() {
    const lang = getUserLocal();
    const { messages, isLoading } = this.state;
    if (isLoading) return <LoadingComponent pastDelay="10" />; // any loading component you have

    return (
      <IntlProvider
        locale={lang === 'ar' ? `${lang}-jo` : lang}
        messages={messages}
      >
        //your app main routs...
      </IntlProvider>
    );
  }
}

export default App;