How to make text follow progress bar

How can I make my currentProgresstext follow the progress bar, for now it seems that setting progressWidth to 100 makes the text appear on the left (following the progress bar). And the progress bar’s text dissapears when the progressWidth is small. My question is how can I make the text follow the progress bar?

Here’s my code

import { Text, View, StyleSheet } from 'react-native';
import React, {useState} from 'react';
import { responsiveWidth } from 'react-native-responsive-dimensions';
import { Feather } from '@expo/vector-icons';

type Props = { containerStyle?: object };

const CartStatusOverlay: React.FC<Props> = (): JSX.Element => {
    const minTotalOrderQuantity = 18;
    const maxTotalOrderQuantity = 20;

    const width = responsiveWidth(90);

    // Max would be 90
    const [progressWidth, setProgressWidth] = useState(10);

    const convertKgToPercentage = (kg: number) => {
        return kg / maxTotalOrderQuantity * 100;
    }

    return (
        <View
            style={[
                styles.overlay,
                { width: width },
            ]} >
            <View style={styles.currentProgress}>
                <View style={[styles.content, {width: `${progressWidth}%`}]}>
                    {/*<Feather name="shopping-cart" size={24} color="white" />*/}
                    <Text style={styles.currentProgressText}>6 Kg</Text>
                </View>
            </View>
            {/*<View style={styles.line}>*/}
            {/*    <Text style={styles.lineText}>18 Kg</Text>*/}
            {/*</View>*/}
            {/*<View style={styles.separator}><Text></Text></View>*/}
            {/*<View style={styles.rightContainer}>*/}
            {/*</View>*/}
        </View>
    );
};

const styles = StyleSheet.create({
    overlay: {
        flexDirection: 'row',
        height: 60,
        borderRadius: 24,
        backgroundColor: '#cfebf7',
        // justifyContent: 'space-between',
        alignItems: 'center',
    },
    content: {
        paddingHorizontal: 20
    },
    currentProgress: {
        flexDirection: 'row',
        height: 60,
        borderRadius: 24,
        backgroundColor: 'skyblue',
        // justifyContent: 'space-between',
        alignItems: 'center',
    },
    currentProgressText: {
      width: "100%",
      backgroundColor: "red",
      color: "white",
      fontSize: 16,
      // flex: 1,
      fontWeight: "bold",
      textAlign: "right",
      alignSelf: "flex-end"
    },
    line: {
        padding: 0,
        borderLeftWidth: 1,
        height: "100%",
        position: "absolute",
        borderLeftColor: "black",
    },
    lineText: {
        alignItems: "center"
    },
    rightContainer: {
        width: '30%',
        flex: 1,
        marginLeft: 4,
    },
});

export default CartStatusOverlay;
 

Here’s how it look like currently with progressWidth of 50

Here’s what I want to accomplish: