React native Question posted in
The official React Native documentation can be found here.

React native – 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

enter image description here

Here’s what I want to accomplish:

enter image description here

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

Tags:

4

Answers


  1. 0

    I played around in your fiddle project and achieved the result by adjusting the following classes

            .content {
            padding: 0 20px;
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: flex-end
        }

        .currentProgressText {
            width: 100%;
            color: white;
            font-size: 16px;
            font-weight: bold;
            text-align: right;
        }

    enter image description here

    Login or Signup to reply.
  2. 0

    I only add justify-content: flex-end to .currentProgress and remove width: 100% in .content

    .currentProgress {
  display: flex;
  flex-direction: row;
  height: 60px;
  border-radius: 24px;
  background-color: skyblue;
  align-items: center;
  width: 90%;
  /* progressWidth */
  justify-content: flex-end;
}

.content {
  padding: 0 20px;
}
    Login or Signup to reply.
  3. 0

    I solved it by changing the CSS for .content.

    Before Edit:

    .content {
  padding: 0 20px;
  width: 100%;
}

    After Edit:

    .content {
  margin-left: auto;
  padding: 0 20px;
}

    https://jsfiddle.net/65hc9da3/

    Login or Signup to reply.
  4. 0

    you need to adjust its position relative to the progress bar’s width.
    Always use absolute positioning for the text.
    I have write the code in expo snack you can modify the code.

    Expo Snack Link

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search