Reputation: 774

react-native touchable opacity click issue in IOS 12.02

TouchableOpacity requires us to click two times in IOS 12.2. These issues were not in previous IOS 12.1 version. Whenever clicking on TouchableOpacity it seems to register click but do not fire onPress event. This issue is occuring in react-native version 0.52. This issue only occurs in IOS and not in android.

Code Snippet

 <FlatList
                                scrollEnabled={false}
                                data={this.props.menuData[this.props.toutIndex].Menu}
                                keyExtractor={(data, index) => index}
                                renderItem={({ item , index}) => {
                                    //alert(categoryLinks.menu_id+""+data.menu_id);
                                    //alert(JSON.stringify(data));
                                    return (
                                        <TouchableOpacity onPress={()=>this.itemDetailsPage(item)} > 
                                        <View>
                                        <CardItem  onPress={()=>this.itemDetailsPage(item)} style={[styles.menuSubCategoryCardItem, {marginLeft:0, borderLeftWidth: 6, borderLeftColor: item.itemCount ? '#00CDBE' : '#FFFFFF'}]}>
                                            <View style={{flex:2,marginLeft:"0%"}}>
                                                <View style={styles.menuItemImageOuterContainer}>

                                                    <View style={styles.menuItemImageInnerContainer}>

                                                        <ImageLoad
                                                            style={styles.menuItemImage}
                                                            isShowActivity={false}
                                                            borderRadius={10}
                                                            source={{ uri: item.menu_photo }}
                                                        />

                                                        {item.ratable == 'true' ?
                                                                                <View style={[styles.menuItemRatingImage,{backgroundColor:item.overall_rating==0 ? 'rgb(166,166,166)' : item.rating_color}]}>
                                                                <Text style={styles.menuItemRatingImageText}>{ item.overall_rating>0 ? parseFloat(item.overall_rating).toFixed(this.state.rating_decimal_places) : "-" }</Text>
                                                            </View>
                                                                            :null}
                                                    </View>

                                                    <View style={styles.menuItemNameContainer}>
                                                                        <View style={{width:'100%',}}>

                                                                        <Text numberOfLines={2} style={[styles.textHeadingMenuItem,{fontSize: item.menu_name.length>50 ? 53/3.82 : 63/3.82,paddingLeft:"2%"}]}>
                                                                                {this.Capitalize(item.menu_name)}
                                                                            </Text>

                                                                        </View>
                                                                        <View style={{width:'130%',}}>
                                                            <Text numberOfLines={3} note style={[styles.textMenuItem,{paddingLeft:"2%"}]}>
                                                                {item.menu_description}
                                                            </Text>
                                                                        </View>
                                                        {
                                                            item.friend_review_count > 0 ?
                                                            <View style={{flexDirection:'row',marginLeft:"2%",alignItems:'center'}}>
                                                                <Image style={styles.userIconBelowMenuItemText} source={require("../../../assets/home/blueUser.png")}>
                                                                </Image>
                                                                <Text numberOfLines={1} style={styles.MenuItemFriendsRatedText}>
                                                                    {item.friend_review_count} friends have rated this.
                                                                </Text>
                                                            </View>
                                                            :
                                                            null
                                                        }
                                                    </View>
                                                </View>
                                            </View>
                                            <Right>
                                                  <View style={styles.menuItemPriceOuterContainer}>
                                                      <Text style={[styles.textHeadingMenuItemPrice,{paddingTop:"5%"}]}>
                                                        {this.state.currency} {CommonFunc.numberWithCommas(
                                                                parseInt(item.menu_price)
                                                                    .toFixed(categoryLinks.state.decimal_places)
                                                                )
                                                            }
                                                      </Text>
                                                  </View>
                                                  <View style={styles.menuItemPlusButtonContainer}>
                                                    {  item.itemCount == undefined || item.itemCount == 0?
                                                        <TouchableOpacity style={styles.menuItemPlusButton}
                                                        onPress={() => this.displaySelector(item.menu_price, item.Menu_Options, this.props.toutIndex, null, index, 1)}
                                                        onLongPress={() => this.displaySelector(item.menu_price, item.Menu_Options, this.props.toutIndex, null, index, 1, 1)}
                                                        rejectResponderTermination
                                                        >
                                                            <Image style={[styles.menuItemPlusButtonImage,{resizeMethod:'resize'}]} source={require("../../../assets/order/Add.png")} />
                                                        </TouchableOpacity>
                                                        :
                                                        <View style={styles.menuItemSelectorContainer}>
                                                            <Button transparent onPress={() => this.displaySelector(item.menu_price, item.Menu_Options, this.props.toutIndex, null, index, -1)} style={{paddingVertical:10, paddingLeft:2}}>
                                                                <Image source={require('../../../assets/order/decrease.png')}
                                                              style={[styles.menuItemSelectorDecreaseIcon,{resizeMethod:'resize'}]}/>
                                                            </Button>
                                                            <Button transparent>
                                                                <Text style={styles.menuItemSelectorCountText}>
                                                                    {item.itemCount}
                                                                </Text>
                                                            </Button>
                                                            <Button transparent onPress={() => this.displaySelector(item.menu_price, item.Menu_Options, this.props.toutIndex, null, index, 1)}
                                                            onLongPress={() => this.displaySelector(item.menu_price, item.Menu_Options, this.props.toutIndex, null, index, 1, 1)}
                                                            style={{paddingVertical:10, paddingRight:2}}
                                                            >
                                                                <Image source={require('../../../assets/order/increase.png')}
                                                              style={[styles.menuItemSelectorDecreaseIcon,{resizeMethod:'resize'}]}/>
                                                            </Button>
                                                        </View>
                                                    }
                                                  </View>
                                            </Right>
                                        </CardItem>
                                        </View>
                                        </TouchableOpacity>
                                    );
                                }}
                            />
                        </View>
                    </View>
                }

Upvotes: 2

Answers (4)

Rajendra Prasad Murakonda

Reputation: 11

This, most probably, is a conflict between react components. While updating to latest react might do the trick, but I would advice you to try and remove each and every component and see if it works.

Are you using PanResponder by any chance? This could also create a conflict. Thanks and good luck.

Upvotes: 1

Vinil Prabhu

Reputation: 1289

You have 2 onPress nested functions, in <TouchableOpacity> and <Card>, which both are calling the same item, delete onPress function of <Card> component and it will mostly work

Upvotes: 0

Pradnyanand Milind Pohare

Reputation: 64

Try react-native 0.55.4 its a stable version and i mostely use in my personal projects. and try to wrap your image inside a View like this\

<TouchableOpacity>
     <View>
         <Image />
     </View>
</TouchableOpacity>

Upvotes: 0

Piyush Abhishek Singh

Reputation: 295

use

keyboardShouldPersistTaps='always'

on parent components to the TouchableOpacity inorder for child touchables to persist the taps.

for eg1

<Flatlist keyboardShouldPersistTaps='always'>

 <TouchableOpacity/>

</Flatlist>

eg2:

<TouchableOpacity keyboardShouldPersistTaps='always'>

 <TouchableOpacity></TouchableOpacity>

</TouchableOpacity>

Upvotes: 2

react-native touchable opacity click issue in IOS 12.02

Answers (4)

Related Questions