Rendering react navigation screens inside a scrollview

Question

I am building a react native app where I want to add a scrollview as a wrapper to all the UI screens. I have wrapped the Stack.Navigator in a ScrollView but the content is clipped at the bottom of the screen, there is no content visible after the end of screen. Kindly look at the code below

App.tsx

export default function App() {
  const [loading, setLoading] = useState(true);
  return loading ? (
    <AppSplashScreen onLoadComplete={() => setLoading(false)} />
  ) : (
    <NavigationContainer>
      <AuthProvider>
        <Provider>
          <ScrollView
            contentContainerStyle={{ minHeight: "100%", overflow: "visible" }}
            style={styles.container}
          >
            <Content />
          </ScrollView>
        </Provider>
      </AuthProvider>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    marginTop: 32,
    padding: 16,
    minHeight: "100%",
  },
});

Content.tsx

const Content = () => {
  return (
    <Stack.Navigator
      initialRouteName="LandingPage"
      screenOptions={{
        headerShown: false,
      }}
    >
      <Stack.Screen name="LandingPage" component={Signup} />
    </Stack.Navigator>
  );
};

Answer 1

Try add this to ScrollView style or contentContainerStyle

flexGrow: 1