slorber / react-native-scroll-into-view

Scroll a ReactNative View into the visible screen. Similar to DOMElement.scrollIntoView() browser function.
https://thisweekinreact.com
MIT License
417 stars 13 forks source link

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

Open StefanWallin opened 3 months ago

StefanWallin commented 3 months ago

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.

Screenshot 2024-07-29 at 10 09 15

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 commented 3 months ago

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)
    }
  }