React Native Navigation Hacks - Large Title with ScrollView hacks and Large Title issue with a screen on 2+ tab. For iOS only.

Large-Title-with-Screen-on-2+-Tab.tsx

/*
    The basic idea here is to have the whole content hidden so the navigation bar will become large
    and once our screen triggers componentDidAppear() (it didn't work with useEffect()),
    we show the content and the navigation bar remains large and acts as expected.
*/

import { useNavigationComponentDidAppear } from 'react-native-navigation-hooks/dist/hooks';

const SomeScreen: NavigationFunctionComponent = ({
  componentId,
  ...
}) => {
  const [contentHidden, setContentHidden] = useState(Platform.OS === 'ios'); // as we do it only for iOS

  useNavigationComponentDidAppear(() => {
    setContentHidden(false);
  }, componentId);

  ...

  return (
    contentHidden
      ? null
      : <SomeScreenContent />
  );
}

SomeScreen.options = props => ({
  topBar: {
    title: {
      text: "SomeScreen",
    },
    largeTitle: {
      visible: true,
    }
  },
});

Large-Title-with-ScrollView.tsx

/*
    The basic idea is to wrap the ScrollView with SafeAreaView by default
    and hide it in useEffect() after some time.
    So it won't affect the UI of a screen and won't cause any delays.
*/

const SomeScreen: NavigationFunctionComponent = ({
  componentId,
  ...
}) => {
  const [safeAreaHidden, setSafeAreaHidden] = useState(false);

  useEffect(() => {
    setTimeout(() => setSafeAreaHidden(true), 500);
  }, [componentId]);

  const Content = () => {
    const content = (
      <ScrollView>
        { your_content }
      </ScrollView>
    );

    return (
      safeAreaHidden
        ? content
        : (
          <SafeAreaView>
            { content }
          </SafeAreaView>
        )
    );
  }

  return <Content />
}

SomeScreen.options = props => ({
  topBar: {
    title: {
      text: "SomeScreen",
    },
    largeTitle: {
      visible: true,
    }
  },
});