[RN] 다이내믹 링크시 스플래시 화면 조절하기

// App.js
import React, { useEffect, useState } from "react";
import { NavigationContainer } from "@react-navigation/native";
import { Provider as PaperProvider } from "react-native-paper";
import Root from "./Root";
import dynamicLinks from "@react-native-firebase/dynamic-links";
import { Provider } from "react-redux";
export default function App() {
  const [initailScreen, setInitialScreen] = useState(undefined);
  const handleDynamicLink = (link) => {
    setInitialScreen("ContentViewer");
  };

  useEffect(() => {
    // foreground deeplink
    const unsubscribe = dynamicLinks().onLink(handleDynamicLink);
    // backgournd deeplink
    dynamicLinks()
      .getInitialLink()
      .then((link) => {
        setInitialScreen("ContentViewer");
      });
    return () => unsubscribe();
  }, []);

  return (
    <Provider >
      <PaperProvider>
        <NavigationContainer >
          <Root initailScreen={initailScreen} />
        </NavigationContainer>
      </PaperProvider>
    </Provider>
  );
}

// Root.js
function Root({ initailScreen }) {
  const [firstRoute, setFirstRoute] = useState("");
  useEffect(() => {
    setFirstRoute(initailScreen);
  }, [initailScreen]);
  return (
    <Stack.Navigator headerMode="screen">
      {firstRoute === undefined ? (
        <Stack.Screen
          name="Splash"
          component={SplashScreen}
          options={{
            title: "",
            headerShown: false,
          }}
        />
      ) : (
        <></>
      )}
      
    </Stack.Navigator>
  );
}

export default Root;

다이내믹 링크 사용시 이벤트 리스너에 따라 스플래시 화면을 실행시키지 않아야 되는 상황.
app.js에서 props로 상태값을 전달 후 root.js에서 상태값을 바로 사용하면 app.js의 useState의 초기값을
반드시 실행할 수 밖에 없으므로 root.js의 useEffect에서 필터링을 거친 후 상태값 변경을 통해 조건부 렌더링을 실행하도록 하였다.