ref.current null is not an object - react-native

Question

I created a WebView component. And I need to send a script there.
To do this, I created a ref for a webview component (webViewRef).
The problem is that when the ref is FIRST triggered, the ref is empty (webViewRef.current null is not an object) and the injection does not work. All subsequent ones work fine.
import { useEffect, useRef } from 'react'; import * as React from 'react';
import { WebView } from 'react-native-webview';
import { useKeyboardStatus } from './useKeyboardHook';
export function Screen() {
const keyboardIsOpen = useKeyboardStatus();
let webViewRef = useRef<WebView>();
useEffect(() => {
scrollToBottom();
}, [keyboardIsOpen]);
function scrollToBottom(): void {
if (webViewRef.current !== null) {
webViewRef.current.injectJavaScript('some JavaScript');
}
};
return (
<WebView
ref={webViewRef}
source={{ uri: URL }}
javaScriptEnabled={true}
/>
);
}
how can i fix this to work the first time?

Answer 1

You get the WebView ref after the useEffect run.
The first option, is to call scrollToBottom when you get the ref:
export function Screen() {
const keyboardIsOpen = useKeyboardStatus();
let webViewRef = useRef<WebView>();
useEffect(() => {
scrollToBottom();
}, [keyboardIsOpen]);
function scrollToBottom() {
webViewRef.current?.injectJavaScript('some JavaScript');
}
const handleWebViewRef = (ref: WebView) => {
webViewRef.current = ref;
scrollToBottom();
};
return (
<WebView ref={handleWebViewRef}
source={{uri: URL}}
javaScriptEnabled={true}/>
);
}
A nicer option in my opinion, will be to use useState instead useRef and add it to the dependencies array of the useEffect hook:
export function Screen() {
const keyboardIsOpen = useKeyboardStatus();
const [webViewRef, setWebViewRef] = useState<WebView>();
useEffect(() => {
scrollToBottom();
}, [keyboardIsOpen, webViewRef]);
function scrollToBottom() {
webViewRef?.injectJavaScript('some JavaScript');
}
return (
<WebView ref={ref => setWebViewRef(ref)}
source={{uri: URL}}
javaScriptEnabled={true}/>
);
}

Answer 2

The problem is the useEffect hook is not getting the updated reference of the webview jus add webViewRef in the dependencies of useEffect
Snack Link: https://snack.expo.io/#ashwith00/humiliated-marshmallows
import { useEffect, useRef } from 'react'; import * as React from 'react';
import { WebView } from 'react-native-webview';
import { useKeyboardStatus } from './useKeyboardHook';
export function Screen() {
const keyboardIsOpen = useKeyboardStatus();
const webViewRef = useRef();
useEffect(() => {
scrollToBottom();
}, [keyboardIsOpen, webViewRef]);
function scrollToBottom(): void {
webViewRef.current?.injectJavaScript('some JavaScript');
};
return (
<WebView
ref={webViewRef}
source={{ uri: URL }}
javaScriptEnabled={true}
/>
);
}