React Native Wheel Array Component

A React Native component for generating and displaying interactive array over a circle. Compatible with both iOS and Android.

Table of Contents

1. Installation
2. Usage
3. Props
4. General Example
5. Credit

Installation

1. install react-native-wheel-array and its dependeices

npm install react-native-wheel-array --save

or

yarn add react-native-wheel-array

Usage

Props

|Prop|Type|Description|Required|Default |---|---|---|---|--- |valueArray|array|Array of items|Yes|[] |wheelSize|number|Diameter of the wheel|No|400| |wheelBackground|string|Background color of the wheel|No|transparent| |renderChildComponent|function|function to render array's item|No|() => {return null}| |childComponentWidth|number|Width of the child component |No|20| |wheelStyle|object |Styles to override wheel|No|{}| |marginBorder|number|Distance from children object to border|No|10|

General Example

The following example will render a wheel with 20 element placed around it

import WheelArray from 'react-native-wheel-array';

const valueArray = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20'];
export default class WheelArrayExample extends Component {
	render() {
		return (
			<View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
				<WheelArray
					childComponentWidth={20}
					wheelStyle={{backgroundColor: 'green'}}
					valueArray={valueArray}/>
			</View>
		);
	}
}

Credit

This package is finished thanks to the help of DTP Corporation