Edit: it seems that if I comment out the line "this.setState ({logged_in: true));", line 63, I do not get an error. I assume that something about how I am trying to change the content displayed in the rendering function based on whether the user has been registered or not is the cause of this error. Any ideas?
I am a little advanced in understanding some of the very fundamental foundations of React Native, I feel. Although my code may not be very good, it worked until some recent additions. I get an error message in the IOS simulator that reads "Invalid data message - everything should be length: 8". This, unfortunately, does not give me any specific features that I understand, such as underwear.
I sincerely apologize if this is repost, I look like crazy in google and stackoverflow to find a solution to this error, but to no avail in my searches.
I censored the URL that I use in the sample, since it is an address for testing within the company at a very early stage, but I'm 99.99% sure that it’s not where the problem is.
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: 