1.0.7 • Published 6 months ago

react-native-dynamic-carousel v1.0.7

Weekly downloads
-
License
ISC
Repository
github
Last release
6 months ago
  • A react native custom component of dynamic carousel (horizontal and vertical) with react native animated. can be used as a wheel spinner.

  • It comes with a built-in TypeScript typings and is compatible with all popular JavaScript frameworks including React , Vue , Svelte , and Angular . You can use RN-Animated-Donut-Chart directly or leverage well-maintained wrapper packages that allow for a more native integration with your frameworks of choice.

examples:

npm.io npm.io npm.io npm.io npm.io

How to use:

   const data1 = dayesInMonth.map((item, index) => ({
     ['text']: item,
   }));
  const data2 = [
    {
      index: 0,
      url: 'https://reactnative.dev/img/tiny_logo.png',
    },
    {
      index: 1,
      url: 'https://reactnative.dev/img/tiny_logo.png',
    },
    {
      index: 2,
      url: 'https://reactnative.dev/img/tiny_logo.png',
    },
    {
      index: 3,
      url: 'https://reactnative.dev/img/tiny_logo.png',
    },
    {
      index: 4,
      url: 'https://reactnative.dev/img/tiny_logo.png',
    },
    {
      index: 5,
      url: 'https://reactnative.dev/img/tiny_logo.png',
    },
  ];

<Spinner
        isHorizontal={false}
        data={data}
        height={height}
        itemStyle={{padding: 5}}
        itemHeightPrecentageFromHeight={0.5}
        itemwidthPrecentageFromWidth={0.5}
        itemVerticalRotationDegreeRange={['-60deg', '0deg', '60deg']}
        ItemView={(props: {url: string}) => (
          <Image
            source={{uri: props.url}}
            style={{width: '100%', height: '100%'}}
          />
        )}
      />
      <Spinner
        initialIndex={0}
         onSelectItem={item => {
        }}
        isHorizontal={false}
        data={data}
        height={height}
        itemStyle={{padding: 5}}
        itemHeightPrecentageFromHeight={0.5}
        itemwidthPrecentageFromWidth={0.5}
        itemVerticalRotationDegreeRange={['-60deg', '0deg', '60deg']}
        ItemView={(props: {url: string}) => (


         <Text
            style={{
            fontSize: height * 0.3,
            color: 'gray',
            fontWeight: '900',
            textAlign: 'center',
            }}>
            {props.text}
           </Text>
        )}
      />

Dataset Properties

NameTypeDefault
dataany[]
heightnumber
isHorizontalboolean
outputRangeOpacitynumber[]
outputRangeScalenumber[]
itemVerticalRotationDegreeRangestring[]
itemHorizontalRotationDegreeRangestring[]
flatListProps{}
itemStyleViewStyle
itemHeightPrecentageFromHeightnumber
itemwidthPrecentageFromWidthnumber
ItemView(props: any) => JSX.Element
onSelectItem(item: any) => void
initialIndexnumber
1.0.7

6 months ago

1.0.6

7 months ago

1.0.5

7 months ago

1.0.4

7 months ago

1.0.3

7 months ago

1.0.2

7 months ago

1.0.1

7 months ago

1.0.0

7 months ago