Android RangeSlider first render do not work correctly

[Marcoo09]

trafficstars

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, }}> <Text> {label} </Text> </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], );

[SusulAdam]

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.