oblador/react-native-shimmer

Shimmer animation stops when button clicked (Android).

kckunal2612 opened this issue · 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. 👍

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

@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.