/**
 * react-native-spinkit android sample app
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Picker,
  Slider
} from 'react-native';

import Spinner from 'react-native-spinkit';

class rn_spinkit_dev extends Component {

  constructor(props) {
    super(props)
    this.state = {
      type : 'Circle',
      r : 'FF',
      g : 'FF',
      b : 'FF',
      size : 48,
      visible : true
    }
  }

  render() {

    return (
      <View style={styles.container}>
        <Picker
          style={styles.picker}
          enable={true}
          mode="dialog"
          selectedValue={this.state.type}
          onValueChange={(type) => this.setState({type})}>
          <Picker.Item label="Bounce" value="Bounce" />
          <Picker.Item label="Wave" value="Wave" />
          <Picker.Item label="RotatingPlane" value="RotatingPlane" />
          <Picker.Item label="WanderingCubes" value="WanderingCubes" />
          <Picker.Item label="9CubeGrid" value="9CubeGrid" />
          <Picker.Item label="FadingCircleAlt" value="FadingCircleAlt" />
          <Picker.Item label="Pulse" value="Pulse" />
          <Picker.Item label="ChasingDots" value="ChasingDots" />
          <Picker.Item label="ThreeBounce" value="ThreeBounce" />
          <Picker.Item label="Circle" value="Circle" />
          <Picker.Item label="FoldingCube" value="FoldingCube" />
        </Picker>

        <Spinner
          style={{margin:40}}
          size={this.state.size}
          isVisible={this.state.visible}
          type={this.state.type}
          color={`#${this.state.r}${this.state.g}${this.state.b}`}/>

        <Text style={styles.label}>
          Size {this.state.size}
        </Text>
        <Slider
          style={styles.slider}
          value={48}
          minimumValue={10}
          maximumValue={200}
          onValueChange={(value) => {
            this.setState({size: parseInt(value)})
          }} />
        <Text style={styles.label}>
          R {parseInt(this.state.r, 16)}
        </Text>
        <Slider
          style={styles.slider}
          value={255}
          minimumValue={20}
          maximumValue={255}
          onValueChange={(value) => {
            this.setState({r: parseInt(value).toString(16)})
          }} />
        <Text style={styles.label}>
          G {parseInt(this.state.g,16)}
        </Text>
        <Slider
          style={styles.slider}
          value={255}
          minimumValue={20}
          maximumValue={255}
          onValueChange={(value) => {
            this.setState({g: parseInt(value).toString(16)})
          }} />
        <Text style={styles.label}>
          B {parseInt(this.state.b,16)}
        </Text>
        <Slider
          style={styles.slider}
          value={255}
          minimumValue={20}
          maximumValue={255}
          onValueChange={(value) => {
            this.setState({b: parseInt(value).toString(16)})
          }} />

      </View>
    );

  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#333',
  },
  picker: {
    width : 200,
    margin: 10,
    color : '#FFFFFF'
  },
  slider : {
    width : 200,
  },
  label: {
    textAlign: 'left',
    color: '#FFFFFF',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('rn_spinkit_dev', () => rn_spinkit_dev);

@@ -1,3423 +1,27 @@
-/**%0A * react-native-spinkit android sample app%0A */%0A%0Aimport React, %7B Component %7D from 'react';%0Aimport %7B%0A  AppRegistry,%0A  StyleSheet,%0A  Text,%0A  View,%0A  Picker,%0A  Slider%0A%7D from 'react-native';%0A%0Aimport Spinner from 'react-native-spinkit';%0A%0Aclass rn_spinkit_dev extends Component %7B%0A%0A  constructor(props) %7B%0A    super(props)%0A    this.state = %7B%0A      type : 'Circle',%0A      r : 'FF',%0A      g : 'FF',%0A      b : 'FF',%0A      size : 48,%0A      visible : true%0A    %7D%0A  %7D%0A%0A  render() %7B%0A%0A    return (%0A      %3CView style=%7Bstyles.container%7D%3E%0A        %3CPicker%0A          style=%7Bstyles.picker%7D%0A          enable=%7Btrue%7D%0A          mode=%22dialog%22%0A          selectedValue=%7Bthis.state.type%7D%0A          onValueChange=%7B(type) =%3E this.setState(%7Btype%7D)%7D%3E%0A          %3CPicker.Item label=%22Bounce%22 value=%22Bounce%22 /%3E%0A          %3CPicker.Item label=%22Wave%22 value=%22Wave%22 /%3E%0A          %3CPicker.Item label=%22RotatingPlane%22 value=%22RotatingPlane%22 /%3E%0A          %3CPicker.Item label=%22WanderingCubes%22 value=%22WanderingCubes%22 /%3E%0A          %3CPicker.Item label=%229CubeGrid%22 value=%229CubeGrid%22 /%3E%0A          %3CPicker.Item label=%22FadingCircleAlt%22 value=%22FadingCircleAlt%22 /%3E%0A          %3CPicker.Item label=%22Pulse%22 value=%22Pulse%22 /%3E%0A          %3CPicker.Item label=%22ChasingDots%22 value=%22ChasingDots%22 /%3E%0A          %3CPicker.Item label=%22ThreeBounce%22 value=%22ThreeBounce%22 /%3E%0A          %3CPicker.Item label=%22Circle%22 value=%22Circle%22 /%3E%0A          %3CPicker.Item label=%22FoldingCube%22 value=%22FoldingCube%22 /%3E%0A        %3C/Picker%3E%0A%0A        %3CSpinner%0A          style=%7B%7Bmargin:40%7D%7D%0A          size=%7Bthis.state.size%7D%0A          isVisible=%7Bthis.state.visible%7D%0A          type=%7Bthis.state.type%7D%0A          color=%7B%60#$%7Bthis.state.r%7D$%7Bthis.state.g%7D$%7Bthis.state.b%7D%60%7D/%3E%0A%0A        %3CText style=%7Bstyles.label%7D%3E%0A          Size %7Bthis.state.size%7D%0A        %3C/Text%3E%0A        %3CSlider%0A          style=%7Bstyles.slider%7D%0A          value=%7B48%7D%0A          minimumValue=%7B10%7D%0A          maximumValue=%7B200%7D%0A          onValueChange=%7B(value) =%3E %7B%0A            this.setState(%7Bsize: parseInt(value)%7D)%0A          %7D%7D /%3E%0A        %3CText style=%7Bstyles.label%7D%3E%0A          R %7BparseInt(this.state.r, 16)%7D%0A        %3C/Text%3E%0A        %3CSlider%0A          style=%7Bstyles.slider%7D%0A          value=%7B255%7D%0A          minimumValue=%7B20%7D%0A          maximumValue=%7B255%7D%0A          onValueChange=%7B(value) =%3E %7B%0A            this.setState(%7Br: parseInt(value).toString(16)%7D)%0A          %7D%7D /%3E%0A        %3CText style=%7Bstyles.label%7D%3E%0A          G %7BparseInt(this.state.g,16)%7D%0A        %3C/Text%3E%0A        %3CSlider%0A          style=%7Bstyles.slider%7D%0A          value=%7B255%7D%0A          minimumValue=%7B20%7D%0A          maximumValue=%7B255%7D%0A          onValueChange=%7B(value) =%3E %7B%0A            this.setState(%7Bg: parseInt(value).toString(16)%7D)%0A          %7D%7D /%3E%0A        %3CText style=%7Bstyles.label%7D%3E%0A          B %7BparseInt(this.state.b,16)%7D%0A        %3C/Text%3E%0A        %3CSlider%0A          style=%7Bstyles.slider%7D%0A          value=%7B255%7D%0A          minimumValue=%7B20%7D%0A          maximumValue=%7B255%7D%0A          onValueChange=%7B(value) =%3E %7B%0A            this.setState(%7Bb: parseInt(value).toString(16)%7D)%0A          %7D%7D /%3E%0A%0A      %3C/View%3E%0A    );%0A%0A  %7D%0A%7D%0A%0Aconst styles = StyleSheet.create(%7B%0A  container: %7B%0A    flex: 1,%0A    justifyContent: 'center',%0A    alignItems: 'center',%0A    backgroundColor: '#333',%0A  %7D,%0A  picker: %7B%0A    width : 200,%0A    margin: 10,%0A    color : '#FFFFFF'%0A  %7D,%0A  slider : %7B%0A    width : 200,%0A  %7D,%0A  label: %7B%0A    textAlign: 'left',%0A    color: '#FFFFFF',%0A    marginBottom: 5,%0A  %7D,%0A%7D);%0A%0AAppRegistry.registerComponent('rn_spinkit_dev', () =%3E rn_spinkit_dev
+require('./index.ios.js'
 );%0A

Revert android example changes