Extracting Token from Django AuthTokenSerializer with React native - django

Question

I am trying to extract a authorization token from the restframework of Django authtoken and can't seem to get the response token from the request. By using Postman I get the token with status 200. But when I try to do this with Fetch in my code I get status 200 a different response. Response from POST request
From the server's perspective I get the POST request with 200 response.I believe it's just formatting of the response but I can't seem to figure out how.
Below is the code for my Login Form.
import React from 'react';
import {View,Text, TextInput, TouchableOpacity, StyleSheet} from 'react-native';
import {createStackNavigator} from 'react-navigation';
const fetch_url = 'http://192.168.0.17:8000/api/api-auth/';
export default class LoginForm extends React.Component {
constructor(props){
super(props);
this.loginHTTPRequest = this.loginHTTPRequest.bind(this);
this.state = {
username: '',
password:'',
respons:'',
error:null,
loading: false,
}
}
loginHTTPRequest(){
if(this.state.username != '' && this.state.password != ''){
this.setState({
loading:true,
});
fetch(fetch_url,{
method:'POST',
headers:{
Accept:'application/json',
'Content-Type':'application/json',
},
body: JSON.stringify({
username:'admin',
password:'admin12345',
}),
})
.then((response)=>{
if (response.status >= 200 && response.status < 300) {
//Where I want to extract the token from the response
console.log(response);
}})
.catch((error) => {
this.setState({
error:error,
loading:false,
});
});
}
}
render(){
return (
<View style={styles.container}>
<TextInput
style={styles.input}
autoCapitalize = 'none'
autoCorrect={false}
returnKeyType='next'
placeholder = 'Username'
onChangeText={(text)=> this.setState({username:text})}
/>
<TextInput
style={styles.input}
autoCapitalize = 'none'
autoCorrect={false}
returnKeyType='go'
placeholder = 'Password'
secureTextEntry
onChangeText={(text)=> this.setState({password:text})}
/>
<TouchableOpacity
style={styles.buttonContainer}
onPress={this.loginHTTPRequest}
>
<Text
style={styles.buttonText}
>
LOGIN
</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
padding: 10,
},
input: {
height:60,
backgroundColor: '#d1d1d1',
color: 'black',
marginBottom: 10,
padding: 10,
},
buttonContainer:{
backgroundColor:'#F9CF00',
paddingVertical: 15,
},
buttonText:{
color: 'black',
textAlign: 'center',
fontWeight: '700',
marginBottom:20,
}
});