Open Marcoo09 opened 3 years ago
In the first render for some reason the renderRailsSelected is rendered as shown in the video
https://user-images.githubusercontent.com/18408823/133338411-d870b06c-decb-4647-aacb-d10a21d35d85.mov
Code:
Main Code
<RangeSlider min={0} max={5} step={1} floatingLabel disableRange renderThumb={renderThumb} renderRail={renderRail} renderRailSelected={renderRailSelected} renderLabel={renderLabel} renderNotch={renderNotch} onValueChanged={() => {}} /> Render Methods:
<RangeSlider min={0} max={5} step={1} floatingLabel disableRange renderThumb={renderThumb} renderRail={renderRail} renderRailSelected={renderRailSelected} renderLabel={renderLabel} renderNotch={renderNotch} onValueChanged={() => {}} />
const renderThumb = useCallback( () => ( <View style={{ width: THUMB_RADIUS * 2, height: THUMB_RADIUS * 2, borderRadius: THUMB_RADIUS, borderWidth: 3, borderColor: thumbBorderColor, backgroundColor: thumbBackgroundColor, shadowColor: thumbBorderColor, shadowOffset: {width: 1, height: -1}, shadowOpacity: 1, shadowRadius: 10, }} /> ), [thumbBorderColor, thumbBackgroundColor], );
const renderRail = useCallback( () => ( <View style={{ flex: 1, height: 10, borderRadius: 4, backgroundColor: railBackgroundColor, }} /> ), [railBackgroundColor], );
const renderRailSelected = useCallback( () => ( <View style={{ height: 10, backgroundColor: railSelectedColor, borderRadius: 4, }} /> ), [railSelectedColor], );
`const renderLabel = useCallback( () => ( <View style={{ alignItems: 'center', padding: 12, backgroundColor: railSelectedColor, borderRadius: 6, }}>
</View> ), [label, railSelectedColor],
);`
const renderNotch = useCallback( () => ( <View style={{ width: 16, height: 16, borderLeftColor: 'transparent', borderRightColor: 'transparent', borderTopColor: notchBackgroundColor, borderLeftWidth: 4, borderRightWidth: 4, borderTopWidth: 8, }} /> ), [notchBackgroundColor], );
I have the same issue. I tried Marcoo09 pull request but that didn't solve this problem. Still first render do not work correctly when disableRange is true.
In the first render for some reason the renderRailsSelected is rendered as shown in the video
https://user-images.githubusercontent.com/18408823/133338411-d870b06c-decb-4647-aacb-d10a21d35d85.mov
Code:
Main Code
<RangeSlider min={0} max={5} step={1} floatingLabel disableRange renderThumb={renderThumb} renderRail={renderRail} renderRailSelected={renderRailSelected} renderLabel={renderLabel} renderNotch={renderNotch} onValueChanged={() => {}} />
Render Methods:const renderThumb = useCallback( () => ( <View style={{ width: THUMB_RADIUS * 2, height: THUMB_RADIUS * 2, borderRadius: THUMB_RADIUS, borderWidth: 3, borderColor: thumbBorderColor, backgroundColor: thumbBackgroundColor, shadowColor: thumbBorderColor, shadowOffset: {width: 1, height: -1}, shadowOpacity: 1, shadowRadius: 10, }} /> ), [thumbBorderColor, thumbBackgroundColor], );
const renderRail = useCallback( () => ( <View style={{ flex: 1, height: 10, borderRadius: 4, backgroundColor: railBackgroundColor, }} /> ), [railBackgroundColor], );
const renderRailSelected = useCallback( () => ( <View style={{ height: 10, backgroundColor: railSelectedColor, borderRadius: 4, }} /> ), [railSelectedColor], );
`const renderLabel = useCallback( () => ( <View style={{ alignItems: 'center', padding: 12, backgroundColor: railSelectedColor, borderRadius: 6, }}>
);`
const renderNotch = useCallback( () => ( <View style={{ width: 16, height: 16, borderLeftColor: 'transparent', borderRightColor: 'transparent', borderTopColor: notchBackgroundColor, borderLeftWidth: 4, borderRightWidth: 4, borderTopWidth: 8, }} /> ), [notchBackgroundColor], );