Axios with Auth is not a valid axios instance - react-native

Question

I'm trying to set Authorization headers on an axios post request using axios.create(). I have this in a file and when I try to import the function into my React Native component, I get the following error:
axiosWithAuth.default().post is not a function
below is my code for the function:
import axios from 'axios';
import {AsyncStorage} from 'react-native';
// import AsyncStorage from '#react-native-community/async-storage'
async function axiosWithAuth() {
const token = await AsyncStorage.getItem('userToken');
console.log('token from asyncstorage' , token);
return axios.create({headers : {'Content-Type': null, Authorization : token}})
}
export default axiosWithAuth;
and I'm using the function in the following React Native Component:
import axiosWithAuth from '../utils/axiosWithAuth';
const Recipe = (props) => {
const likeIt = () => {
console.log('like pressed');
console.log('props', props.recipe.id);
setLike(!like);
axiosWithAuth().post(`API_URL`,{})
.then(res => console.log('response from post like: ', res.data))
.catch(err => console.log('error in posting like', err.response))
}
return (
<Text>This is the Recipe Component </Text>
)
}

Answer 1

You used async with axiosWithAuth function. It is returning a Promise, not an instance of axios. You have to write it like this
(await axiosWithAuth()).post(`API_URL`,{})
.then(res => console.log('response from post like: ', res.data))
.catch(err => console.log('error in posting like', err.response))

Answer 2

Below is the code that worked. Create a variable and set it = await axiosWithAuth(). Then do a post request off of the variable. Below is the axiosWithAuth function definition:
import axios from 'axios';
import {AsyncStorage} from 'react-native';
async function axiosWithAuth() {
const userToken = await AsyncStorage.getItem('userToken');
console.log('userToken', userToken);
// return axios.create({headers : {'Content-Type': null, Authorization : userToken}})
return axios.create({headers : {Authorization : userToken}})
}
export default axiosWithAuth;
and below is the code that is using the axiosWithAuth function:
import axiosWithAuth from '../utils/axiosWithAuth';
const likeIt = async () => {
await setLike(!like);
console.log('liked?', like);
const axiosAuth = await axiosWithAuth();
console.log('axiosAuth', axiosAuth);
if (!like) {
axiosAuth.post(`https://url`,{})
.then(res => {
console.log('response from post like: ', res.data.message);
})
.catch(err => console.log('error in posting like', err.response))
} else {
axiosAuth.delete(`https://url`)
.then(res => console.log('res from unlike', res))
.catch(err => console.log('err from deleting like', err))
}
}