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;`
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
};
render() {
if (this.state.isLoading) {
return (
<DrawerLayoutAndroid
drawerWidth={300}
drawerPosition={DrawerLayoutAndroid.positions.Left}
renderNavigationView={() => this.props.navigationView}
ref={'DRAWER'}>
}
_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;`