We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
VERSION node: v8.13.0 "react": "16.8.6", "react-native": "0.60.4", "rn-swipe-button": "^1.3.6",
Describe the bug After swiping for a few times, the railFillBackgroundColor is disappeared. (On both iOS and Android)
Video https://user-images.githubusercontent.com/53001193/180167681-bc77b630-6a24-4230-8eeb-a7128f3b2203.mov
Expected behavior Always show the railFillBackgroundColor
CODE
const handleSwipeSuccess = () => { setIsStarted((prev) => !prev); };
renderThumbComponent function will return:
// // <View style={s.thumbComponent}> // <Image // style={s.thumbComponentIcon} // source={IMAGE.ICON_RIGHT_ARROW_X2} // /> // </View>
<SwipeButton height={verticalScale(60)} width={"90%"} title={isStarted ? "End" : "Start"} titleStyles={styles.sliderTitle} railBackgroundColor={themes.SWIPE_BACKGROUND_COLOR} railBorderColor={themes.VIOLET_COLOR} railFillBorderColor={themes.VIOLET_COLOR} railFillBackgroundColor={themes.VIOLET_COLOR} thumbIconComponent={renderThumbComponent} thumbIconBorderColor={themes.VIOLET_COLOR} thumbIconBackgroundColor={themes.VIOLET_COLOR} onSwipeSuccess={handleSwipeSuccess} screenReaderEnabled={true} shouldResetAfterSuccess={true} resetAfterSuccessAnimDelay={50} //50ms resetAfterSuccessAnimDuration={50} //50ms swipeSuccessThreshold={80} //Swiping 80% will be considered as successful swipe />
STYLES: sliderTitle: { fontFamily: themeConstants.FontFamily.montserrat, fontWeight: themeConstants.FontWeight.w600, lineHeight: fontSizeScale(32), fontSize: fontSizeScale(24), color: themes.VIOLET_COLOR, }
thumbComponent: { backgroundColor: themes.VIOLET_COLOR, borderRadius: Math.round(Dimensions.get("window").width + Dimensions.get("window").height) / 2, //create a circle margin: verticalScale(10), }
thumbComponentIcon: { width: verticalScale(29), height: verticalScale(29), }
The text was updated successfully, but these errors were encountered:
I fixed it.
Comment some code in the ./src/components/SwipeThumb/index.js
Sorry, something went wrong.
Thanks @tytn9197
No branches or pull requests
VERSION
node: v8.13.0
"react": "16.8.6",
"react-native": "0.60.4",
"rn-swipe-button": "^1.3.6",
Describe the bug
After swiping for a few times, the railFillBackgroundColor is disappeared. (On both iOS and Android)
Video
https://user-images.githubusercontent.com/53001193/180167681-bc77b630-6a24-4230-8eeb-a7128f3b2203.mov
Expected behavior
Always show the railFillBackgroundColor
CODE
const handleSwipeSuccess = () => {
setIsStarted((prev) => !prev);
};
renderThumbComponent function will return:
<SwipeButton
height={verticalScale(60)}
width={"90%"}
title={isStarted ? "End" : "Start"}
titleStyles={styles.sliderTitle}
railBackgroundColor={themes.SWIPE_BACKGROUND_COLOR}
railBorderColor={themes.VIOLET_COLOR}
railFillBorderColor={themes.VIOLET_COLOR}
railFillBackgroundColor={themes.VIOLET_COLOR}
thumbIconComponent={renderThumbComponent}
thumbIconBorderColor={themes.VIOLET_COLOR}
thumbIconBackgroundColor={themes.VIOLET_COLOR}
onSwipeSuccess={handleSwipeSuccess}
screenReaderEnabled={true}
shouldResetAfterSuccess={true}
resetAfterSuccessAnimDelay={50} //50ms
resetAfterSuccessAnimDuration={50} //50ms
swipeSuccessThreshold={80} //Swiping 80% will be considered as successful swipe
/>
STYLES:
sliderTitle: {
fontFamily: themeConstants.FontFamily.montserrat,
fontWeight: themeConstants.FontWeight.w600,
lineHeight: fontSizeScale(32),
fontSize: fontSizeScale(24),
color: themes.VIOLET_COLOR,
}
thumbComponent: {
backgroundColor: themes.VIOLET_COLOR,
borderRadius:
Math.round(Dimensions.get("window").width + Dimensions.get("window").height) / 2, //create a circle
margin: verticalScale(10),
}
thumbComponentIcon: {
width: verticalScale(29),
height: verticalScale(29),
}
The text was updated successfully, but these errors were encountered: