jasongaare / react-native-walkthrough-tooltip

An inline wrapper for calling out React Native components via tooltip
MIT License
610 stars 182 forks source link

Tooltip image appearing two times when opening tooltip #150

Closed shikhars371 closed 2 years ago

shikhars371 commented 2 years ago

HI please help me, i am using this library to have a popup tool tip meny , i am using touchable opacity and the image tag in which i am using image, when i am clicking the image tooltip is appearing but the image which is clicked appearing two times one in background other above it.

here is my code <Tooltip

                isVisible={visible}
                content={<View style={{ width: width, }} >
                    <View style={{ flexDirection: 'row',  paddingHorizontal:10 }}>
                        <RegularText style={{ fontSize: 18, color: colors.white }}>Recommended Calls</RegularText>
                        <Image
                            resizeMode={'contain'}
                            style={{ width: 20, height: 15, marginRight: 15 }}
                            source={require('../../assets/filter.png')}

                        />
                    </View>
                    <View style={{ backgroundColor:colors.gray, height:0.5,}}></View>
                    <View style={{ flexDirection: 'row',  paddingVertical:5 }}>
                        <RegularText style={{ fontSize: 18, color: colors.white,  }}>Recommended Calls</RegularText>
                        <Image
                            resizeMode={'contain'}
                            style={{ width: 20, height: 15, marginRight: 15 ,  marginLeft:10}}
                            source={require('../../assets/filter.png')}

                        />
                    </View>
                    <View style={{ flexDirection: 'row' ,  paddingVertical:5}}>
                        <RegularText style={{ fontSize: 18, color: colors.white }}>Recommended Calls</RegularText>
                        <Image
                            resizeMode={'contain'}
                            style={{ width: 20, height: 15, marginRight: 15,  marginLeft:10 }}
                            source={require('../../assets/filter.png')}

                        />
                    </View>
                </View>}
                contentStyle={{ backgroundColor: '#161723' }}

                disableShadow={false}
                placement="bottom"
                // below is for the status bar of react navigation bar
                onClose={() => setVisible(false)}
            >
                <View>
                    <TouchableOpacity
                        onPress={() => setVisible(true)}
                    >
                        <Image
                            resizeMode={'contain'}
                            style={{ width: 20, height: 15, marginRight: 15 }}
                            source={require('../../assets/filter.png')}

                        />
                    </TouchableOpacity>
                </View>
    </Tooltip>

1650369804789

shikhars371 commented 2 years ago

my mistake

tarun-showday commented 2 years ago

@shikhars371 How you resolved it? I am also facing the same issue in Android