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: