Tracking Upload progress

React Native
2

Hi, I think this is a common issue. Here is a couple of links to threads which might help:

https://forum.codewithmosh.com/t/onuploadprogress-doesnt-work/22629/11

https://forum.codewithmosh.com/t/15-tracking-upload-progress/22286

If you really stuck then the below code works on snack (react-native in the browser) - just add all the dependancies at the bottom when prompted and run it on choosen platform:

App.js

import React, { useState } from "react";
import { Modal, View, StyleSheet, Button, Text } from "react-native";
import * as Progress from "react-native-progress";


const colors = { primary: "#3498db" };

function UploadScreen({ onDone, progress = 0, visible = false }) {
  return (
    <Modal visible={visible} transparent>
      <View style={styles.container}>
        {progress < 1 ? (
          <Progress.Bar
            color={colors.primary}
            progress={progress}
            width={200}
          />
        ) : (
          // Replacing LottieView with a Text message for Snack preview
          <Text style={styles.message}>Upload Complete!</Text>
        )}
      </View>
    </Modal>
  );
}

const styles = StyleSheet.create({
  container: {
    alignItems: "center",
    flex: 1,
    justifyContent: "center",
    backgroundColor: "rgba(0,0,0,0.7)"
  },
  message: {
    color: colors.primary,
    fontSize: 18,
    fontWeight: "bold"
  }
});

export default function App() {
  const [visible, setVisible] = useState(true);
  const [progress, setProgress] = useState(0);

  // Simulate upload progress
  React.useEffect(() => {
    if (progress < 1) {
      const interval = setInterval(() => {
        setProgress((prev) => Math.min(prev + 0.1, 1));
      }, 500);
      return () => clearInterval(interval);
    }
  }, [progress]);

  return (
    <View style={{ flex: 1, justifyContent: "center" }}>
      <Button title="Show Upload Screen" onPress={() => setVisible(true)} />
      <UploadScreen
        visible={visible}
        progress={progress}
        onDone={() => setVisible(false)}
      />
    </View>
  );
}