# react-native-center-content-view

> CenterContentView is a pure JavaScript component,and it can auto center cell with some simple transfrom animations when you move, slide or release.

Latest version **0.0.7** (published 2016-07-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-center-content-view
pnpm add react-native-center-content-view
yarn add react-native-center-content-view
bun add react-native-center-content-view
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.7 |
| Published | 2016-07-15 |
| First published | 2016-07-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 19 |
| Author | Zhang Tian |
| Maintainers | zt_halcyon |
| Keywords | react-native, center, component |

## Links

- npm: https://www.npmjs.com/package/react-native-center-content-view
- Repository: https://github.com/yuanyuli/CenterContentView
- Homepage: https://github.com/yuanyuli/CenterContentView#readme
- Issues: https://github.com/yuanyuli/CenterContentView/issues
- npm.io page: https://npm.io/package/react-native-center-content-view

## Recent versions

- 0.0.7 (latest) — 2016-07-15
- 0.0.6 — 2016-07-11
- 0.0.5 — 2016-07-07
- 0.0.4 — 2016-07-07
- 0.0.3 — 2016-07-07
- 0.0.2 — 2016-07-05
- 0.0.1 — 2016-07-05

## README

# CenterContentView

CenterContentView is a pure JavaScript component,and it can auto center cell with some simple transfrom animations when you move, slide or release.

## Demo

![Demo](./gif/Demo.gif)

## Installation

`npm install react-native-center-content-view -save`

## Documentaion

### Usage
```javascript	
import CenterContentView from 'react-native-center-content-view';
	
class Demo extends Component {
	render() {
    	return (
        <CenterContentView/>
    	)	
      }
 }
```
### Examples
```
<CenterContentView
  style={{height:230,marginTop:20,backgroundColor:'#EBEBEB',alignItems:'center'}}
  space={30}
  scale={this.state.scale}
  opacity={this.state.opacity}
  rotateLeft={this.state.rotateLeft}
  rotateRight={this.state.rotateRight}
  data={SECTIONS}
  initialIndex={3}
  renderCell={this.renderCell.bind(this)}
/>
```
## Props
- `data` (Array) `null` - dataSource
- `renderCell` (Function)  - Cell Component
- `initialIndex` (Number:[1,+∞)] )`1` - intialIndex
- `space` (Number) `30` - the space between Cell to Cell 
- `scale` (Number:[0,1]) `1` - scale of the Cell that do not on the center of CenterContentView,
- `opacity` (Number:[0,1]) `1` - opacity of the Cell that do not on the center of CenterContentView,
- `rotateLeft` (String) `"0deg"` - rotate of the Cell that on the left of CenterContentView,
- `rotateRight` (String) `"0deg"` - rotate of the Cell that on the right of CenterContentView,
- `startScroll` (Function(obj,index)) - callback when scroll animation start
- `endScroll` (Function(obj,index)) - callback when scroll animation stop

---
_Source: https://npm.io/package/react-native-center-content-view · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._