react-native-circle-animation-list v0.6.0

Preview

react-native-circle-animation-list

Getting started

$ npm install @react-native-circle-animation-list

Requirements

Before installing react-native-circle-animation-list, it is necessary to install its dependent libraries.

Steps 1:

react-native-gesture-handler

react-native-gesture-handler is a dependency for this package that you'll need to add to your project. To install, run the following commands:

1. npm i react-native-gesture-handler
2. cd ios && pod install

Steps 2:

react-native-reanimated

react-native-reanimated is a dependency for this package that you'll need to add to your project. To install, run the following commands:

1. npm i react-native-reanimated,
2. Add into babel.config.js file: plugins: ['react-native-reanimated/plugin']
3. cd ios && pod install

Steps 3:

Shopify/flash-list

Shopify/flash-list is a dependency for this package that you'll need to add to your project. To install, run the following commands:

1. npm i @shopify/flash-list,
2. cd ios && pod install

Steps 4:

react-native-reanimated-carousel

react-native-reanimated-carousel is a dependency for this package that you'll need to add to your project. To install, run the following commands:

1. npm i react-native-reanimated-carousel,
2. cd ios && pod install

Usage

Vertical circle-animation-list

import CircleAnimationList from 'react-native-circle-animation-list';

  const renderHorizontalSlider = (item, index) => {
    return (
      <View style={styles.container}>
        <View style={styles.circle}>
          <Text style={styles.txt}>{index}</Text>
        </View>
      </View>
    );
  };

  const onEndReached = () => {
    console.log('=== onEndReached ===');
  };

  const renderFooterLoader = () => {
    console.log('=== renderFooterLoader ===');
  };

  return (
    <View style={{flex: 1}}>
      <CircleAnimationList
        data={feed}
        extraData={true}
        isHorizontalArray={false}
        verticalAnimation={'fast'}
        onEndReached={onEndReached}
        horizontalAnimation={500}
        horizontalListInLoop={true}
        verticalScrollEnabled={true}
        horizontalScrollEnabled={true}
        showsVerticalScrollIndicator={false}
        listFooterComponent={renderFooterLoader}
        renderItem={(item, index) => renderHorizontalSlider(item, index)}
        marginTopForFirstIndex={Responsive.heightPercentageToDP(35)}
        verticalListRef={ref => console.log(ref)}
        horizontalListRef={ref => console.log(ref)}
        verticalCurrentIndex={value => console.log('verticalIndex =>', value)}
        horizontalCurrentIndex={value =>
          console.log('horizontalIndex =>', value)
        }
      />
    </View>
  );
}

 const feed = [
    {
      id: 774,
    },
    {
      id: 774,
    },
    {
      id: 774,
    },
    {
      id: 774,
    },
  ];

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    justifyContent: 'center',
    marginLeft: 100,
    width: 350,
    backgroundColor: 'red',
  },
  circle: {
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'black',
    width: 300,
    height: 300,
    borderRadius: 150,
  },
  txt: {color: 'red', fontSize: 35},
});

Vertical and Horizontal circle-animation-list

import CircleAnimationList from 'react-native-circle-animation-list';

 const renderHorizontalSlider = (item, index) => {
    return (
      <View style={styles.container}>
        <View style={styles.circle}>
          <Text style={styles.txt}>{index}</Text>
        </View>
      </View>
    );
  };

  const onEndReached = () => {
    console.log('=== onEndReached ===');
  };

  const renderFooterLoader = () => {
    console.log('=== renderFooterLoader ===');
  };

  return (
    <View style={{flex: 1}}>
      <CircleAnimationList
        data={feed}
        extraData={true}
        secondArrayName={'userSharedTracks'}
        isHorizontalArray={true}
        verticalAnimation={'fast'}
        onEndReached={onEndReached}
        horizontalAnimation={500}
        horizontalListInLoop={true}
        verticalScrollEnabled={true}
        horizontalScrollEnabled={true}
        showsVerticalScrollIndicator={false}
        listFooterComponent={renderFooterLoader}
        renderItem={(item, index) => renderHorizontalSlider(item, index)}
        marginTopForFirstIndex={Responsive.heightPercentageToDP(35)}
        verticalListRef={ref => console.log(ref)}
        horizontalListRef={ref => console.log(ref)}
        verticalCurrentIndex={value => console.log('verticalIndex =>', value)}
        horizontalCurrentIndex={value =>
          console.log('horizontalIndex =>', value)
        }
      />
    </View>
  );
}

 const feed = [
    {
      id: 774,
      userSharedTracks: [
        {
          id: 774,
        },
        {
          id: 774,
        },
        {
          id: 774,
        },
      ],
    },
    {
      id: 774,
      userSharedTracks: [
        {
          id: 774,
        },
        {
          id: 774,
        },
        {
          id: 774,
        },
      ],
    },
    {
      id: 774,
      userSharedTracks: [
        {
          id: 774,
        },
        {
          id: 774,
        },
        {
          id: 774,
        },
      ],
    },
    {
      id: 774,
      userSharedTracks: [
        {
          id: 774,
        },
        {
          id: 774,
        },
        {
          id: 774,
        },
      ],
    },
  ];

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    justifyContent: 'center',
    marginLeft: 100,
    width: 350,
    backgroundColor: 'red',
  },
  circle: {
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'black',
    width: 300,
    height: 300,
    borderRadius: 150,
  },
  txt: {color: 'red', fontSize: 35},
});

Note:

There is no any difference between Vertical circle-animation-list and Vertical and Horizontal circle-animation-list.

1. Vertical circle-animation-list only have to pass isHorizontalArray={false}
2. use Vertical & Horizontal circle-animation-list isHorizontalArray={true} and secondArrayName={'userSharedTracks'}

Basic properties