diff --git a/index.js b/index.js
index f2a3753..de69717 100644
--- a/index.js
+++ b/index.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import styled from 'styled-components';
 import {
   View,
   Text,
@@ -9,30 +8,48 @@ import {
 } from 'react-native';
 import PropTypes from 'prop-types';
 
-const Container = styled.View`
-  height: ${props => props.wrapperHeight};
-  flex: 1;
-  overflow: hidden;
-  align-self: center;
-  width: ${props => props.wrapperWidth};
-  background-color: ${props => props.wrapperBackground};
-`;
-export const HighLightView = styled.View`
-  position: absolute;
-  top: ${props => (props.wrapperHeight - props.itemHeight) / 2};
-  height: ${props => props.itemHeight};
-  width: ${props => props.highlightWidth};
-  border-top-color: ${props => props.highlightColor};
-  border-bottom-color: ${props => props.highlightColor};
-  border-top-width: ${props => props.highlightBorderWidth}px;
-  border-bottom-width: ${props => props.highlightBorderWidth}px;
-`;
-export const SelectedItem = styled.View`
-  height: 30px;
-  justify-content: center;
-  align-items: center;
-  height: ${props => props.itemHeight};
-`;
+const Container = props => {
+  const style = {
+    height: props.wrapperHeight,
+    flex: 1,
+    overflow: 'hidden',
+    alignSelf: 'center',
+    width: props.wrapperWidth,
+    backgroundColor: props.wrapperBackground
+  }
+  return (
+    <View style={style}>
+      {props.children}
+    </View>
+  )
+};
+
+export const HighLightView = props => {
+  return <View style={{
+    position: 'absolute',
+    top: (props.wrapperHeight - props.itemHeight) / 2,
+    height: props.itemHeight,
+    width: props.highlightWidth,
+    borderTopColor: props.highlightColor,
+    borderBottomColor: props.highlightColor,
+    borderTopWidth: props.highlightBorderWidth,
+    borderBottomWidth: props.highlightBorderWidth
+  }} />
+};
+
+export const SelectedItem = props => {
+  const style = {
+    height: props.itemHeight,
+    justifyContent: 'center',
+    alignItems: 'center',
+  }
+  return (
+    <View style={style}>
+      {props.children}
+    </View>
+  )
+};
+
 const deviceWidth = Dimensions.get('window').width;
 export default class ScrollPicker extends React.Component {
   constructor() {
@@ -47,7 +64,7 @@ export default class ScrollPicker extends React.Component {
   }
 
   componentDidMount() {
-    if (this.props.selectedIndex) {
+    if (this.props.selectedIndex !== null) {
       this.scrollToIndex(this.props.selectedIndex);
     }
   }
@@ -59,15 +76,15 @@ export default class ScrollPicker extends React.Component {
   }
 
   render() {
-    const {header, footer} = this.renderPlaceHolder();
+    const { header, footer } = this.renderPlaceHolder();
     return (
       <Container wrapperHeight={this.props.wrapperHeight} wrapperWidth={this.props.wrapperWidth}
-                 wrapperBackground={this.props.wrapperBackground}>
+        wrapperBackground={this.props.wrapperBackground}>
         <HighLightView highlightColor={this.props.highlightColor}
-                       highlightWidth={this.props.highlightWidth}
-                       wrapperHeight={this.props.wrapperHeight}
-                       itemHeight={this.props.itemHeight}
-                       highlightBorderWidth={this.props.highlightBorderWidth}/>
+          highlightWidth={this.props.highlightWidth}
+          wrapperHeight={this.props.wrapperHeight}
+          itemHeight={this.props.itemHeight}
+          highlightBorderWidth={this.props.highlightBorderWidth} />
         <ScrollView
           ref={(sview) => {
             this.sview = sview;
@@ -90,9 +107,9 @@ export default class ScrollPicker extends React.Component {
 
   renderPlaceHolder() {
     const height = (this.props.wrapperHeight - this.props.itemHeight) / 2;
-    const header = <View style={{height, flex: 1}}></View>;
-    const footer = <View style={{height, flex: 1}}></View>;
-    return {header, footer};
+    const header = <View style={{ height, flex: 1 }}></View>;
+    const footer = <View style={{ height, flex: 1 }}></View>;
+    return { header, footer };
   }
 
   renderItem(data, index) {
@@ -120,7 +137,7 @@ export default class ScrollPicker extends React.Component {
         this.isScrollTo = true;
       }
       if (this.sview) {
-        this.sview.scrollTo({y: verticalElem});
+        this.sview.scrollTo({ y: verticalElem });
       }
     }
     if (this.state.selectedIndex === selectedIndex) {
@@ -192,7 +209,7 @@ export default class ScrollPicker extends React.Component {
     const y = this.props.itemHeight * ind;
     setTimeout(() => {
       if (this.sview) {
-        this.sview.scrollTo({y});
+        this.sview.scrollTo({ y });
       }
     }, 0);
   }
@@ -228,6 +245,6 @@ ScrollPicker.defaultProps = {
   },
   onScrollEndDrag: () => {
   },
-  itemTextStyle: {fontSize: 20, lineHeight: 26, textAlign: 'center', color: '#B4B4B4'},
-  activeItemTextStyle: {fontSize: 20, lineHeight: 26, textAlign: 'center', color: '#222121'}
-};
\ No newline at end of file
+  itemTextStyle: { fontSize: 20, lineHeight: 26, textAlign: 'center', color: '#B4B4B4' },
+  activeItemTextStyle: { fontSize: 20, lineHeight: 26, textAlign: 'center', color: '#222121' }
+};