I want to add progress bar to switch from one screen to another

Question

I am working on a react app. It has simple auth features. The problem is that after a user sign's up, they are forced to wait 6-9 seconds before the landing page loads.

For that reason, I want to add a progress bar as a popup after the user clicks on the SIGN-UP button to notify the user that the page is loading.

 const handlePress = () => {
if (!firstName) {
  Alert.alert("First Name is required");
} else if (!phone) {
  Alert.alert("Phone Number is required.");
} else if (!email) {
  Alert.alert("Email Field is required.");
} else if (!password) {
  Alert.alert("Password Field is required.");
} else {
  registration(email, password, phone, firstName);
  navigation.navigate("Welcome");
  emptyState();
}
  };

<TouchableOpacity style={styles.button} onPress={handlePress}>
      <Text style={{ fontWeight: "bold", color: "#fff", fontSize: 18 }}>
        {" "}
        Sign Up
      </Text>
    </TouchableOpacity>

Someone Help. Relatively new to react and JS.

Answer 1

If you want a progress bar, then registration function will need some modification. It will need an additional parameter onProgress . You will also need keep track of the percentage of completion and update this percentage whenever a milestone is reached:

function registration(email, password, phone, firstName, onProgress){
  let progress = 0;
  const updateProgress = newVal=>{
    progress+=newVal;
    onProgress(progress)
  }
  // when a milestone is reached call updateProgress e.g

  // connected to auth service
  updateProgress(0.2);
  // verified user email doesnt exist
  updateProgress(0.1)
  // createdNewUser
  updateProgress(0.7)
  */
}

Now you want to create a progress variable and choose your progress bar component

import * as Progress from 'react-native-progress';

export default function App({navigation}){
  const [ progress, setProgress ] = useState(0);
  const [ isLoading, setIsLoading ] = useState(false);
  const handlePress = () => {
    if (!firstName) {
      Alert.alert("First Name is required");
    } else if (!phone) {
      Alert.alert("Phone Number is required.");
    } else if (!email) {
      Alert.alert("Email Field is required.");
    } else if (!password) {
      Alert.alert("Password Field is required.");
    } else {
      setIsLoading(true);
      registration(email, password, phone, firstName, setProgress).
        then(()=>{
          setIsLoading(false)
        })
      navigation.navigate("Welcome");
      emptyState();
    }
  };

  return(
    <TouchableOpacity style={styles.button} onPress={handlePress}>
      <Text style={{ fontWeight: "bold", color: "#fff", fontSize: 18 }}>
        {" "}
        Sign Up
      </Text>
      {isLoading && <Progress.Bar progress={progress} />}
    </TouchableOpacity>
  )

Try it out here