APSL / react-native-keyboard-aware-scroll-view

A ScrollView component that handles keyboard appearance and automatically scrolls to focused TextInput.
MIT License
5.27k stars 646 forks source link

react-native 0.63 scrollIntoView of undefined #451

Open yasaricli opened 4 years ago

yasaricli commented 4 years ago

When I run scrollToEnd in version 0.63, I get the error scrollIntoView of undefined.

also now scroll.props.scrollToEnd gives an error. Because there are no props.

this.scroll.props.scrollToEnd(); // Change to this.scroll.scrollToEnd();

Warning:

TypeError: Cannot read property 'scrollIntoView' of undefined

this is a warning But it doesn't scroll down.

Thanks.

Foskas commented 3 years ago

Hi,

Any updates on this ?

Thanks!!

nhatndm commented 3 years ago

@Foskas , after working around, here is my solution how can call these functions scrollToEnd, scrollIntoView,.. for functional component

let scrollProps;
<KeyboardAwareScrollView
      innerRef={(ref) => {
        scrollProps = ref._internalFiberInstanceHandleDEV.memoizedProps;
      }}
/>
const _scrollToInput = (reactNode: ReactNode) => {
   // 200 is extra height after scrolling to component
    scrollProps.scrollToFocusedInput(reactNode, 200);
  };
<TextInput  onFocus={(event) => _scrollToInput(findNodeHandle(event.target))} />
olegmilan commented 3 years ago

@nhatndm I was able to achieve this in more accurate way:

<KeyboardAwareScrollView
      innerRef={(ref) => { this.scrollView = ref.getScrollResponder(); }}
/>
const _scrollToInput = (reactNode: ReactNode) => {
     this.scrollView.props.scrollToFocusedInput(inputNode, 200);
};
arstropica commented 3 years ago

@olegmilan I modified this to allow for instance removal:

<KeyboardAwareScrollView
      innerRef={(ref) => { this.scrollView = ref ? ref.getScrollResponder() : null; }}
/>