Android APP

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, {Component} from 'react';
import {AppRegistry, StyleSheet, Alert, Text, View, TextInput, Button} from 'react-native';
import _ from 'lodash';
import CheckBox from 'react-native-checkbox';


export default class Sensors extends Component {
    constructor(props) {
        super(props);

        this.state = {
            list: [],
            url: 'http://septen.pl/json.php',
            emptyList: true,
            changeUrl: false
        };
    }

    componentDidMount() {
        this.interval = setInterval(() => {
            if (this.state.changeUrl) {
                fetch(this.state.url)
                    .then((response) => response.json())
                    .then((responseJson) => {
                        let keys = _.keys(responseJson.data);

                        this.setState({
                            list: _.map(keys, (key, i) => ({
                                ...responseJson.data[key],
                                checked: typeof this.state.list[i] != 'undefined' ? this.state.list[i].checked : true
                            })),
                            emptyList: false
                        });
                    })
                    .catch((error) => {
                        this.setState({
                            list: [],
                            emptyList: true
                        }, () => {
                            clearInterval(this.interval);
                            Alert.alert(
                                'Connection error',
                                'Connection error'
                            )
                        });
                    });
            }
        }, 1000);
    }

    onChange(i) {
        this.state.list[i].checked = !this.state.list[i].checked;
        this.setState({list: this.state.list});
    }

    onChangeText(url) {
        this.state.url = url;
    }

    onClick() {
        this.setState({changeUrl: true});
    }

    render() {
        const {emptyList, list} = this.state;

        let filteredList = _.filter(list, {checked: true});


        return <View style={styles.container2}>
            {emptyList && <TextInput style={{height: 40, borderColor: 'gray', borderWidth: 1}}
                                     label="URL" value={this.state.url}
                                     onChangeText={this.onChangeText.bind(this)}/>}
            {emptyList && <Button onPress={this.onClick.bind(this)}
                                  title="Ustaw url"/>}
            {emptyList && <Text style={styles.empty}>
              Brak sensorów
            </Text>}
            {!emptyList && <Text style={styles.sensors}>
              Sensory
            </Text>}
          <View style={{flexDirection: 'row', flexWrap: 'wrap', marginBottom: 50}}>
              {
                  _.map(list, (elem, i) => <CheckBox label={elem.sensor_name}
                                                     style={{flexGrow: 0}}
                                                     key={i}
                                                     checked={elem.checked}
                                                     onChange={this.onChange.bind(this, i)}/>)
              }
          </View>
            {
                _.map(filteredList, (elem, i) => {
                    let length = elem.measurement.length;
                    let value = elem.measurement[length - 1].measurement_value;

                    return <Text key={i}>{`${elem.sensor_name} wartość: ${value}`}</Text>
                })
            }
        </View>;
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF'
    },
    container2: {
        flex: 1,
        paddingTop: 30,
        alignItems: 'center',
        backgroundColor: '#F5FCFF'
    },
    sensors: {
        fontSize: 30,
        margin: 10
    },
    empty: {
        fontSize: 30,
        margin: 10
    },
    sensor: {
        alignSelf: "flex-start",
        fontSize: 18,
        margin: 10
    }
});


AppRegistry.registerComponent('Sensors', () => Sensors);