IterationPicker.js

import React, {Component, PropTypes} from 'react';
import {
    Picker,
    Text,
    View,
    TouchableHighlight,
} from 'react-native';
import {styles} from '../styles/css';

export default class IterationPicker extends Component {
    constructor(props) {
        super(props);
        var arrIteration = [];
        for(var iterationCount = 1; iterationCount <32; iterationCount++ ){
            arrIteration.push({value: iterationCount,  text: 'Alle ' + iterationCount})
        }
        this.state = {
            customIterationPeriods: [
                {value: 'day', text: 'Tage'},
                {value: 'week', text: 'Wochen'},
                {value: 'month', text: 'Monate'},
                {value: 'year', text: 'Jahre'}
            ],
            customIterationCounts: arrIteration,
            period: this.props.period,
            count: this.props.count
        };
    }


    onPeriodChange = (period) => {
        this.setState({period: period});
        this.props.getPeriod(period);
    };

    onCountChange = (count) => {
        this.setState({count: count});
        this.props.getCount(count);
    };

    render() {
        return (
            <View style={styles.datePickerContainer}>
                <View style={styles.datePickerHeader}>
                    <TouchableHighlight onPress={() => this.props.resetPeriod()}>
                        <Text>Entfernen</Text>
                    </TouchableHighlight>
                    <Text>Datum</Text>
                    <TouchableHighlight onPress={() => this.props.savePeriod(this.state.period)}>
                        <Text style={styles.datePickerBtnOk}>Fertig</Text>
                    </TouchableHighlight>
                </View>
                <View style={styles.iterationPickerBody}>
                    <Picker
                        style={styles.iterationPickerItem}
                        selectedValue={this.state.count}
                        onValueChange={(count) => this.onCountChange(count)}>
                        {this.state.customIterationCounts.map((item) =>(
                            <Picker.Item label={item.text} value={item.value} key={item.value}/>
                        ))}
                    </Picker>
                    <Picker
                        style={styles.iterationPickerItem}
                        selectedValue={this.state.period}
                        onValueChange={(period) => this.onPeriodChange(period)}>
                        {this.state.customIterationPeriods.map((item) =>(
                            <Picker.Item label={item.text} value={item.value} key={item.value}/>
                        ))}
                    </Picker>
                </View>
            </View>
        );
    }
}

IterationPicker.propTypes = {
  period: PropTypes.object.isRequired,
  count: PropTypes.object.isRequired,
  getPeriod: PropTypes.func.isRequired,
  getCount: PropTypes.func.isRequired,
  savePeriod: PropTypes.func.isRequired,
  resetPeriod: PropTypes.func.isRequired
}