Как сделать так, чтобы текст следовал за индикатором выполнения

Как мне заставить мой currentProgresstext следовать за индикатором выполнения, сейчас кажется, что установка для ProgressWidth значения 100 приводит к тому, что текст появляется слева (после индикатора выполнения). И текст индикатора выполнения исчезает, когда progressWidth маленький. Мой вопрос: как я могу заставить текст следовать за индикатором выполнения?

Вот мой код

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;
 

Вот как это выглядит сейчас, когда progressWidth из 50

Вот чего я хочу добиться:

Jsfiddle: https://jsfiddle.net/psahmad/fxpmnh15/

🤔 А знаете ли вы, что...
JavaScript поддерживает работу с различными форматами данных, такими как JSON и XML.