title: React native android connect backend service at localhost
body: <p>I have a register service which is handled by Nodejs. This service is working on 3001 port. I try to connect this service from React Native application. But always returns </p>
  
  <blockquote>
    <p>ReactNativeJS: [TypeError: Network request failed]</p>
  </blockquote>
  
  <p>My component and package.json code is below. Also, I replaced URL localhost to 127.0.0.1 and it does not work. Backend service is working properly when I test it from Postman. Gives very common exception Network Error, so it is very hard to understand the root of the problem. Every React Native development starter can easily face with this problem. So problem caused from React Native or Android? </p>
  
  <pre><code>import React, { Component } from 'react';
  import {
      TextInput,
      ScrollView,
      Alert,
      TouchableHighlight,
      Text,
      StyleSheet
  } from 'react-native';
  
  export default class Register extends Component {
      constructor(props) {
          super(props);
          this.onPress = this.onPress.bind(this);
      }
  
  componentDidMount() {
      this.state = {
          email: '',
          password: '',
          passwordRepetition: '',
          error: '',
          loading: false
      };
  }
  
  onPress() {
      fetch('http://127.0.0.1:3001/user/register', {
          method: 'POST',
          headers: {
              Accept: 'application/json',
              'Content-Type': 'application/json',
          },
          body: JSON.stringify({
              email: this.state.email,
              password: this.state.password,
          }),
      }).then(res =&gt; {
          console.log(res);
      })
          .catch(err =&gt; {
              console.log(err);
          });
  }
  
  render() {
      return (
          &lt;ScrollView&gt;
              &lt;TextInput
                  style={{ height: 40 }}
                  placeholder="type@email.com"
                  onChangeText={email =&gt; this.setState({ email })}
              /&gt;
              &lt;TextInput
                  style={{ height: 40 }}
                  placeholder="veryhardpassword"
                  secureTextEntry
                  onChangeText={password =&gt; this.setState({ password })}
              /&gt;
              &lt;TextInput
                  style={{ height: 40 }}
                  placeholder="repetition of password"
                  secureTextEntry
                  onChangeText={passwordRepetition =&gt;
                      this.setState({ passwordRepetition })
                  }
              /&gt;
              &lt;TouchableHighlight style={styles.button} onPress={this.onPress}&gt;
                  &lt;Text&gt; Touch Here &lt;/Text&gt;
              &lt;/TouchableHighlight&gt;
          &lt;/ScrollView&gt;
      );
  }
  }
  
  const styles = StyleSheet.create({
      container: {
          flex: 1,
          justifyContent: 'center',
          paddingHorizontal: 10
      },
      button: {
          alignItems: 'center',
          backgroundColor: '#DDDDDD',
          padding: 10
      },
      countContainer: {
          alignItems: 'center',
          padding: 10
      },
      countText: {
          color: '#FF00FF'
      }
  });
  </code></pre>
  
  <p>Package.json</p>
  
  <pre><code>{
    "name": "mobile",
    "version": "0.0.1",
    "private": true,
    "scripts": {
      "start": "node node_modules/react-native/local-cli/cli.js start",
      "test": "jest"
    },
    "dependencies": {
      "react": "16.3.0-alpha.1",
      "react-native": "^0.54.0"
    },
    "devDependencies": {
      "babel-jest": "22.4.1",
      "babel-preset-react-native": "4.0.0",
      "eslint": "^4.18.2",
      "eslint-plugin-react": "^7.7.0",
      "jest": "22.4.2",
      "react-test-renderer": "16.3.0-alpha.1"
    },
    "jest": {
      "preset": "react-native"
    }
  }
  </code></pre>