react-native-circle-list

A Javascript implementation of a circular list, for React Native

Usage no npm install needed!

<script type="module">
  import reactNativeCircleList from 'https://cdn.skypack.dev/react-native-circle-list';
</script>

README

react-native-circle-list

Description

A React Native component implemented in Javascript to create a circular list of elements with infinite scroll. Data is mapped onto a fixed number of elements so no matter how long your list is, it will appear to render in the given circle size.

Installation

$ yarn add react-native-circle-list
$ npm install react-native-circle-list

Example Usage

...
import CircleList from 'react-native-circle-list'
...

export class ExampleUsage extends PureComponent {

    _keyExtractor = item => item.id

    _renderItem = ({ item }) => <CircleListItem label={`Label ${item.value}`} value={item.value} />

    render() {
        const { data } = this.props

        return (
            <CircleList
                data={data}
                keyExtractor={this._keyExtractor}
                renderItem={this._renderItem}
            />
        )
    }
}

Props

Prop Default Description Required
containerStyle undefined Override default container styling. No
data [] Array of objects, similar to React Native's FlatList. Yes
elementCount 12 Number of elements that form the circle. Any value lower than 12 will have no effect as this is the smallest amount to form a circular list. Max element count is 40, any number greater than this will have no effect. Most arc shapes can still be achieved with the proper combination of element count, radius, and flatness. No
flatness 0 Value between 0-1 specifying the flatness of the visible part of the circle. With a flatness of 1 (fully flat) only uniformly sized elements are supported currently. No
innerRef undefined Gets the ref for the CircleList component . No
keyExtractor undefined Function to extract list item keys from dataset, similar to React Native's FlatList Yes
onScroll undefined Called continuously as the list is scrolled. No
onScrollBegin undefined Called once when scrolling of the list begins. No
onScrollEnd undefined Called once when scrolling of the list ends. No
radius 1.2 * (SCREEN_WIDTH / 2) Radius of the circle form by the list elements. No
renderItem undefined Function to that returns a React Component or elements to render, similar to React Native's FlatList. Yes
selectedItemScale 1.15 Scaling factor for the selected item. No
swipeSpeedMultiplier 40 Postive number to customize how quickly the list rotates in response to a gesture. A higher number means more movement for a given gesture. No
visiblityPadding 3 How many elements to show on either side of the selected element. No

Methods

Method Arguments Description
scrollToIndex (index, duration) Scrolls to the specified index in the given duration. Default duration is 250ms.

PRs Welcome!