react-native-dynamic-carousel

• 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:

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

Name	Type	Default
data	any[]
height	number
isHorizontal	boolean
outputRangeOpacity	number[]
outputRangeScale	number[]
itemVerticalRotationDegreeRange	string[]
itemHorizontalRotationDegreeRange	string[]
flatListProps	{}
itemStyle	ViewStyle
itemHeightPrecentageFromHeight	number
itemwidthPrecentageFromWidth	number
ItemView	(props: any) => JSX.Element
onSelectItem	(item: any) => void
initialIndex	number
startWithHalfSlide?	boolean