ref methods don't work as documented

[jvgeee]

I have this RN Keyboard Aware Scroll View component wrapping a lot of my screens as a HOC, and I wanted to pass down its ref because when my users type in a TextInput, the scrollview doesn't scroll down as they add line breaks and the input gets taller (it hides behind the keyboard).

However, I couldn't get any of the ref methods to work as documented in the readme.

For me, the only way to work with the ref was to pass it down to my component, e.g.

<KeyboardAwareScrollView
      // Other props
      innerRef={(ref) => {
        scrollViewRef.current = ref
      }}
    >
        {props.children}
  <KeyboardAwareScrollView/>

Then, in my child components, i used scrollViewRef.current.scrollTo({ x, y, animated }), eg:

  const inputRef = useRef(null)

  const calcLayout = () => {
    inputRef?.current?.measure((x, y, width, height, px, py) => {
        // Small hack for me, in case the top of the item goes off screen and py becomes negative
        const scrollPos = px > 0 ? py + height : height + 50
        scrollViewRef?.current?.scrollTo({ y: scrollPos, animated: true })
    })
  }

  return  <TextInput
                {...props}
                ref={inputRef}
                onLayout={calcLayout}
              />

Trying to use scrollToEnd, scrollToPosition, scrollIntoView did not work, got typeerrors. Highly suggest updating the readme to match the current methods, but putting this here in case anyone is as stuck as I was and needs it!

[vlxdisluv]

anyone solved?

[daavidkllr]

I could experience the same problem, any chance to get this fixed? Or is this project not maintained anymore?

[felixliu226]

Hi, I'm facing the same issue. I just tried to use scrollToPosition instead of scrollTo and it works on my side.