Typescript interprets scrollIntoView api as Promise<void> but returns nothing.

[StefanWallin]

Whenever I use the scrollIntoView-function that is returned from the useScrollIntoView-hook I get an ESlint error called @typescript-eslint/no-floating-promises.

The reason for this seem to be that the function is typed to return a Promise but is not returning anything.

The result of this is that any attached catch will not work since catch is not defined on undefined.

  const scrollIntoView = useScrollIntoView()

  const scrollMembers = () => {
    if (membersRef && membersRef.current && memberFilter.length > 0) {
      scrollIntoView(membersRef.current)
    }
  }

@typescript-eslint/no-floating-promises

warning
Promises must be awaited, end with a call to .catch, end with a call to .then with a rejection handler or be explicitly marked as ignored with the `void` operator

My own research leads me to think this might be related to Hermes not supporting Async arrow functions. But this code below snippet does work, so it's not apparent for me.

const test = async () => {
  console.log("X0X0X0 Test");
};

const Component = () => {
  return (
    <Pressable
      onPress={() => {
        test()
          .then(() => console.warn("X0X0X0 Then"))
          .catch(() => console.warn("X0X0X0 Catch"));
      }}
    >
      Test
    </Pressable>
  );
};

Details

"react": "18.2.0",
"react-native": "0.72.12",
"react-native-scroll-into-view": "2.0.2",
HERMES: On

(I've fixed it with ignore next line, but thought it might be interesting to know)

[slorber]

The return type is Promise<void> indeed because the function is async, this is a perfectly ok return type for an async function that doesn't return anything meaningful

Now you are free to add an await if you care:

  const scrollIntoView = useScrollIntoView()

  const scrollMembers = async () => {
    if (membersRef && membersRef.current && memberFilter.length > 0) {
      await scrollIntoView(membersRef.current)
    }
  }