title: Extracting Token from Django AuthTokenSerializer with React native
body: <p>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. <a href="https://i.stack.imgur.com/oNQQg.png" rel="nofollow noreferrer">Response from POST request</a></p>
  
  <p>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.</p>
  
  <p>Below is the code for my Login Form.</p>
  
  <pre><code>    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 != '' &amp;&amp; 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)=&gt;{
          if (response.status &gt;= 200 &amp;&amp; response.status &lt; 300) {
            //Where I want to extract the token from the response
  
            console.log(response);
  
          }})
          .catch((error) =&gt; {
            this.setState({
              error:error,
              loading:false,
            });
          });
         }
      }
  
    render(){
  
      return (
        &lt;View style={styles.container}&gt;
  
          &lt;TextInput
            style={styles.input}
            autoCapitalize = 'none'
            autoCorrect={false}
            returnKeyType='next'
            placeholder = 'Username'
            onChangeText={(text)=&gt; this.setState({username:text})}
          /&gt;
          &lt;TextInput
            style={styles.input}
            autoCapitalize = 'none'
            autoCorrect={false}
            returnKeyType='go'
            placeholder = 'Password'
            secureTextEntry
            onChangeText={(text)=&gt; this.setState({password:text})}
          /&gt;
          &lt;TouchableOpacity
            style={styles.buttonContainer}
            onPress={this.loginHTTPRequest}
          &gt;
            &lt;Text
              style={styles.buttonText}
            &gt;
              LOGIN
            &lt;/Text&gt;
  
          &lt;/TouchableOpacity&gt;
        &lt;/View&gt;
      );
    }
  }
  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,
    }
  
  });
  </code></pre>