peter4k / react-native-backbone

A react native version of backbone model
66 stars 18 forks source link

TypeError: Network request failed(…) #5

Open gerardus1995 opened 8 years ago

gerardus1995 commented 8 years ago

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 commented 7 years ago

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