Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

scrollToFocusedInput does not work/ exists anymore on the props #553

Open
NiharR27 opened this issue Aug 12, 2022 · 2 comments
Open

scrollToFocusedInput does not work/ exists anymore on the props #553

NiharR27 opened this issue Aug 12, 2022 · 2 comments

Comments

@NiharR27
Copy link

NiharR27 commented Aug 12, 2022

Using:
"react-native-keyboard-aware-scroll-view": "^0.9.5",
"react-native": "0.67.4"
Replicated with: iOS and Android devices.

Code:

const scrollToInput = React.useCallback((reactNode: number | null) => {

    currentInputScroll.current._internalFiberInstanceHandleDEV.memoizedProps.scrollToFocusedInput( 
      reactNode,
    );
  }, []);

<KeyboardAwareScrollView
   keyboardOpeningTime={0}
    enableOnAndroid={true}
    innerRef={(ref: any) => (currentInputScroll.current = ref)}>
<View>
......
<TextInput onFocus={(event: any) => scrollToInput(findNodeHandle(event.target))}> </TextInput> 
</View>
</KeyboardAwareScrollView>

Problem:

Readme suggested to use:

  // Add a 'scroll' ref to your ScrollView
  this.scroll.props.scrollToFocusedInput(reactNode)
}

Here, the currentInputScroll.current no longer has props inside it, and looking at Stack Overflow, i found the example to use

._internalFiberInstanceHandleDEV.memoizedProps.scrollToFocusedInput( 
      reactNode,
    );

which does not work either....

Console logging currentInputScroll.current inside the scrollToInput callback gives:
Screen Shot 2022-08-13 at 9 28 27 am

The problem is that the scroll works when you click the first text input, but when you hit the second text input, it doesn't go to that text input and rather jumps the scroll to the first one... I console logged the findNodeHandle(event.target) and that seem to give correct number (in terms of increasing as you click the text input below... Any idea why?

@luluhoc
Copy link

luluhoc commented Sep 22, 2022

#451 (comment)

@jordzawada
Copy link

I sort of have this working. The issue is it only puts the input to the top of screen and I need it in the middle.

this.scrollRef.scrollTo({ y: findNodeHandle(reactNode), animated: true });

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants