added possibility to hook thumb creation

[vaukalak]

Hey, this fix make thumb creation much more flexible, by adding possibility to provide custom views as thums

<Slider
          ....
          createThumbMiddleware={view => (
            <ToolTip
              visible={toolTipVisible}
              text="SOME TEXT"
            >
              {view}
            </ToolTip>
          )}
        />

[jariwalabhavesh]

@vaukalak:
I had used createTumbMiddleware that you provided but i am facing css related issue in andorid.

In IOS it is look like perfect

But in ANDROID it is look like (bar is covering thumb)

Here is code and css:

<View style={styles.sliderSectionContainer}>
    <View style={[styles.prepostLabelContainer, styles.prefixLabel]}>
        <Text style={styles.title}>{MIN}</Text>
    </View>
    <View style={styles.sliderContainer}>
        <Slider createThumbMiddleware={view=>(
            <View style={styles.legendContainer}>
                <Text style={styles.title}>{answer}</Text>
                {view}
            </View>
            )} minimumValue={MIN} maximumValue={MAX} step={STEPS} thumbTintColor={ACCENT_BACKGROUND_COLOR} minimumTrackTintColor={FORM_GROUP_BACKGROUND_COLOR} maximumTrackTintColor={FORM_GROUP_BACKGROUND_COLOR} trackStyle={styles.trackStyle} thumbStyle={styles.thumbStyle}
            value={answer} onValueChange={(value) => onValueChange(value)} onSlidingComplete={(value) => onChangeComplete(value, data)} />
    </View>
    <View style={[styles.prepostLabelContainer, styles.postfixLabel]}>
        <Text style={styles.title}>{MAX}</Text>
    </View>
</View>

const styles = StyleSheet.create({
    title: {
        color: TEXT_COLOR,
        fontSize: TITLE_SIZE,
        fontWeight: 'bold',
    },
    trackStyle: {
        height: 7,
        borderRadius: 5,
    },
    thumbStyle: {
        width: 24,
        height: 24,
        borderRadius: 24 / 2
    },
    sliderSectionContainer: {
        flex: 1,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center'
    },
    prepostLabelContainer: {
        flex: 0.5
    },
    prefixLabel: {
        alignItems: 'flex-end',
        marginRight: 10
    },
    postfixLabel: {
        marginLeft: 10
    },
    sliderContainer: {
        flex: 4
    },
    legendContainer: {
        alignItems: 'center'
    }
})

Any idea why it is happening in android?

[markwongsoontorn]

Looks great, Please merge this 👍

[dayvidwhy]

Hey there 👋

We're interested in this code as well, is there any way it can get merged since it's already approved?

[damikdk]

Sorry, any update here, guys?