I have a loading component (shown while fetching data for example), thats supposed to not immediately start and stop at a specified amount of time. Then a popup will be shown saying "something went wrong" and redirect to the Home screen will happen.

Its all working and I would just be happy for some code review. Im not sure if I should have the logic for when the popup is opening for example in the <Loading /> component or in the <SomethingWentWrong />.

const Loading = ({text, size, loadingTime}) => {
    const navigation = useNavigation();
    const [loading, setLoading] = useState(false);
    const [redirect, setRedirect] = useRedirect('Home', 3000);
    const [showSomethingWentWrong, setShowSomethingWentWrong] = useState(false);

    useEffect(() => { //loaing should not start immidiate
        setTimeout(() => {
        }, 0);
    }, []);

    useEffect(() => { //loading should stop after a certain amount of time
        setTimeout(() => {
        }, loadingTime);
    }, [loading]);

    if (loading) {
        return <ActivityIndicator size={size}/>;
    return (
            onBackdropPress={()=> navigation.navigate("Home")}
            <SomethingWentWrong />

const SomethingWentWrong = () => {
    return (
            <Text style={styles.text}>Something went wrong. Please close the app and open again or try again later.</Text>
            <Text style={styles.text}>Thank you!</Text>


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Browse other questions tagged or ask your own question.