react-native-wheel-array/index.js

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

import React, { Component } from 'react';
import { Text, View, ImageBackground } from 'react-native';

type Props = {
	valueArray: any,
	wheelSize?: number,
	wheelBackground?: string,
	renderChildComponent?: any,
	childComponentWidth: number,
	wheelStyle?: any,
	marginBorder?: number
}

function WheelArray(
	{
		valueArray = [],
		wheelSize = 400,
		wheelBackground = 'transparent',
		renderChildComponent = renderDefaultChildComponent,
		childComponentWidth = 20,
		wheelStyle = {},
		marginBorder = 10
	}: Props) {
	return (
		<View
			style={[{
				width: wheelSize,
				height: wheelSize,
				alignItems: 'center',
				justifyContent: 'center',
				backgroundColor: wheelBackground,
				borderRadius: wheelSize / 2,
			}, wheelStyle]}>
			{valueArray.map((item, index) => {
				let transformDegree = '0deg',
					sliceDegree = 360 / valueArray.length;
				return renderItem(item, index, `-${sliceDegree * index}deg`);
			})}

		</View>
	);

	function renderItem(item, index, transformDegree) {
		return <View
			key={transformDegree}
			style={{
				width: wheelSize,
				height: wheelSize,
				borderRadius: wheelSize / 2,
				position: 'absolute',
				top: 0,
				transform: [{rotate: transformDegree}],
			}}>
			<View style={{
				position: 'absolute',
				left: wheelSize / 2 - childComponentWidth / 2,
				top: marginBorder,
			}}>
				{renderChildComponent(item, index)}
			</View>
		</View>;
	}
}

function renderDefaultChildComponent(content) {
	return <View style={{
		height: 40,
		width: 20,
		backgroundColor: getRandomColor(),
		alignItems: 'center',
		justifyContent: 'center'
	}}>
		<Text style={{fontWeight: 'bold'}}>
			{content}
		</Text>
	</View>;
}

function getRandomColor() {
	let letters = '0123456789ABCDEF';
	let color = '#';
	for (let i = 0; i < 6; i++) {
		color += letters[Math.floor(Math.random() * 16)];
	}
	return color;
}

module.exports = WheelArray;