React Native - react native web swiper

React Native

 

 

✅ react-native-web-swiper

---

자동 스크롤 등 이미 구현이 어느정도 되어 있는 라이브러리(웹 사용 가능)

 

https://reactnative.directory/package/react-native-web-swiper

https://reactnative.directory

 

usage

import { makeImgPath } from "@/utils";
import { NativeStackScreenProps } from "@react-navigation/native-stack";
import { useEffect, useState } from "react";
import { ActivityIndicator, Dimensions } from "react-native";
import Swiper from "react-native-web-swiper";
import { styled } from "styled-components/native";

export default function Movies({
  navigation,
}: NativeStackScreenProps<any, "Movies">) {
  const [loading, setLoading] = useState(true);
  const [nowPlaying, setNowPlaying] = useState([]);
  const getNowPlaying = async () => {
    const { results } = await (
      await fetch(
        `https://api.themoviedb.org/3/movie/now_playing?api_key=${API_KEY}&language=en-US&page=1&region=KR`,
      )
    ).json();
    setNowPlaying(results);
    setLoading(false);
  };
  useEffect(() => {
    getNowPlaying();
  }, []);
  return loading ? (
    <Loader>
      <ActivityIndicator />
    </Loader>
  ) : (
    <Container>
      <Swiper
        loop
        timeout={3.5}
        springConfig={{
          stiffness: 120,
          damping: 20,
          mass: 1,
        }}
        controlsProps={{
          dotsTouchable: true,
          prevPos: false,
          nextPos: false,
          dotsWrapperStyle: {
            width: "100%",
            alignItems: "center",
          },
        }}
        containerStyle={{ width: "100%", height: SCREEN_HEIGHT / 4 }}
      >
        {nowPlaying.map((movie) => (
          <View key={movie.id}>
            <BgImg source={{ uri: makeImgPath(movie.backdrop_path) }} />
          </View>
        ))}
      </Swiper>
    </Container>
  );
}

 

 

React Native Swiper

Web이랑 호환되지 않는 Swiper

https://reactnative.directory/package/react-native-swiper