Is there a way to align my currentProgresstext with the progress bar? Currently, when I set progressWidth to 100, the text appears on the left side of the progress bar. Additionally, the progress bar's text disappears when progressWidth is small. How can I ensure that the text follows the progress bar?
Below is the code snippet:
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>
...............
// Rest of the code remains the same.
This is how it currently looks with a progressWidth of 50:
https://i.sstatic.net/eepJZ6vI.png
This is what I aim to achieve:
https://i.sstatic.net/0k2YdjAC.png
Jsfiddle: https://jsfiddle.net/psahmad/fxpmnh15/