Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TypeError: Network request failed(…) #5

Open
gerardus1995 opened this issue Jul 12, 2016 · 1 comment
Open

TypeError: Network request failed(…) #5

gerardus1995 opened this issue Jul 12, 2016 · 1 comment

Comments

@gerardus1995
Copy link

gerardus1995 commented Jul 12, 2016

I've been trying to solve this problem but i got no luck so far. I'm doing almost the same as the examples of documentation. I want my app to get the info of the url im providing. In the console i get the error as the title says "TypeError: Network request failed(…) ".Here is my code for it:

`'use strict';

import React, { Component } from 'react';
import {
StyleSheet,
View,
Text,
DrawerLayoutAndroid,
StatusBar,
Image,
ToastAndroid,
ScrollView
} from 'react-native';

import {
MKProgress,
MKSpinner,
} from 'react-native-material-kit';

var MyToolbar = require('./MyToolbar');
import Button from 'react-native-button';
import Icon from 'react-native-vector-icons/MaterialIcons';
import RNBackbone from 'react-native-backbone';
import fetchStorage from 'react-native-backbone/src/storages/fetch';

const styles2 = StyleSheet.create({
progress: {
width: 370,
height: 4,

},
spinner: {
width: 22,
height: 22,
},
});

class BoatsContent extends Component {
constructor() {
super();
this.state = {
isLoading: true
};

    fetchStorage.globalOptions.headers = {
        "Authorization": "Bearer AUTH_TOKEN"
    };

    var Businesses = RNBackbone.Collection.extend({
        url: 'http://api.example.com',
    });

    var businesses = new Businesses();

    businesses.fetch({
        success: () => {
            console.log(businesses);
            this.setState({isLoading: false});
        },
        error: (model, error) => {
            console.log(error);
            console.log(this.state.isLoading);
            console.log(businesses);
        }
    });
}  

render() {
if (this.state.isLoading) {
return (
<DrawerLayoutAndroid
drawerWidth={300}
drawerPosition={DrawerLayoutAndroid.positions.Left}
renderNavigationView={() => this.props.navigationView}
ref={'DRAWER'}>

        <View style={[styles.row,{ flex: 0.11 } ]}>
            <View style={[styles.container,{ flex: 1 }]}>
                <MyToolbar style={styles.toolbar} title={this.props.title} sidebarRef={()=>this._setDrawer()} openIcon={()=>this.gotoNext()}/>
                <StatusBar backgroundColor='#01A0B4' />
            </View>
        </View>
        <ScrollView>
            <MKProgress.Indeterminate
              style={styles2.progress}
            />
            <Text>Fetching from API, please wait...</Text>
            <View style={[styles.container,{ flex: 1.2, marginTop: 410, marginLeft: 250}]}>             
                <Button
                    containerStyle={{padding:23, height:60, width: 60, overflow:'hidden', borderRadius:100, backgroundColor: '#01BCD4'}}
                    style={{fontSize: 30, color: 'white'}}>
                    <Image pointerEvents="none" source={require('./img/plus_white.png')} />
                </Button>
            </View>
        </ScrollView>
      </DrawerLayoutAndroid>      
    );      

} else {
    return (
      <DrawerLayoutAndroid
        drawerWidth={300}
        drawerPosition={DrawerLayoutAndroid.positions.Left}
        renderNavigationView={() => this.props.navigationView}
        ref={'DRAWER'}> 

        <View style={[styles.row,{ flex: 0.11 } ]}>
            <View style={[styles.container,{ flex: 1 }]}>
                <MyToolbar style={styles.toolbar} title={this.props.title} sidebarRef={()=>this._setDrawer()} openIcon={()=>this.gotoNext()}/>
                <StatusBar backgroundColor='#01A0B4' />
            </View>
        </View>
        <ScrollView>
            <Text>Successfully fetched {this.business.length} models from REST api</Text>
            <View style={[styles.container,{ flex: 1.2, marginBottom: 20, marginRight:20}]}>                
                <Button
                    containerStyle={{padding:23, height:60, width: 60, overflow:'hidden', borderRadius:100, backgroundColor: '#01BCD4'}}
                    style={{fontSize: 30, color: 'white'}}>
                    <Image pointerEvents="none" source={require('./img/plus_white.png')} />
                </Button>
            </View>
        </ScrollView>
      </DrawerLayoutAndroid>      
    );
}

}

_setDrawer() {
this.refs['DRAWER'].openDrawer();
}

}

const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
},
toolbar: {
height: 56,
backgroundColor: '#01BCD4',
width: 370,
alignItems: 'center'
},
fab: {
width: 60,
height: 60,
borderRadius: 100,
borderColor: '#01BCD4',
backgroundColor: '#01BCD4',
marginLeft: 285,
marginTop: 410,
},
});

module.exports = BoatsContent;`

@peter4k
Copy link
Owner

peter4k commented Dec 5, 2016

Please make sure the URL you are using is valid. Also make sure you change "Authorization": "Bearer AUTH_TOKEN" header to the Bearer token

@peter4k peter4k closed this as completed Dec 5, 2016
@peter4k peter4k reopened this Dec 5, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants