react-native-shimmer icon indicating copy to clipboard operation
react-native-shimmer copied to clipboard

Shimmer animation stops when button clicked (Android).

Open kckunal2612 opened this issue 7 years ago • 2 comments

Hi. I am using this library to create a shimmering effect for 2 Texts indicating left and right arrows as shown in the screenshot below.

shimmer buttons

The problem is, when the user is clicking on either of the 2 circular buttons (red or green), the shimmer animation on the >>> and the <<< arrows stops. And this is only happening on Android Devices.

Here is the code that I am using for the left red circular icon -

 <SlideButton
                                    onSlideSuccess={this.props.dismissReminder}
                                    slideDirection={SlideDirection.RIGHT}
                                    width={100}
                                    height={50}>
                                    <View style={{flexDirection: 'row', alignItems: 'center'}}>
                                        <View>
                                            <TouchableOpacity onPress={this.props.dismissReminder} style={{
                                                height: 80,
                                                width: 80,
                                                borderRadius: 40,
                                                backgroundColor: 'red',
                                                justifyContent: 'center',
                                                alignItems: 'center'
                                            }}>
                                                <Text style={{fontSize: 50, fontWeight: '400', color: '#fff'}}>X</Text>
                                            </TouchableOpacity>
                                        </View>
                                        <View style={{alignSelf: 'flex-start', paddingTop: 5}}>
                                            <Shimmer direction="right">
                                                <Text
                                                    style={styles.dismissArrow}>
                                                    {'> > > >'}
                                                </Text>
                                            </Shimmer>
                                        </View>
                                    </View>
                                </SlideButton>

Kindly look into this issue and share your inputs. Thanks ! Love the library btw. :+1:

kckunal2612 avatar Dec 13 '17 06:12 kckunal2612

Dont use touchable opacity use without feedback see if it still persist.

j-mendez avatar Feb 14 '18 19:02 j-mendez

@jeffreymendez1993 sadly that's not working. It makes the Red Circle disappear (with only the White Cross remaining), but doesn't affect the shimmer animation at all.

kunalqss avatar Apr 24 '18 04:04 kunalqss