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.
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