react-native-wheel-array
Version:
A React Native component for generating and displaying interactive array over a circle. Compatible with both iOS and Android.
71 lines (53 loc) • 2.22 kB
Markdown
[](https://badge.fury.io/js/react-native-wheel-array.svg)
[](https://nodei.co/npm/react-native-wheel-array.png?downloads=true)
# 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](#installation)
1. [Usage](#usage)
1. [Props](#props)
1. [General Example](#general-example)
1. [Credit](#contributing)
## Installation
1. install react-native-wheel-array and its dependeices
```sh
npm install react-native-wheel-array --save
```
or
```sh
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
```js
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>
);
}
}
```
<p align="center">
<img src="https://i.ibb.co/L1pCMN8/Simulator-Screen-Shot-i-Phone-11-Pro-Max-2020-04-07-at-10-37-36.png" alt="General Example" width="300" height="650"/>
</p>
## Credit
This package is finished thanks to the help of DTP Corporation