Not able to Scroll React Native-CodePudding

I was creating an app that sells ebooks and when creating the details page for each book, I wrapped the entire component with a scroll view but it does not work, you can see my result in the screen recording attached, I looked through many solutions but could not find a fix for my issue,

Here is my code of the component that's causing the issue:

import React, {useRef} from 'react';
import {StyleProp, ViewStyle} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';

interface HeaderLinearGradientProps {
  height?: number | string;
  styles?: StyleProp<ViewStyle> | any;
}

const HeaderLinearGradient: React.FC<HeaderLinearGradientProps> = ({
  height,
  children,
  styles,
}) => {
  const colors = useRef(['#4685EC', '#00296B']);

  return (
    <LinearGradient
      colors={colors.current}
      style={{
        ...styles,
        height: height || '30%',
      }}>
      {children}
    </LinearGradient>
  );
};

export default HeaderLinearGradient;

And here is the result I'm getting https://drive.google.com/file/d/121x2CNuj3M63aJu_Z1PjxYbYxivCrhuP/view?usp=sharing

Any help would be appreciated, Thanks

CodePudding user response：

Have you tried to apply contentContainerStyle={{flexGrow: 1}} and container={{flex: 1}}?

Seems like it should do the trick