Redux, Axios, and Redux Thunk with Expo 37 - react-native

Question

so i am using Redux redux-thunk redux-persist and axios all together here is my setup:
**action.js**
import axios from 'axios';
import * as type from './constants';
export const handleSignup = userDetails => async (dispatch) => {
const {
email, password, username, version,
} = userDetails;
return axios
.post('/users/signup', {
email,
password,
username,
platform: version,
})
.then((res) => {
dispatch({
type: type.USER_SIGNUP_SUCCESS,
payload: res.data,
});
axios.defaults.headers.common.Authorization = `Bearer ${
res.data.access_token
}`;
return res;
});
};
**api.js**
import axios from 'axios';
import configureStore from '../store/configureStore';
const { store } = configureStore();
axios.defaults.baseURL = 'http://baseurl/api/v1';
axios.defaults.headers.common['Content-Type'] = 'application/json';
const accesToken = store.getState().authentication.token;
if (accesToken) {
axios.defaults.headers.common.Authorization = `Bearer ${accesToken}`;
}
axios.defaults.headers.common['Content-Type'] = 'application/json';
axios.interceptors.response.use(
async response => response,
error => Promise.reject(error),
);
**configureStore.js**
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import { composeWithDevTools } from 'redux-devtools-extension';
import { persistStore, persistCombineReducers } from 'redux-persist';
import rootReducer from '../reducers';
import storage from 'redux-persist/lib/storage';
const persistConfig = {
key: 'root',
storage,
blacklist: ['name1', 'name2', 'name3'],
};
const middlewares = [thunk];
const enhancer = composeWithDevTools(applyMiddleware(...middlewares));
const persistedReducer = persistCombineReducers(persistConfig, rootReducer);
export default () => {
const store = createStore(persistedReducer, undefined, enhancer);
const persistor = persistStore(store, null, () => {
store.getState();
});
return { store, persistor };
};
and i got this code inside my reducer for the signup success action
case type.USER_SIGNUP_SUCCESS:
return {
...state,
...action.payload.data.user,
email: action.payload.data.user.email,
username: action.payload.data.user.username,
token: action.payload.data.access_token,
user_id: action.payload.data.user.id,
};
and finally, i am calling handleSignUp on a submit button click:
onSignupClicked = () => {
this.setState({
error: false,
errorMessage: [],
loading: true,
});
const { platform } = Constants;
const version = Object.keys(platform)[0];
const {
user: { email, password, username },
} = this.state;
const { handleSignup, navigation } = this.props;
handleSignup({
email,
password,
username,
version,
})
.then(() => {
this.setState({ loading: true });
navigation.navigate(NAV_INTRO);
})
.catch((err) => {
console.log('ERROR : ',err)
});
};
sorry for a long code, so now my problem is that as soon as the user presses signup i am automatically getting ERROR : Network Error message. it doesn't wait for the request to get completed i guess, but the confusing part for me is this same code works on a previous version of the app with Expo 30.0.0, now its running on Expo 37.0.0. and i have double checked the API no problem with that, my question is is there something wrong with his code? is there a reason for it to return Network Error so fast?
i know this is bulky but any suggestion would be nice, Thanks.
in case its important here are my versions:
"react-redux": "5.0.7",
"redux": "4.0.0",
"redux-devtools-extension": "^2.13.8",
"redux-logger": "3.0.6",
"redux-mock-store": "1.5.3",
"redux-persist": "5.10.0",
"redux-thunk": "2.2.0",