Implement BouncingScrollPhysics animation in react native

Question

How can I implement something like BouncingScrollPhysics that is one of ScrollPhysics type in flutter's listView in react native.

I know there is bounce property for react native, but it only works for iOS, I need for android too.

So how can I active this prop for android too.

Here is What I want to implement in react native.

Answer 1

Try this module – react-scrollbooster. It's a port of this js lib scrollbooster, also see options here.

import { useScrollBoost } from "react-scrollbooster";

const Component = () => {
  const [viewport, scrollbooster] = useScrollBoost({
    direction: "vertical",
    friction: 0.2,
    scrollMode: "transform"
    // ...optional options
  });

  return (
    <div ref={viewport}>
      <div>
        <h2>Drag to scroll</h2>
      </div>
      <button
        onClick={() => {
          console.log("?");
          if (scrollbooster) {
            console.log(scrollbooster.getState());
          }
        }}
      >
        Click me!
      </button>
    </div>
  );
};

Code

Demo