Error: "Invalid data message - all must be length: 8" - PickerIOS - ios

Question

Edit: it seems that if I comment out the line "this.setState({logged_in: true});", line 63, that I don't get the error. My guess is that something about the way I'm trying to change the content being displayed in the render function based on if the user is logged in or not is what is the cause of this error. Any ideas?
I've been making some slight progress in understanding some very basics of React Native, I feel like. Although my code might not be pretty, up until some recent additions it worked. I'm recieving an error message in the IOS Simulator that reads "Invalid data message - all must be length: 8". It unfortunately isn't giving me any specifics that I understand, such as linenumbers.
I sincerely apologise if this is a repost, I've been looking like crazy on google and stackoverflow to find a solution to this error but have been unsuccessful in my searches.
I've censored the url I've using in fetch since it is an adress for testing within the company in very early stages, but I am 99,99% sure that's not where the problem lies.
My index.ios.js:
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Button,
Alert,
TextInput,
TouchableHighlight,
Image,
AlertIOS,
PickerIOS,
} from 'react-native';
var REASONS = {
sick: {
name: "sjuk"
},
vacation: {
name: "semester"
},
child_care: {
name: "vård av barn"
},
parenting: {
name: "föräldraledig"
},
general: {
name: "övrigt"
},
};
export default class mbab_franvaro extends Component {
constructor(props) {
super(props);
this.state = {username: '', password: '', logged_in: false, reason: 'sjuk'};
}
logout(){
this.setState({logged_in: false});
this.username = ""; this.password = "";
}
login(){
if(this.state.username == "" || this.state.password == ""){
AlertIOS.alert("Fel", "Vänligen fyll i alla fält.");
}
else{
fetch("MY_PRIVATAE_COMPANY_URL", {
method: "POST",
headers: {
'Accept': 'application/x-www-form-urlencoded',
'Content-Type': 'application/x-www-form-urlencoded',
},
body: "username=" + this.state.username + "&password=" + this.state.password,
})
.then((response) => response.json())
.then((response) => {
if(JSON.stringify(response.body).replace(new RegExp('"', 'g'), '').match("Inloggad")){
this.username = this.state.username; this.password = this.state.password;
this.setState({logged_in: true});
//AlertIOS.alert("Hej!", "Välkommen " + this.username + "!");
}
else{
AlertIOS.alert(
"Fel",
JSON.stringify(response.body).replace(new RegExp('"', 'g'), '')
);
}
})
.catch((error) => {
AlertIOS.alert("error", error);
})
.done();
}
}
render(){
if(this.state.logged_in){
//sidan för frånvarorapportering
return (
<View style={styles.container}>
/*<TouchableHighlight style={styles.logout_button} onPress={() => this.logout()}>
<Text style={styles.login_button_text}>Logga ut</Text>
</TouchableHighlight>*/
<View style={styles.report_wrapper}>
<Text style={styles.header}>Frånvarorapportering</Text>
<Text>Ange anledning och hur stor del av dagen du blir frånvarande.</Text>
<PickerIOS
selectedValue={this.state.reason}
onValueChange={(reason) => this.setState({reason})}>
{Object.keys(REASONS).map((reason) => (
<PickerItemIOS
key={reason}
value={reason}
label={REASONS[reason].name}
/>
))}
</PickerIOS>
</View>
</View>
);
}
else{
//inloggningssidan
return (
<View style={styles.container}>
<Image resizeMode="center" style={styles.logo} source={require('./app/res/logo_cmyk.png')} />
<TextInput
placeholder="Namn"
autocorrect={false}
style={styles.text_box}
onChangeText={(username) => this.setState({username})}
/>
<TextInput
placeholder="Lösenord"
autocorrect={false}
secureTextEntry={true}
style={styles.text_box}
onChangeText={(password) => {this.setState({password})}}
/>
<TouchableHighlight style={styles.login_button} onPress={() => this.login()}>
<Text style={styles.login_button_text}>Logga in</Text>
</TouchableHighlight>
</View>
);
}
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F4F4F4',
},
report_wrapper: {
flex: 1,
},
logout_button: {
flex: 0,
flexDirection: "row",
justifyContent: "center",
alignItems: "center",
marginLeft: 10,
marginRight: 10,
marginTop: 30,
marginBottom: 2,
padding: 10,
backgroundColor: "#003878"
},
login_button: {
flex: 0,
flexDirection: "row",
justifyContent: "center",
alignItems: "center",
marginLeft: 10,
marginRight: 10,
marginTop: 2,
marginBottom: 2,
padding: 10,
backgroundColor: "#003878"
},
login_button_text: {
color: "white",
fontSize: 20,
flex: 1,
textAlign: "center",
},
logo: {
//flex: 1,
},
text_box: {
height: 40,
flex: 0,
backgroundColor: "white",
marginLeft: 10,
marginRight: 10,
marginTop: 2,
marginBottom: 2,
padding: 10
},
header: {
color: "#84754E",
fontSize: 25,
marginTop: 30,
},
});
AppRegistry.registerComponent('mbab_franvaro', () => mbab_franvaro);
Edit:

Answer 1

Add toString() to error did the trick for me:
.catch((error) => {
AlertIOS.alert("error", error.toString());
})

Answer 2

I was also getting the same error while using ScrollView.
Took me 2 days to figure out the solution.
I wasn't importing ScrollView from react-native.
Check if you've imported the Picker or not. :)