StackNavigator incompatibility with ScrollView forces anti-patterns

[brettins]

Currently, you cannot nest a stack navigator in a ScrollView, as the contents will return blank or, if you force the contents to appear by using ScrollView's contentContainerStyle with a flexGrow: 1, the contents of the StackNavigator won't scroll any more.

Take a common scenario: a registration form with multiple steps. Each of the step is in a nested navigator called "RegistrationNavigator". However, when the software keyboard comes up, we should still be able to scroll to the different fields of each screen.

Currently, if you wrap your Registration Navigator in a KeyboardAwareScrollView, then the contents will either disappear or become a fixed size. So you need to put the KeyboardAwareScrollView in each screen, which violates DRY.

More than that, a ScrollView does not support horizontal overflow, so things like box-shadows will be cut off horizontally. The solution is to nest a view in the ScrollView with some padding. But that nested View needs to be repeated in every single screen of the registration flow.

So StackNavigator not behaving properly within a ScrollView forces bad programming patterns.

Solutions to the problem end up like this: https://stackoverflow.com/questions/64190224/react-native-navigation-wrap-all-screens-in-a-view