react-native-keyboard-aware-scroll-view
react-native-keyboard-aware-scroll-view copied to clipboard
APSL
Support React.createRef()
Currently passing a ref to innerRef does not work, as we have to provide a function
A workaround is simple:
constructor(props) {
super(props);
this.scrollViewRef = React.createRef();
}
handleRef = ref => {
this.scrollViewRef.current = ref;
};
i dont understand, should this work?
constructor(props) {
super(props);
this._scroll = React.createRef();
}.
...
<KeyboardAwareScrollView
style={styles.registrationBody}
keyboardShouldPersistTaps="handled"
innerRef={ref => { this._scroll.current = ref; }}
>
....
this._scroll.scrollToEnd();
coz for me, it says Cannot read property 'scrollToEnd' of undefined still.
@khizar innerRef is the RN scrollview ref, not the KeyboardAwareScrollView ref (which has the method you want).
Use innerRef to get the component reference and use this.scrollRef.props to access these methods.
Are you using this.scrollRef.props. scrollToEnd()? don't forget the props part here.
I think the current API is a bit confusing, because the public api seems to be exposed to the raw RN scrollview as props which feels a bit unnatural. @alvaromb what about exposing a public API on the wrapper component itself?
yes i tried that as well. the _scroll in my code is set to
{
current: null
}
which i think means that the ref is not set? i am doing a console log on it before calling the function. maybe i didnt get this properly but my understanding here is that using innerRef like this should set the ref to the RN scrollview to _scroll and that scrollview is passed this function as a prop which i can use. Please correct me if i am wrong here :(
@khizar maybe you can try to log the ref here:
innerRef={ref => { console.log("innerRef",ref); this._scroll.current = ref; }}
could it be that you are calling the scrollToEnd after the scrollview is unmounted?
@slorber thanks for the help, i am very new to React Native and might be doing something stupid but this is not working for me. I am staying on the same screen and all the content is inside the <KeyboardAwareScrollView /> so i am sure that it is not unmounted. About the console logs, nothing gets logged if i do what you said above. But instead if i do ref={this._scroll} and the log this._scroll in the componentDidMount, i get
Which i assume is a ref to the KeyboardAwareScrollView and from what i understood above, i am not to use this?? also this does not have a props.scrollToEnd func, although it does have a scrollToBottom function, which is apparently doing nothing. But i am assuming that is because i am not supposed to use this. Do i make any sense here?
if it helps, i would add here what i am actually trying to achieve. So i have a form that is wrapped in this component and when its valid, i add the call to action button. So if the button is outside this scrollview, it just jumps above the keyboard on android and we can achieve the same thing using KeyboardAvoidingView on ios. But then it overlaps the last part of the form, just above the keyboard. So to avoid that, i am adding the button inside this scrollview as well, but now it stays under the keyboard and i want the scrollview to scroll up so that the button becomes visible without closing the keyboard. So my approach here is to call scrollToEnd on button mount but this is where i am stuck. So maybe you can let me know if the way i am using this component is wrong. thanks.
@khizar it's really hard to help you if you don't provide code. Please go to https://snack.expo.io/ and create a simple reproduction case so that I can take a look.
Btw you can also take a look at react-native-scroll-into-view, it does not handle keyboard offset (yet) but you can probably work around that by providing a bottom inset.
okay thanks, i will try and reproduce it there later and in the meantime, post back if i find a solution. thanks.
@alvaromb about issue of @khizar we wait for a repro case
About original issue, i'd like to create a package which aims to help lib authors to intercept refs, supporting functions and createRef.
Related tweet: https://twitter.com/sebastienlorber/status/1013735660161822720
when i log the ref, I get a null value, so the variable this.scrollRef remains undefined
In my functional component it works this way (other solutions mentioned above did not work for me):
const SearchScreen = (props: IProps) => {
let scrollRef = React.createRef();
const scrollToTop = () => {
scrollRef.current.scrollToPosition(0, 0);
}
return (
<KeyboardAwareScrollView
ref={scrollRef}
>
...
</KeyboardAwareScrollView>
)
}
In my functional component it works this way (other solutions mentioned above did not work for me):
const SearchScreen = (props: IProps) => { let scrollRef = React.createRef(); const scrollToTop = () => { scrollRef.current.scrollToPosition(0, 0); } return ( <KeyboardAwareScrollView ref={scrollRef} > ... </KeyboardAwareScrollView> ) }
We have the exact same usage :( The inner-ref concept doesn't work for us..
In my functional component it works this way (other solutions mentioned above did not work for me):
const SearchScreen = (props: IProps) => { let scrollRef = React.createRef(); const scrollToTop = () => { scrollRef.current.scrollToPosition(0, 0); } return ( <KeyboardAwareScrollView ref={scrollRef} > ... </KeyboardAwareScrollView> ) }
The error below occurs to me.
Type 'RefObject<unknown>' is not assignable to type '(ref: Element) => void'.
Currently passing a ref to
innerRefdoes not work, as we have to provide a function
@slorber It looks straightforward to implement this. Is it pending a decision?
(I hope you don't mind the notification 🙏🏼)
@texastoland I'm not using this lib for 2 years now and don't plan to maintain it myself.
Reach out to APSL for support, I'm just a benevolent contributor and not the creator/owner of that lib.
Ah thanks for the reply 👌🏼 Yeah I just found it cleaning up a contract. Not that big a deal!