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

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

scrollTo method is undefined #544

Closed hasanalicansu closed 2 years ago

hasanalicansu commented 2 years ago

scrollTo method is undefined at KeyboardAwareScrollView

image
 const scrollRef = useRef();

 console.log(' scrollRef.scrollTo', scrollRef.current?.scrollTo);

//*******

 <KeyboardAwareScrollView ref={scrollRef} {...scrollViewProps} style={[{ flex: 1 }, containerStyle]} showsVerticalScrollIndicator={false}>
              {children}
</KeyboardAwareScrollView>
hasanalicansu commented 2 years ago

I found one solutions for scrollTo,

I used scrollRef.current?.scrollToPosition(0, 0, true) instead of scrollTo for auto scroll to top

scrollToPosition: (x: number, y: number, animated?: boolean) => void

GwFreak01 commented 1 year ago

@hasanalicansu how did you make it work for Android? Any extra configs?

hasanalicansu commented 1 year ago

@GwFreak01 hi mate, I'm sorry for the delay.

I have used "useScrollToTop" from '@react-navigation/native' for this feature. When user press the bottom tab icon, page scrolling to top of page like twitter app.

This is my code, When user press the bottom tab icon, useScrollToTop hooks run and page scrolling to top of page

export const Layout = ({ children, colorScheme, containerStyle, backgroundColor = colorScheme.background, statusBarColor, ...scrollViewProps }) => {
  const scrollRef = useRef(null);

  useScrollToTop(React.useRef({
    scrollToTop: () => scrollRef.current?.scrollToPosition && scrollRef.current?.scrollToPosition(0, 0, true),
  }));

 return (
    <View style={{ flex: 1, backgroundColor }}>
      <StatusBar translucent backgroundColor={statusBarColor || colorScheme.statusBar} />
      <KeyboardAwareScrollView ref={scrollRef}> {children} </KeyboardAwareScrollView>
    </View>
  );
};
manjeetcars24 commented 2 months ago

The following seems to be working fine on 0.9.2

scrollRef?.current?.scrollTo?.({ x: 0, y: height / 2.5, animated: true });