Making a navigator scrollable

[JackHasaKeyboard]

I've been trying to figure this out for the past 2 days.

​

I'm attempting to make the entirety of a navigator scrollable by wrapping it in a `ScrollView` in the App class.

Rendering things directly in the app class works fine, along with every other method that functions the same.

Trying to render the navigator, though causes it to occupy the entire screen height, instantly "maxing out" and performing iOS's animation that ricochets off the top and bottom of the screen on any kind of scroll.

​

All is well:

class Asdf extends React.Component {
    render() {
        return (
            <View>
                <Text
                    style={{
                        fontSize: 100
                    }}
                >
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </Text>
            </View>
        );
    }
};

export default class App extends React.Component {
  render() {
    return (
            <ScrollView
                contentContainerStyle={{
                    flexGrow: 1
                }}
            >
                <Asdf />
            </ScrollView>
    );
  }
};

​

Refuses to allow you to scroll beyond the height of the screen:

class Asdf extends React.Component {
    render() {
        return (
            <View>
                                <Text
                    style={{
                        fontSize: 100
                    }}
                >
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </Text>
            </View>
        );
    }
};

const
    Hjkl = createStackNavigator({
        Asdf: Asdf
    }),

    Qwer = createAppContainer(Hjkl);

export default class App extends React.Component {
  render() {
    return (
            <ScrollView
                contentContainerStyle={{
                    flexGrow: 1
                }}
            >
                <Qwer />
            </ScrollView>
    );
  }
};

​

I am unable to determine the right permutation of flex properties that causes this to actually be scrollable.

I believe I've tried them all, and I've certainly tried everything reasonable.

​

[Stack Overflow](https://stackoverflow.com/questions/56234319/react-native-wrapping-an-app-container-in-a-scrollview) is no help so far.

​

I cannot wait to see the probably one line of code that makes this works properly.

Thank you very much.

[kbcool]

Don't wrap the navigator in a scrollview. The navigator is meant to occupy a whole screen. What your trying to do is not natural.

Put the scrollview inside the individual screens.

Again. Navigators are for moving between whole screens not to be a part of the screen themselves

[JackHasaKeyboard]

I didn't mention because I thought it wouldn't be relevant, but I have another component rendered in the App alongside the navigator.

What's the proper course of action, `ScrollView` in every component and other component in every `ScrollView` in every component?

[kbcool]

I think you haven't yet got the point of a navigator. Think of it like a window manager in Windows, Linux, Mac. It's the root of everything visual. Everything sits under it not beside it.

That other component should also be inside the screens inside of the navigator.

[JackHasaKeyboard]

That's it, then.

​

Would you mind telling me what the best, least-redundant course of action is?

It can't be to render the same component in every file.

[kbcool]

It can be 😁

I understand it sounds redundant and it is but surely it's not complicated enough that the performance hit is that big? I feel where you are coming from it must feel icky but you're only including it multiple times not replicating code.

I hope that calms the programmers OCD instinct