Conditional rendering not working, what am I missing?-CodePudding

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:

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.

CodePudding user response：

Try this

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

You will see your loading screen