Skip to content

HTHstudy/react-native-carousel-kingth

Repository files navigation

react-native-carousel-kingth

this is simple carousel for react-native users

Preview

IOS Android
!

Quick Start

$ yarn 
$ yarn ios
$ yarn android

Example

// App.tsx

import React, {useState} from 'react';
import {SafeAreaView, View} from 'react-native';
import Carousel from './src/Carousel';

const App = () => {
  const [page, setPage] = useState(0);
  return (
    <SafeAreaView style={{marginTop: 80}}>
      <Carousel
        page={page}
        setPage={setPage}
        gap={16}
        data={RainbowSheet}
        pageWidth={160}
        RenderItem={RainbowSheetPage}
      />
    </SafeAreaView>
  );
};

const RainbowSheetPage = ({
  item,
}: {
  item: {
    id: number;
    color: string;
  };
}) => {
  return <View style={{width: 160, height: 200, backgroundColor: item.color}} />;
};

const RainbowSheet = [
  {id: 0, color: 'red'},
  {id: 1, color: 'orange'},
  {id: 2, color: 'yellow'},
  {id: 3, color: 'green'},
  {id: 4, color: 'blue'},
  {id: 5, color: 'navy'},
  {id: 6, color: 'purple'},
];

About

This is a simple carousel for react-native users.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published