React-Native Custom Component doesn't trigger onValueChange, onPress, or onChange

Question

I'm a React-Native newbie, and having an issue using a custom component. The component is a custom time-picker that returns the hour being selected. My issue is that I can't figure out how to correctly update the state with the selected value, because selecting a value doesn't trigger onValueChange, onPress, or onChange events.

Here's where the TimePicker is actually being displayed - I currently have it set to just throw an alert onPress (though I've also tried onValueChange, onPress, and onChange). However, when you select a time, nothing happens:

            <TimePicker onPress={/*(value) => this.setState({shiftStart: this.state.selectedKey})*/() => this.testme() } />
            <TimePicker onValueChange={(value) => this.setState({shiftEnd: value})} style={{marginLeft : 100}}/>

Here is the custom component:

            import React, { Component } from 'react';
            import { View , Image, Text, TouchableHighlight, Animated, ScrollView,
              Easing, Alert} from 'react-native';

            const up_image = require('./up.png');
            const down_image = require('./down.png');

            const all_times = [
                { key : '0', title : '12:00 AM'},
                { key : '1', title : '1:00 AM'},
                { key : '2', title : '2:00 AM'},
                { key : '3', title : '3:00 AM'},
                { key : '4', title : '4:00 AM'},
                { key : '5', title : '5:00 AM'},
                { key : '6', title : '6:00 AM'},
                { key : '7', title : '7:00 AM'},
                { key : '8', title : '8:00 AM'},
                { key : '9', title : '9:00 AM'},
                { key : '10', title : '10:00 AM'},
                { key : '11', title : '11:00 AM'},
                { key : '12', title : '12:00 PM'},
                { key : '13', title : '1:00 PM'},
                { key : '14', title : '2:00 PM'},
                { key : '15', title : '3:00 PM'},
                { key : '16', title : '4:00 PM'},
                { key : '17', title : '5:00 PM'},
                { key : '18', title : '6:00 PM'},
                { key : '19', title : '7:00 PM'},
                { key : '20', title : '8:00 PM'},
                { key : '21', title : '9:00 PM'},
                { key : '22', title : '10:00 PM'},
                { key : '23', title : '11:00 PM'},
            ]
            class TimePicker extends Component {
                constructor(props){
                    super(props);

                    this.state = {
                        selectedKey : '0',
                        scroll_pos : 0,
                    }
                    this.animValue = new Animated.Value(0);

                    this.timeSelected = this.timeSelected.bind(this);

                    this.do_up = this.do_up.bind(this);
                    this.do_down = this.do_down.bind(this);
                }

                animate () {
                    this.animValue.setValue(0);
                    Animated.timing(
                        this.animValue,
                        {
                        toValue: 1,
                        duration: 2000,
                        easing: Easing.linear
                        }
                    ).start((o) => {
                        if(!o.finished)
                            this.animate();
                    })
                }
                do_up(){
                    if(this.state.scroll_pos >= 20)
                        this._scrollview.scrollTo({x : 0, y : this.state.scroll_pos - 20, animated : true});
                }
                do_down(){
                    if(this.state.scroll_pos <= 390)
                        this._scrollview.scrollTo({x : 0, y : this.state.scroll_pos + 20, animated : true});
                }
                get_newTimeStatus(newPos){
                    var tm_st = [];
                    for(var i = 0; i < all_times.length ; i ++){
                        if(all_times[i].key == newPos){
                            for(var j = i; j < i+6;j ++){
                                tm_st.push(all_times[j]);
                            }
                        }
                    }
                    console.log(newPos);
                    return tm_st;
                }

                timeSelected(timeKey){
                    this.setState({
                        ...this.state,
                        selectedKey : timeKey,
                    })
                }
                render() {
                    const marginTop = this.animValue.interpolate({
                        inputRange: [0, 1],
                        outputRange: [0, 23]
                    })
                    return (
                        <View style={{ ...this.props.style, width : 70, height : 180, flexDirection : 'column'}}>
                            <TouchableHighlight 
                                    style={{width : 70, height : 15, alignItems : 'center'}}
                                    onPress = {this.do_up.bind(this)}
                                    underlayColor = 'transparent'
                                >
                                <Image source={up_image} style={{width : 15, height : 15, resizeMode : 'stretch'}}/>
                            </TouchableHighlight>
                            <ScrollView style={{width : 70, 
                                            height : 140, 
                                            marginTop : 5, 
                                            backgroundColor : '#345777', 
                                            flexDirection : 'column'}}
                                        ref = {(ref) => {
                                                this._scrollview = ref;
                                        }}
                                        scrollEventThrottle = {20}
                                        onScroll = {event => {
                                            this.setState({
                                                scroll_pos : event.nativeEvent.contentOffset.y
                                            })
                                        }}
                                        showsHorizontalScrollIndicator={false} >
                                {
                                    all_times.map(item => 
                                        (<View style={{width : 70, 
                                                    height : 23, 
                                                    alignItems : 'center', 
                                                    justifyContent : 'center', 
                                                    borderBottomWidth : 1, 
                                                    borderColor : 'white', 
                                                    backgroundColor : item.key === this.state.selectedKey ? '#47C6CD' : '#345777'}}
                                                 key={item.key}>
                                            <TouchableHighlight
                                            underlayColor = 'transparent'
                                            onPress={() => {this.timeSelected(item.key)}}
                                                >
                                                <Text style={{color : 'white', }}>{item.title}</Text>
                                            </TouchableHighlight>
                                        </View>)
                                    )

                                }

                            </ScrollView>
                            <TouchableHighlight 
                                    style={{width : 70, height : 15,marginTop : 5, alignItems : 'center', justifyContent : 'center'}}
                                    onPress = {this.do_down.bind(this)}
                                    underlayColor = 'transparent'
                                >
                                <Image source={down_image} style={{width : 15, height : 15, resizeMode : 'stretch'}}/>
                            </TouchableHighlight>
                        </View>
                    );
                }
            }

            export default TimePicker;

Answer 1

Try using the function directly inside the prop. For instance, it needs to read:

onPress={(value)=>{
  this.setState({
    ...this.state,
    selectedKey: item.key
  })
}}

There might be an issue with how the prop is running the function.