segoviadiego / react-native-circle-list

A javascript implementation of a circular list for React Native

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!