I am trying to design a slider component in React Native with the following (minimal example) code:

import React from 'react'
import {GestureResponderEvent, View} from 'react-native'

const Slider = (): JSX.Element => {
    const [value, setValue] = React.useState()

    const onTouch = React.useCallback(
        (e: GestureResponderEvent) => setValue(e.nativeEvent.locationX),
        [setValue],
    )

    return (
        <View key="base" style={{flex: 1, flexDirection: 'row'}} onTouchStart={onTouch} onTouchMove={onTouch}>
            <View key="track" style={{width: value, backgroundColor: 'white'}}/>
            <View key="toggle" style={{width: 16, height: 16, borderRadius: 16 / 2, backgroundColor: 'red'}}/>
        </View>
    )
}

I am having issues because the following code works fine if I touch the track View, but not if I touch the toggle View.

This seems to be due to the fact e.nativeEvent.locationX is a relative number inside the toggle view, not the base view.

Any suggestions?

EDIT: I can get the absolute position of the touch events using the e.nativeEvent.pageX and e.nativeEvent.pageY properties, but how can I get the absolute position of the base view? The onLayout callback only gives me the relative one ...