ScrollTo current textinput for custom keyboard

Viewed 345

How can I scroll to the current TextInput in a scrollView when focussed? I have applied a custom keyboard that opens up onFocus. I tried

scrollTo({y: heightFromTopOfInput + heightOfKeyboard, animated : true})

But this leads to uneven scroll. For some input, this works fine, but in most cases, it scrolls to too much bottom than the focused input. How can I get the perfect y coordinate to scrollTo when input is focused?

My screen something like this enter image description here Update : I am now using the following function to scroll to my focused input. But still not working.

// inputRef is ref to current input
scrollToCurrentInput = inputRef => {
    if (inputRef) {
      inputRef.current.measureLayout(this.scrollViewRef.current, (x, y) => {
        if (y - keyboardHeight < 0) {
          return;
        } else {
          const {height} = Dimensions.get('screen');
          const keyboardScreenY = keyboardHeight;
          let scrollOffsetY = y - keyboardScreenY + (height * 11) / 100;
          this.scrollViewRef.current.scrollTo({
            x: 0,
            animated: true,
            y: scrollOffsetY,
          });
        }
      });
    }
  };

Here [https://github.com/iamrohitagg/react-native-keyboard-android-ios] (https://github.com/iamrohitagg/react-native-keyboard-android-ios) is a repo for the same. It has minimal reproducible example

0 Answers
Related