Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Conditional rendering not working, what am I missing?

I’m trying to wait for a flatlist to be fully rendered before showing it, otherwise I would like to show a loading screen but the loading screen is never showing an instead the screen goes white until it loads the Flatlist fully rendered, I never see the loading screen.

This is the relevant code

function FaqFlatList() {
    const [mounted, setMounted] = useState(false);

    useEffect(() => {
      console.log("mounted", mounted);
      setMounted(true);
    }, []);

    return (
      <View style={styles.subContainer}>
        {mounted ? (
          <FlatList
            ref={flatListRef}
            initialNumToRender={DATA.length}
            data={DATA}
            renderItem={renderItem}
            keyExtractor={(item, index) => index.toString()}
          />
        ) : (
          <View style={styles.loadingContainer}>
            <Text style={styles.title}>Loading...</Text>
          </View>
        )}
      </View>
    );
  }

styles:

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

const styles = StyleSheet.create({
 subContainer: {
     flex: 1,
     width: "100%",
     alignItems: "center",
     justifyContent: "center",
     backgroundColor: "#d3aa72",
     margin: 20,
     marginTop: 0,
   },
   loadingContainer: {
    flex: 1,
    height: "100%",
    width: "100%",
    alignItems: "center",
    backgroundColor: "black",
    justifyContent: "center",
  },
  title: {
    fontSize: 40,
    fontFamily: "Quasimodo",
    textAlign: "center",
    color: "white",
    textShadowColor: "rgba(0, 0, 0, 1)",
    textShadowOffset: { width: -1, height: 1 },
    textShadowRadius: 10,
    marginTop: 10,
  },
});

Any idea why this might be? To be clear I never see the loading screen. Also I did make sure to switch the condition around to see if it might have been a styling issue but no, if I do

{!mounted ? (
          <FlatList...etc

I can see the loading screen perfectly.

>Solution :

Try this

useEffect(() => {
      console.log("mounted", mounted);
      setTimeout(() =>  setMounted(true), 3000);
    }, []);

You will see your loading screen

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading