TouchableHighlight inside a list Item, inside ListView does not heightlight

801 views Asked by At

Every list item has 2 buttons:

enter image description here

buttons worked when not inside a listView. but, when inside a list item inside a list view, they do not highlight, is there something I'm missing?

List view:

return (
            <ListView
                enableEmptySections={true}
                dataSource={this.props.scheduledTasks}
                renderRow={(scheduledTask) => (
                <ScheduledTaskCellMobile
                imageSource={scheduledTask.imageSrc}
                title={scheduledTask.title}
                 subtitle={moment(scheduledTask.date).format("HH:mm")}/>
                )
                }
            />
        );

ListItem:

return (
            <View style={this.styles.cell}>
                <View className="leftContainer" style={this.styles.alignedLeftContainer} >
                    <Image source={imageSource} style={this.styles.image} />
                    <View style={this.styles.textsContainer}>
                        <TextTitleCellMobile>
                            {title}
                        </TextTitleCellMobile>
                        <TextSubtitleCellMobile>
                            {subtitle}
                        </TextSubtitleCellMobile>
                    </View>
                </View>
                <View style={this.styles.alignedRightContainer}>
                    <RoundButton style={this.styles.roundButtons} />
                    <RoundButton style={this.styles.roundButtons} />
                </View>
            </View>
        )

RoundButton:

return (
                <View style={this.props.style}>
                    <TouchableHighlight onPress={this.props.onPress} style={{borderRadius: 4}}>
                        <View style={this.style.view}>
                            <Image style={this.style.image} source={soundImage}/>
                        </View>
                    </TouchableHighlight>
                </View>
        )
2

There are 2 answers

0
MCMatan On

Turns out if I do not pass "onPress" it does not highlight.

0
Pir Shukarullah Shah On

You are missing onPress, that's why your component is not highlighting.