export function Welcome()

in src/Welcome.tsx [40:138]
85 lines of code
5 McCabe index (conditional complexity)

export function Welcome(props: {
  title: string;
  setInitialized: StateUpdater<boolean>;
}) {
  const {setInitialized, title} = props;
  const {read, save, initialized} = useContext(StorageContext);
  const {screen} = useScreenDimensions();
  const {mode, theme} = useContext(ThemeContext);

  const style = useMemo<StyleDefinition>(
    () => ({
      container: {
        flex: 1,
        backgroundColor: theme.backgroundColor,
        justifyContent: 'center',
        alignItems: 'center',
      },
      logo: {
        paddingVertical: 100,
      },
      name: {
        color: theme.textColor,
        fontSize: 20,
      },
      spinner: {
        marginTop: 50,
      },
    }),
    [theme.backgroundColor, theme.textColor],
  );

  const initDefaults = useCallback(async () => {
    defaults.emulator = await DeviceInfo.isEmulator();
    defaults.dev = __DEV__;
    await new Promise(r => setTimeout(r, 2000));
    const storage = await read();
    try {
      const minorOrPatchUpdateDetails = await VersionCheck.needUpdate({
        packageName: Platform.select({
          ios: defaults.packageNameIOS,
          android: defaults.packageNameAndroid,
        }),
      });
      if (minorOrPatchUpdateDetails.isNeeded) {
        await handleUpdate(
          false,
          storage.skipVersion,
          minorOrPatchUpdateDetails.latestVersion,
          minorOrPatchUpdateDetails.storeUrl,
          save,
        );
      }
      const breakingUpdateDetails = await VersionCheck.needUpdate({
        depth: 1,
        packageName: Platform.select({
          ios: defaults.packageNameIOS,
          android: defaults.packageNameAndroid,
        }),
      });
      if (breakingUpdateDetails.isNeeded) {
        await handleUpdate(
          true,
          storage.skipVersion,
          breakingUpdateDetails.latestVersion,
          breakingUpdateDetails.storeUrl,
          save,
        );
      }
    } catch (e) {}
  }, [read, save]);

  useEffect(() => {
    setInitialized(initialized);
  }, [initialized, setInitialized]);
  // init authentication
  useEffect(() => {
    initDefaults();
  }, [initDefaults]);

  return (
    <View style={style.container}>
      {mode === ThemeMode.DARK ? (
        <LogoDark width={100} height={100} style={style.logo} />
      ) : (
        <LogoLight width={100} height={100} style={style.logo} />
      )}
      <Name style={style.name}>{title}</Name>
      <CircleSnail
        style={style.spinner}
        size={Math.floor(screen.width / 8)}
        indeterminate={true}
        thickness={3}
        color={theme.textColor}
        spinDuration={1000}
        duration={1000}
      />
    </View>
  );
}