unable to scroll in scrollView

I made an expo snack for your problem and examined it. I think I solved it. take a look at it:

This is the link to the expo snack

To describe about it:

As I found out, your problem was that the ScrollView wasn't changing height in any situations, even by giving more height or giving paddingBottom.

so I wrapped the ScrollView in a View tag and gave this styling to it:

scrollViewWrapper: {
     width: '100%',
     minHeight: '100%',
     paddingBottom: 1.3*keyboardHeight
 }

In this styling, you see parameter keyboardHeight, which is a state that I'm setting in the componentDidMount with below codes:

import {Keyboard} from 'react-native';
 
state = {
  keyboardHeight: 0,
}

componentDidMount() {
this.keyboardDidShowListener = Keyboard.addListener(
  'keyboardDidShow',
  this._keyboardDidShow
);
this.keyboardDidHideListener = Keyboard.addListener(
  'keyboardDidHide',
  this._keyboardDidHide
 );
}
_keyboardDidShow = (e) => {
  this.setState({
    keyboardHeight: e.endCoordinates.height,
  });
};

I have to mention that you cannot move the style of paddingBottom: 1.3*keyboardHeight outside of the class component and place it in styles object, because the keyboardHeight is a state, it can be known just inside the component.

I suggest you to take a look at my code in expo snack to understand my descriptions better.

I hope this solve your problem.

Edit for functional components

use below code to detect keyboard height while writing functional components:

const [keyboardHeight, setKeyboardHeight] = useState(0)
const [scrollViewVisibility, setScrollViewVisibility] = useState(false)
useEffect(() => {
  Keyboard.addListener("keyboardDidShow", _keyboardDidShow);

  // cleanup function
  return () => {
    Keyboard.removeListener("keyboardDidShow", _keyboardDidShow);
  };
}, []);
const _keyboardDidShow = (e) => {
  console.log("============in keyboardDidShow")
  setKeyboardHeight(e.endCoordinates.height)
};

I edited the expo snack too. you can take a look at it to see a working example.

I think that if your ScrollView contents are smaller than the screen, it won't scroll. So you can try making height: "150%" or something like that or add in an empty view with a height to stretch your ScrollView higher than your screen.

Wrapping ScrollView in a View with height > the screen will work too.

I think so you can fix this issue by following below tips: 1)Adjusting ScrollView tag position most probably it will go above your condition directly inside <></> or add view Tag,above ScrollView tag like

<><View style={{ Height: "auto", maxHeight: screenHeight}}><ScrollView>....</ScrollView></view></>

2)By adjusting height, maxHeight property and flex property

If it worked for you please let me know