react-slip-and-slide v3.12.2

react-slip-and-slide

A react and react-native carousel

Props

Instance Ref

const data = [
  {
    label: "Lorem",
  },
  {
    label: "Ipsum",
  },
  ...
];

function App() {

  const ref = React.useRef<ReactSlipAndSlideRef>(null);

  const prev = () => ref.current?.previous();
  const next = () => ref.current?.next();

  return (
    <div className="App">
      <ReactSlipAndSlide
        ref={ref}
        data={data}
        snap
        centered
        infinite
        pressToSlide
        itemWidth={420}
        itemHeight={400}
        interpolators={{
          opacity: 0.3,
          scale: 0.9,
        }}
        renderItem={({ index, item }) => {
          return (
            <img
              style={{ borderRadius: 80 }}
              src={`https://picsum.photos/seed/${index * 2}/400`}
              alt={item.label}
            />
          );
        }}
      />
    </div>
  );
}

Important! In order to get Android to work properly, you need to wrap your app with GestureHandlerRootView.

function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <ReactSlipAndSlide />
    </GestureHandlerRootView>
  );
}

Check out some examples

License

Licensed under the terms of the MIT License.